【原创】原来你居然是这样的Chrome？！Firefox笑而不语

时间 2019-11-05

标签原创原来居然这样 chrome firefox 不语栏目 Chrome 繁體版

原文原文链接

书接上文

上一篇文章《【原创】用事实说话，Firefox 的性能是 Chrome 的 2 倍，Edge 的 4 倍，IE11 的 6 倍！》，咱们对比了不一样浏览器下FineUIPro一个页面的性能，发现Firefox的加载速度最快，而众望所归的Chrome却表现的差强人意，加载速度仅仅是Firefox的一半！css

最近咱们从新对测试和代码进行了优化和整理，有以下三个发现：html

1. 测试代码将开始时间放在<head>标签的作法有失偏颇，以下所示：web

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        var __STARTTIME = new Date();
    </script>
</head>

这会致使所计算的时间包含HTML页面，CSS文件和JavaScript文件的网络传输时间，实际上这部分是咱们测试案例所不关心的，咱们仅关心页面的渲染速度！chrome

所以，优化后的代码将开始时间放到页面底部，以下所示：浏览器

</form>
    <script>
        // 等全部JS资源下载完毕后开始
        var __STARTTIME = new Date();

        // 表格渲染完毕后结束
        function onGridRender() {
            F.ui.Grid1.setTitle('表格（23列，500行，行高不一样） - 渲染：' + ((new Date() - __STARTTIME) / 1000).toFixed(2));
        }

    </script>
</body>
</html>

2. 前面一篇文章《【原创】这一次，Chrome表现和IE11同样使人失望，围观群众有：Edge，Firefox》，咱们发现Chrome解析以下结构时遇到问题：网络

2.1 页面结构以下：app

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

2.2 页面样式包含：性能

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

这样的 CSS 设置会致使滚动时页面出现白屏，而且CPU占用率飙升。测试

不只如此，在去除 td 的 overflow:hidden 样式后，咱们发现 Chrome 下的页面渲染速度也有明显的提高，这一点对接下来的Chrome性能提高也很重要！优化

3. FineUIPro 代码中有强制 Chrome 重绘的浏览器特定代码，这也是对 Chrome 以前版本存在滚动条不显示的应急策略：

function forceChromeRepaint(targetNode) {
    //:: Chrome的BUG（Firefox，IE都没有此问题）
    //:: http://stackoverflow.com/questions/4394350/chrome-scrollbars-not-disappearing-when-content-is-smaller-than-container?rq=1
    if(F._fjs_isChrome) {
        var overflow = targetNode.css('overflow');
        if(overflow === 'auto' && targetNode._fjs_scrollLeft() == 0 && targetNode._fjs_scrollTop() == 0) {
            targetNode.css('overflow', 'hidden');
            //:: 强制浏览器从新绘制
            targetNode[0].scrollWidth;
            targetNode.css('overflow', 'auto');
        }
    }
}

在最新版的Chrome下测试，相应的浏览器滚动条不显示问题已经获得了修正，因此能够把相关的强制重绘代码去掉了（以前出问题的好像是Chrome v58先后的一些版本，如今Chrome都升级到75了）。这也进一步提高了页面的渲染速度。

通过上面三方面的改进，咱们再来看下不一样浏览器下的页面渲染性能的对比数据。

优化后的对比数据

和第一篇文章的测试相似，咱们将表格行增长到 500 多行，列增长到 20 多列，而且行高不固定，来测试下各个浏览器的性能。

测试使用的电脑是 MacBook Pro 笔记本（英特尔 i7-8750H，32GB内存，512GB SSD），单独拆分出一个新的 256GB 分区用来安装 Windows 10 Pro（64位）系统，并更新至最新补丁。

参与测试的浏览器都是最新版，分别为：

Chrome 75
Firefox 68
Edge 44

因为 IE11 有明显的卡顿，进行本测试意义不大，因此此次再也不对 IE11 进行测试。

下面是测试结果（第一张是 FineUIPro v5.5.0 的截图，第二张是代码优化后的截图）：

Firefox：

Chrome：

Edge：

下面对上述结果进行一个综述：

浏览器	原始的渲染时间（秒）	优化后的渲染时间（秒）
Firefox	0.75	0.70
Chrome	1.85	1.08
Edge	5.53	2.47

注：

1. 每次页面刷新结果都有必定的差别，这个取的是屡次运行的中间值。

2. 优化后的结果须要等FineUIPro v5.6.0 发布后自行到官网示例测试，目前没有在线测试连接。

能够看到，通过代码优化后，Chrome的性能有明显的提高，但即便如此，Firefox仍是比Chrome有性能优点，只不过再也不那么辣眼睛了。

发现新问题

看似一个问题的结束，倒是另外一个问题的开始，还记得上一篇文章中咱们提到 Chrome 下选中卡顿的问题吗？

即便在上述数据优化以后，Chrome的渲染性能有明显提高的状况下（从1.85s提高到1.08s以后），Chrome下的行选中依然有明显的卡顿现象，对比下几个浏览器下的动图：

Chrome：

Firefox：

Edge：

Chrome你这是要闹哪样？即便页面渲染慢得多的Edge都没有卡顿，选中行时很是丝滑，而Chrome就像被卡着脖子同样，每次点击都有差很少0.5秒的延迟！

真不省心，真不省心.....

解决问题

这个问题的解决能够说是费尽周折，由于已经明确知道是Chrome浏览器的BUG，而Firefox和Edge都正常，因此根本不能按照常规思路去解释。

后来，一个偶尔的机会，发现去掉第一列（包含复选框的那一列），问题神奇般的消失了，因此我一度怀疑是复选框的样式问题，来看一下。
复选框的HTML结构很简单：

<i class="f-icon f-iconfont f-grid-checkbox f-checkbox"></i>

CSS代码：

.f-checkbox {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    margin: 3px 1px;
    border-width: 1px;
    border-style: solid;
    border-radius: 2px;
}
.f-checkbox:after {
    display: table;
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 8px;
    border-width: 2px;
    border-style: solid;
    border-color: #fff;
    border-top: 0;
    border-left: 0;
    content: " ";
    -webkit-transform: rotate(45deg) scale(0);
    transform: rotate(45deg) scale(0);
    opacity: 0;
    filter: alpha(opacity=0);
}
.f-checkbox.f-checked {
    background-color: #007465;
    border-color: #007465;
}
.f-checkbox.f-checked:after {
    width: 5px;
    height: 8px;
    left: 4px;
    top: 1px;
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
    opacity: 1;
    filter: alpha(opacity=100);
}

这段CSS代码我看了好久好久，实在找不到能够优化的地方，由于这个作法也是业内所公认的，经过将 f-checkbox:after 的 L 型边框旋转 45 度来实现对勾的效果。

接下来，神奇的事情发生了，一个偶然的机会，我会外层的 .f-grid-cell-inner 的 position: relative 去掉，全部的卡顿不见了，一切都像Firefox同样丝滑：

如今来看下去掉这个 CSS 属性以后，行选中的效果，丝滑的就像Firefox同样：

问题解决了，是否是很高兴？

惋惜一点都高兴不起来，首先不知道这个 td -> div 的 position:relative 挨着谁的事了，这么不受 Chrome 的待见。

其次这个属性虽然FineUIPro没有大用处，仍是有一点用处的，好比这里：

因此遇到这种状况，就先加个例外好了。

无论怎么说，也算是暂时画上一个句号，看Chrome哪一个版本能修正相似的问题？

不忘初心，砥砺前行！