前言

每个浏览器新版本发布,都号称性能有显著提升,并且市面有各种测试工具,测试结果也是大相径庭,比如下面这篇文章:

https://www.oschina.net/news/97924/browser-benchmark-battle

测试结果就很有意思,请看下如下两幅截图:

一言以蔽之: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

测试页面代码如下:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
var __STARTTIME = new Date();
</script>
</head>
<body>
<form id="form1" runat="server">
<f:PageManager ID="PageManager1" AutoSizePanelID="Grid1" runat="server" />
<f:Grid ID="Grid1" IsFluid="true" CssClass="blockpanel" Margin="20px" ShowBorder="true" ShowHeader="true" Title="表格(23列,500行,行高不同)"
EnableCollapse="false" runat="server" DataKeyNames="Id" EnableCheckBoxSelect="true" KeepCurrentSelection="true">
<Columns>
<f:RowNumberField />
<f:BoundField Width="80px" DataField="ID" HeaderText="标识" />
<f:BoundField Width="100px" DataField="Name" HeaderText="姓名" />
......
</Columns>
<Listeners>
<f:Listener Event="render" Handler="onGridRender" />
</Listeners>
</f:Grid>
</form>
<script>
function onGridRender() { F.ui.Grid1.setTitle('表格(23列,500行,行高不同) - 渲染:' +
((new Date() - __STARTTIME) / 1000).toFixed(2)); }
</script>
</body>
</html>

这里面有两个关键点:

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快,在线测试地址:

https://pro.fineui.com/#/grid/_grid_many_columns.aspx

后记

每次关于浏览器的对比都会引来不同的声音,没关系,所谓萝卜青菜各有所爱,性能并不是浏览器的全部,并且这里的性能测试也只是具体到一个特定页面的加载速度,可能和你的实际浏览体验大相径庭。

不过就本测试案例而已,Firefox的性能确实优于Chrome很多,就在结束本文的时候,我还发现另外一个有趣的现象,那就是选中行的延迟:

1. 在Chrome选中一行时,可以感觉到明显的卡顿

2. 在Firefox选中一行时,非常丝滑,几乎没有卡顿

Chrome:

Firefox:

这又该作为解释,因为是相同的代码相同的逻辑,不至于 Chrome 比 Firefox 差那么多吧,这也算是一个开放的问题,等后期我有了进一步的发现,再回来。

至于上面 FineUIPro 测试页面的性能,我还在进一步调优,你也可以过段时间回来看看,我会进一步分享调优的过程和结果。

不忘初心,砥砺前行!

本系列:

=======================

【原创】用事实说话,Firefox 的性能是 Chrome 的 2 倍,Edge 的 4 倍,IE11 的 6 倍!

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

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

最新文章

  1. [翻译] AKKA笔记- ACTORSYSTEM (配置CONFIGURATION 与调度SCHEDULING) - 4(一)
  2. js 数据类型 typeof的测试
  3. EBS中后台AP发票审批脚本
  4. c++ 职责链模式(Chain of Responsibility)
  5. JS replace()方法-字符串首字母大写
  6. HDU4675【GCD of scequence】【组合数学、费马小定理、取模】
  7. Part 10 AngularJS sort rows by table header
  8. mysql5.7的安装
  9. Python中通过Image的open之后,去show结果打不开bmp图片,无法正常显示图片
  10. [学习笔记]设计模式之Singleton
  11. Firefox52非HTTPS页面登录页面提示连接不安全的解决办法
  12. Win32界面 主函数分析
  13. vfd with stm8
  14. PHP生成腾讯云COS请求签名
  15. Keras/Tensorflow选择GPU/CPU运行
  16. window的cmd命令行下新增/删除文件夹及文件
  17. activiti报错ProcessEngines.getDefaultProcessEngine()为null
  18. 点分治 poj1741
  19. spring上下文快速获取方法
  20. mininet invalid literal for int() with base 10: &#39;cpu.cfs_period_us:&#39;

热门文章

  1. &lt;房间内功能&gt;打赏小动画
  2. 用node.js(socket.io)实现数据实时推送
  3. .NET架构师知识普及
  4. Spring源码解读之BeanFactoryPostProcessor的处理
  5. 妹子问我maven是啥?从相亲说起。。
  6. Windows上安装PyV8
  7. centos7 中安装 htop
  8. [hdu-6395]Sequence 分块+矩阵快速幂
  9. ES5_03_Object扩展
  10. python学习 -女神或者男神把微信消息撤回后好慌,有了这个妈妈再也不担心你看不到女神或者男神撤回的消息了(超详解)