书接上文

上一篇文章《【原创】用事实说话,Firefox 的性能是 Chrome 的 2 倍,Edge 的 4 倍,IE11 的 6 倍!
<https://www.cnblogs.com/sanshi/p/11237226.html>
》,我们对比了不同浏览器下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
<https://www.cnblogs.com/sanshi/p/11233442.html>》,我们发现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=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哪个版本能修正类似的问题?

 

 

不忘初心,砥砺前行!

 

 

 

 

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