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

前言

俗话说，常在河边走哪能不湿鞋，天天和浏览器打交道，发现浏览器竟然也隐藏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笑而不语