前言

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

【原创】分享IE7一个神奇的BUG(不是封闭标签的问题,的确是IE7的BUG)
<https://www.cnblogs.com/sanshi/archive/2013/03/18/2966456.html>

【原创】Chrome53 最新版惊现无厘头卡死 BUG! <https://www.cnblogs.com/sanshi/p/5938198.html>

【原创】Chrome最新版(53-55)再次爆出BUG! <https://www.cnblogs.com/sanshi/p/6138767.html>

【原创】三招搞死你的IE11,可重现代码下载(IE Crash keyframes iframe)!
<https://www.cnblogs.com/sanshi/p/7262495.html>

【原创】抓个Firefox的小辫子,围观群众有:Chrome、Edge、IE8-11
<https://www.cnblogs.com/sanshi/p/7920103.html>

【续】抓个Firefox的小辫子,jQuery表示不背这黑锅,Chrome,Edge,IE8-11继续围观中
<https://www.cnblogs.com/sanshi/p/7932032.html>


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

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

 

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

 

起因

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

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

<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列。

 

你也可以自行测试:

测试页面下载 <https://files.cnblogs.com/files/sanshi/test009.zip>

 

不忘初心,砥砺前行!

 

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信