【原创】这一次，Chrome表现和IE11一样令人失望，围观群众有：Edge，Firefox
前言
俗话说，常在河边走哪能不湿鞋，天天和浏览器打交道，发现浏览器竟然也隐藏BUG也不是新鲜事了。可以看下我之前的文章：
【原创】分享IE7一个神奇的BUG（不是封闭标签的问题，的确是IE7的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笑而不语
