【原创】这一次,Chrome表现和IE11一样令人失望,围观群众有:Edge,Firefox

匆匆过客 提交于 2020-03-01 03:17:54

前言

俗话说,常在河边走哪能不湿鞋,天天和浏览器打交道,发现浏览器竟然也隐藏BUG也不是新鲜事了。可以看下我之前的文章:

【原创】分享IE7一个神奇的BUG(不是封闭标签的问题,的确是IE7的BUG)

【原创】Chrome53 最新版惊现无厘头卡死 BUG!

【原创】Chrome最新版(53-55)再次爆出BUG!

【原创】三招搞死你的IE11,可重现代码下载(IE Crash keyframes iframe)!

【原创】抓个Firefox的小辫子,围观群众有:Chrome、Edge、IE8-11

【续】抓个Firefox的小辫子,jQuery表示不背这黑锅,Chrome,Edge,IE8-11继续围观中

这类BUG之所以被大家所深恶痛绝,在于其隐蔽性,很多时候不能用常规的逻辑去分析。另一个原因是开发人员一般都很善良,出现问题总是从自身找原因,很少会怀疑到IDE,浏览器这些开发工具上面来。

事实情况是,浏览器也是开发人员开发的,是个软件就有BUG!

 

今天公开的这个Chrome BUG一直长期存在,并且行为表现的和IE11下的一模一样,而Edge和Firefox没有这个问题,下面就听我详细道来......

 

起因

最初这个问题是我们的一个客户发现的,为了测试性能,客户修改了官网示例的代码:

https://pro.fineui.com/#/gridpaging/gridpaging_pageitems_pagesize_database.aspx

增加到每页 100 行数据,就有如下的聊天截图:

总结下来,这个问题有如下特点:

1. 滚动时卡顿,CPU占用率飙升至 27%,滚动结束后CPU占用率下降

2. IE11下滚动中有白屏

 

为了重现这个效果,我们加大了测试力度,把列增加到100列,行调整为190行,在Chrome下的效果如下:

 

在滚动过程中,可以明显看到白屏!!

 

分析问题

由于这个白屏发生在滚动的过程中,所以首先怀疑 FineUIPro 注册的滚动事件,如下所示:

