欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

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

发布时间：2025/7/14 编程问答 51 豆豆
生活随笔 收集整理的这篇文章主要介绍了 【原创】原来你竟然是这样的Chrome？！Firefox笑而不语 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

书接上文

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

最近我们重新对测试和代码进行了优化和整理，有如下三个发现：

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

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

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

因此，优化后的代码将开始时间放到页面底部，如下所示：

</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 页面结构如下：

<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=1if(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：

 

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

浏览器原始的渲染时间（秒）优化后的渲染时间（秒）
Firefox0.750.70
Chrome1.851.08
Edge5.532.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哪个版本能修正类似的问题？

 

 

不忘初心，砥砺前行！

 

 

 

 

转载于:https://www.cnblogs.com/sanshi/p/11247741.html

总结

以上是生活随笔为你收集整理的【原创】原来你竟然是这样的Chrome？！Firefox笑而不语的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。