前言

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

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. NPOI 超简单的导出导入

      首先说说,第一次遇到过匿名导出的那个时候是在我在北京第一家公司,简单的声明一个对象就可以导出,那时候感觉高大上,自己也想研究研究,但是因为头将代码后来加密了根本看不到.好吧,研究了研究放弃了,后来 ...

  2. OpenCv的python环境搭建

    1.python的安装参看 http://www.cnblogs.com/samo/p/6734403.html 2.OpenCv安装.opencv2.4.10可以支持vc10/vc11/vc12,o ...

  3. vue2.0父子组件以及非父子组件通信传参详解

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...

  4. CTF练习资源大全集

    练习CTF清单/永久CTF清单 以下列出了一些长期运行的CTF实践站点和工具或CTF.谢谢,RSnake用于启动这是基于的原始版本.如果您有任何更正或建议,请随时通过dot com tld在域psif ...

  5. 系统学习 Java IO (十六)----这么多类，应该用哪个?

    目录:系统学习 Java IO---- 目录,概览 Java IO目的和功能 Java IO 包含 InputStream,OutputStream,Reader 和 Writer 类的许多子类. 原 ...

  6. 简易数据分析 04 | Web Scraper 初尝--抓取豆瓣高分电影

    这是简易数据分析系列的第 4 篇文章. 今天我们开始数据抓取的第一课,完成我们的第一个爬虫.因为是刚刚开始,操作我会讲的非常详细,可能会有些啰嗦,希望各位不要嫌弃啊:) 有人之前可能学过一些爬虫知识, ...

  7. Java学习笔记——String类型转换

    一滴水里观沧海,一粒沙中看世界 ——一带一路欢迎宴致辞 上代码: package cn.stringtoobj; public class TypeConversion { public static ...

  8. TCP/IP 第一章

    1,tcp/ip协议族作用:连接互联网中的计算机,并使其通信.可以想象互联网的计算机有不同的操作系统,如linux.unix.bsd.srv.windows.mac等.这么多操作系统对tcp/ip的实 ...

  9. 利用切片操作，实现一个trim()函数，去除字符串首尾的空格，注意不要调用str的strip()方法

    1.利用切片操作,实现一个trim()函数,去除字符串首尾的空格,注意不要调用str的strip()方法 首先判断字符串的长度是否为0,如果是,直接返回字符串 第二,循环判断字符串的首部是否有空格,如 ...

  10. 多线程与高并发(四)volatile关键字

    上一篇学习了synchronized的关键字,synchronized是阻塞式同步,在线程竞争激烈的情况下会升级为重量级锁,而volatile是一个轻量级的同步机制. 前面学习了Java的内存模型,知 ...