前言

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

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. UILabel实现自适应宽高需要注意的地方（三）

        一.需求图如下所示    UILabel 的高度自适应 UILabel中的段落间距可设置   图片效果如下:   调整段落适应长宽高方式:         需求:   保证"游戏玩法 ...

  2. c++类运算符重载遇到的函数形参问题

    class A { public: A(int arg1, int arg2); ~A(); A &operator = ( A &other); A operator + ( A & ...

  3. 自定义实现一个loghub(或kafka)的动态分片消费者负载均衡？

    一般地,像kafka之类的消息中间件,作为一个可以保持历史消息的组件,其消费模型一般是主动拉取方式.这是为了给消费者足够的自由,回滚或者前进. 然而,也正是由于将消费消息的权力交给了消费者,所以,消费 ...

  4. Confluence安装、汉化及jira整合

    今天上午装了一下Confluence,刚开始装的时候成功了,成功后进入数据库配置阶段,本人想把jira和confluence整合一起用,刚开始提示数据库连接问题,后来一直问题提示Connection ...

  5. Hadoop —— 集群环境搭建

    一.集群规划 这里搭建一个3节点的Hadoop集群,其中三台主机均部署DataNode和NodeManager服务,但只有hadoop001上部署NameNode和ResourceManager服务. ...

  6. HTML行内元素、块级元素、行内块级元素的特点与区别

    元素 HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码. 元素分类方式 HTML 可以将元素分类方式分为行内元素.块状元素和行内块状元素三种,这三者可以通过设 ...

  7. java8 异步api、循环、日期

    java8 异步api.循环.日期 转载请注明出处:https://www.cnblogs.com/funnyzpc/p/10801470.html 异步api 对于多任务耗时的业务场景,一般我们会用 ...

  8. 解决IE8placeholder属性问题

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. RabbitMq-安装篇

    嘿,大家好,今天更新的内容是rabbitMq的安装篇~~ windows下安装rabbitMq rabbitMq下载地址:点我下载 1.由于rabbitMq用erlang语言开发,所以安装rabbit ...

  10. ES6_09_Generator函数

    Generator函数: 概念: 1.ES6提供的解决异步编程的方案之一 2.Generator函数是一个状态机,内部封装了不同状态的数据, 3.用来生成遍历器对象 4.可暂停函数(惰性求值), yi ...