me._fjs_gridBodyctEl.on('scroll', function (event) {
    return;
    
        ......
}

scroll事件处理函数中直接返回,测试发现白屏依旧!

 

既然不是JavaScript代码导致的,那就可能是CSS代码,因为 FineUIPro 中用到了 CSS3 动画,而白屏可能是动画过程,这是极有可能的:

/*
.f-animation .f-calendar-header .f-calendar-nav,
.f-animation .f-tool,
.f-animation .f-btn,
.f-animation .f-tab-header .f-tool.f-tool-close .f-tool-icon,
.f-animation .f-checkbox,
.f-animation .f-radiobutton {
    -webkit-transition: background-color .3s, border-color .3s, color .3s;
    transition: background-color .3s, border-color .3s, color .3s;
}

....

*/

经测试白屏依旧!!

 

既然不是JavaScript的影响,也不是CSS3 动画的影响,莫非是某些CSS规则导致的?

为了便于分析问题,我们将页面生成的HTML拷贝到一个独立的文件中,在页面中只引用 FineUIPro 的CSS文件,经过一点一点的对CSS进行删除测试,最终发现了如下代码会对页面滚动产生影响:

由于表格有近200行100列,所以这个测试文件有 3M 左右,文末会提供下载,你也可以自行测试。

 

简单来说,就是如下两个CSS规则:

.f-grid-cell {
    overflow: hidden;
}
.f-grid-cell-inner {
    position: relative;
}

其中,f-grid-cell 是表格的 td 元素,而 f-grid-cell-inner 是表格 td 里面的 div 元素,如下所示:

<td class="f-grid-cell">
    <div class="f-grid-cell-inner">杨婷婷</div>
</td>

在Chrome中测试效果如下:

 

这里观察到两个显现:

1. 滚动中有明显的白屏

2. Chrome的CPU占用率由最初的 0%,随着滚动的进行一路飙升到 19%

 

现在修改页面上的CSS规则如下:

.f-grid-cell {
    /* overflow: hidden; */
}
.f-grid-cell-inner {
    position: relative;
}

也即是注释掉表格td元素的 overflow 样式规则,刷新页面,再次测试:

仅仅是注释掉 td 的 overflow:hidden 属性,这次的现象截然不同:

1. 滚动过程中已没有白屏现象

2. Chrome的CPU占用率在滚动过程中最高不超过 5%

 

说明Chrome在解析如下两个属性时出现了问题,至少目前发现的这个问题是由于这两个属性冲突导致的:

1. TD 上的 overflow 属性

2. TD 内部 DIV 上的 position:relative

 

浏览器对比

为了确定是否其他浏览器也有类似问题,我们分别对 Edge,IE11,Firefox进行测试,这些浏览器都是目前最新版,版本如下:

1. Chrome:75.0.3770.100(正式版本) (64 位)

2. Firefox:68.0.1 (32 位)

3. Edge:44.18362.1.0

4. IE11:11.239.18362.0

测试代码是如下两个CSS属性同时存在的情况:

.f-grid-cell {
    overflow: hidden;
}
.f-grid-cell-inner {
    position: relative;
}

 

Chrome:前面已经测试过了。

Edge:

 

 

IE11:

 

Firefox:

 

 

下面对比下各个浏览器的表现:

  • Chrome:滚动时出现白屏,CPU 在滚动过程中会飙升到 19%
  • Edge:滚动时不会出现白屏,CPU 在滚动过程中会升到到 9%
  • IE11:滚动时出现白屏,CPU 在滚动过程中会飙升到 17%
  • Firefox:滚动时不会出现白屏,CPU 在滚动过程中会升到到 5%

 

而把CSS样式改为:

.f-grid-cell {
    /* overflow: hidden; */
}
.f-grid-cell-inner {
    position: relative;
}

则在滚动时,四个浏览器都不会出现白屏现象,CPU占用率也会提升,但已经没有那么明显,看下Chrome下的表现:

 

IE11下的表现:

 

这里的效果和之前的有天壤之别,简单概述下,在Chrome下:

  • 添加 TD 的 overflow 属性:滚动时有白屏现象,CPU占用率会飙升到 19%
  • 去掉 TD 的 overflow 属性:滚动时没有白屏,CPU占用率小于3%

在IE11下:

  • 添加 TD 的 overflow 属性:滚动时有白屏现象,CPU占用率会飙升到 19%
  • 去掉 TD 的 overflow 属性:滚动时没有白屏,CPU占用率会升到10%

 

解决办法

目前的解决办法也很简单,去掉 TD 的 overflow 属性,这个设置应该属于历史遗留代码,暂时也没有什么用处。

 

最后,再来对比下修改前后,在Chrome 下 FineUIPro 测试页面的运行效果:

修改前:

 

修改后:

 

性能提升明显!

 

注意:不是说td有 overflow:hidden 属性就会出现这个滚动问题,而是要同时满足如下几个条件:

1. 页面结构如下:

<td class="f-grid-cell">
    <div class="f-grid-cell-inner">杨婷婷</div>
</td>

2. 页面样式包含:

.f-grid-cell {
    overflow: hidden;
}
.f-grid-cell-inner {
    position: relative;
}

3. 表格包含大量的元素,本示例包含200行100列。

 

你也可以自行测试:

测试页面下载

 

不忘初心,砥砺前行!

 

 

本系列:

=======================

【原创】用事实说话,Firefox 的性能是 Chrome 的 2 倍,Edge 的 4 倍,IE11 的 6 倍!

【原创】这一次,Chrome表现和IE11一样令人失望,围观群众有:Edge,Firefox

【原创】原来你竟然是这样的Chrome?!Firefox笑而不语

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!