前言

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

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笑而不语

【原创】用事实说话，Firefox 的性能是 Chrome 的 2 倍，Edge 的 4 倍，IE11 的 6 倍！的更多相关文章

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

    书接上文 上一篇文章<[原创]用事实说话,Firefox 的性能是 Chrome 的 2 倍,Edge 的 4 倍,IE11 的 6 倍!>,我们对比了不同浏览器下FineUIPro一个页 ...

  2. 【原创】抓个Firefox的小辫子，围观群众有：Chrome、Edge、IE8-11

    前言 很多人都知道我们在做FineUI控件库,在这 9 年多的时间里,在和浏览器无数次的交往中,也发现了多个浏览器自身的BUG,并公开出来方便大家查阅: 分享IE7一个神奇的BUG(不是封闭标签的问题 ...

  3. Python+Selenium 环境配置之Firefox，IE，Chrome几种浏览器运行

    Selenium(Webdriver)支持Firefox,IE,Chrome等多个浏览器.很多人可能装环境时遇到很多问题,下面简单聊聊如何配置测试这几个浏览器以及相关通过简单的实例来测试. 1.Fir ...

  4. 用事实说话，成熟的ORM性能不是瓶颈，灵活性不是问题：EF5.0、PDF.NET5.0、Dapper原理分析与测试手记

    [本文篇幅较长,可以通过目录查看您感兴趣的内容,或者下载格式良好的PDF版本文件查看] 目录 一.ORM的"三国志"    2 1,PDF.NET诞生历程    2 2,Linq2 ...

  5. （转）用事实说话，成熟的ORM性能不是瓶颈，灵活性不是问题：EF5.0、PDF.NET5.0、Dapper原理分析与测试手记

    原文地址:http://www.cnblogs.com/bluedoctor/p/3378683.html [本文篇幅较长,可以通过目录查看您感兴趣的内容,或者下载格式良好的PDF版本文件查看] 目录 ...

  6. 【原创·总结】影响sql查询性能的因素

     1.表定义 (1)如果字符串字段是经常需要用到的,可以冗余,否则不要冗余 (2)经常需要作为where的查询条件的字段,可以建索引:但是过多的索引会影响写入时的性能 (3)合理定义字段的数据类型 ( ...

  7. 【原创】一文掌握 Linux 性能分析之 I/O 篇

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 一文掌握 Li ...

  8. 【原创】Hadoop机架感知对性能调优的理解

    Hadoop作为大数据处理的典型平台,在海量数据处理过程中,其主要限制因素是节点之间的数据传输速率.因为集群的带宽有限,而有限的带宽资源却承担着大量的刚性带宽需求,例如Shuffle阶段的数据传输不可 ...

  9. 【原创】python多线程测试接口性能

    除了使用性能测试工具进行性能测试,我们也可以直接用python多线程进行性能测试. 下面,使用这几个模块,对一个查询接口做性能测试: requests:发送http请求 json:返回的字符串转换成j ...

随机推荐

  1. TApplicationEvents的前世今生（待续）

    这是它的声明,它的数据成员全部都是Event,而没有真正意义上的数据(如此一来,几乎可以猜测,它本身什么都做不了): TCustomApplicationEvents = class(TCompone ...

  2. Ruby元编程：执行某个目录下的全部测试用例

    目前手里有个测试项目各个feature的测试用例都放在对应的子目录下,虽然有自动化测试框架的帮助执行起来很方便,但是偶尔也有需要在本地执行某个feature的全部测试用例集合.因为本人对shell脚本 ...

  3. reset.css(样式重置)

    CSS Reset,意为重置默认样式.HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset).举几个例子:1.淘宝(CSS ...

  4. Python基础(六) 函数

    .函数 函数是对动作的封装 2.1函数的基本结构 #函数的定义 def 函数名(): #函数提 pass #函数的执行 函数名() 2.2参数初识 #形参 def hanshu(aaa): #参数相当 ...

  5. Spring与IoC

    控制反转(IOC,Inversion of Control),是一个概念,是一种思想. 指将传统上由程序代码直接操控的对象调用权交给容器,通过容器来实现对象的装配和管理.控制反转就是对对象控制权的转移 ...

  6. java集合框架collection(3)Set、List和Map

    Set.List和Map是java collection中最常用的三种数据结构. Set是集合,不允许有重复的元素,List是动态数组实现的列表,有序可重复,Map是key-value的键值对,用于快 ...

  7. Linux实战型企业运维工程师试题

    1.如何通过Linux配置一个局域网或者IDC机房上网网关,请给出步骤及命令?答:上网网关配置(1)开启内核转发:sed -i 's#net.ipv4.ip_forward = 0#net.ipv4. ...

  8. NSCache缓存怎么来的

    什么是NSCache NSCache主要用来存储临时数据(键值对),当内存资源不够时,系统会自动释放部分数据.它有三个特点: • NSCache为了保持不占用过多的系统内存,它有多种自动回收内存策略: ...

  9. 针对Linux 文件完整性监控的实现

    针对Linux 文件完整性监控的实现 摘要 计算机和互联网是20世纪以来最伟大的发明之一,随着计算机技术的不断发展,人们的生活方式发生了巨大的变化.计算机和互联网的发展给人们的生产生活带来了极大的便利 ...

  10. 【JVM】02垃圾回收机制

    垃圾回收 垃圾回收策略https://blog.csdn.net/u010425776/article/details/51189318 程序计数器.Java虚拟机栈.本地方法栈都是线程私有的,也就是 ...