前言
每个浏览器新版本发布,都号称性能有显著提升,并且市面有各种测试工具,测试结果也是大相径庭,比如下面这篇文章:
测试结果就很有意思,请看下如下两幅截图:
一言以蔽之:Google 的测试引擎 Chrome 胜,Mozilla 的测试引擎 Firefox 胜!
这样的测试结果不免让人大跌眼镜,这里面的水分也不少阿,至少对自家的浏览器有优化来着。
公平的比赛
最近在优化 FineUIPro 的表格性能,一般来说表格行数在 100 条之内都不会有问题。但为了性能调校,我们将表格行增加到 500 多行,列增加到 20 多列,并且行高不固定,来测试下各个浏览器的性能。
测试使用的电脑是 MacBook Pro 笔记本(英特尔 i7-8750H,32GB内存,512GB SSD),单独拆分出一个新的 256GB 分区用来安装 Windows 10 Pro(64位)系统,并更新至最新补丁。
参与测试的浏览器都是最新版,分别为:
- Chrome 75
- Firefox 68
- Edge 44
- IE11
测试页面代码如下:
这里面有两个关键点:
1. 在 <head> 标签中记录一个开始时间。
2. 在表格的渲染完成事件(render)中记录一个结束时间,并渲染耗时更新到表格标题栏。
下面是测试结果:
Firefox:
Chrome:
Edge:
IE11:
本来在我心目中 Chrome 应该是最快的,实际开发中也一直在用 Chrome ,但是结果却很意外。下面对上述结果进行一个综述:
浏览器 | 表格渲染需要的时间(秒) |
Firefox | 1.2 |
Chrome | 2.7 |
Edge | 5.1 |
IE11 | 9.6 |
这也就来到了本文标题的结论,在我这个特定页面的测试中:
Firefox的性能是Chrome的2倍,Edge的4倍,IE11的6倍!
你也可以自己试一试,看看是不是Firefox要比Chrome快,在线测试地址:
后记
每次关于浏览器的对比都会引来不同的声音,没关系,所谓萝卜青菜各有所爱,性能并不是浏览器的全部,并且这里的性能测试也只是具体到一个特定页面的加载速度,可能和你的实际浏览体验大相径庭。
不过就本测试案例而已,Firefox的性能确实优于Chrome很多,就在结束本文的时候,我还发现另外一个有趣的现象,那就是选中行的延迟:
1. 在Chrome选中一行时,可以感觉到明显的卡顿
2. 在Firefox选中一行时,非常丝滑,几乎没有卡顿
Chrome:
Firefox:
这又该作为解释,因为是相同的代码相同的逻辑,不至于 Chrome 比 Firefox 差那么多吧,这也算是一个开放的问题,等后期我有了进一步的发现,再回来。
至于上面 FineUIPro 测试页面的性能,我还在进一步调优,你也可以过段时间回来看看,我会进一步分享调优的过程和结果。
不忘初心,砥砺前行!
本系列:
=======================