前言

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

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. 数据备份服务商Rubrik获4000万美元B轮融资

    搜狐科技 文/丽丽卡 5月27日,数据备份服务商Rubrik获Greylock Partners领投的4000万美元B轮融资,Lightspeed Venture Partners及其现有投资者跟投, ...

  2. 学习Java，容易被你忽略的小细节（3）

    在<学习Java,容易被你忽略的小细节(2)>中我们已经深入讨论过String类中equals()方法的使用,在本文中我们将进一步讨论equals()方法在其他境况下的使用方法. 首先,我 ...

  3. PHP中关于时间、时区、本地时间、UTC时间、GMT时间、时间戳等知识的梳理

    在PHP开发中,我们经常会在时间问题上被搞糊涂,比如我们希望显示一个北京时间,但是当我们使用date函数进行输出时,却发现少了8个小时.几乎所有的php猿类都必须对php中几个重要的时间转换等方法进行 ...

  4. ListView背景色突变问题

    ListView中加入 android:cacheColorHint="#00000000" 的属性即可

  5. 短视频技术详解：Android端的短视频开发技术

    在 <如何快速实现移动端短视频功能?>中,我们主要介绍了当前短视频的大热趋势以及开发一个短视频应用所涉及到的功能和业务.在本篇文章中,我们主要谈一谈短视频在Android端上的具体实现技术 ...

  6. tomcat源码分析(一)- tomcat源码导入IDEA并正常启动

    项目导入 代码下载 打开GitHub网站:https://github.com/apache/tomcat 下载对应的zip包 解压对应的压缩包(当然你也可以用工具对其进行解压) unzip tomc ...

  7. POJ 2955：Brackets（区间DP）

    http://poj.org/problem?id=2955 题意:给出一串字符,求括号匹配的数最多是多少. 思路:区间DP. 对于每个枚举的区间边界,如果两边可以配对成括号,那么dp[i][j] = ...

  8. BZOJ 3295：[Cqoi2011]动态逆序对（三维偏序 CDQ分治+树状数组）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3295 题意:简单明了. 思路:终于好像有点明白CDQ分治处理三维偏序了.把删除操作看作是插入操作,那 ...

  9. kubeadm安装k8s

    软件版本: kubelet:V1.13.3 docker: 18.06.1 实验环境: Centos 7.5.1804 说明: 初学.安装步骤参考了阿良的文档,并做了部分修改. 步骤如下: 1.关闭防 ...

  10. Django随机生成验证码图片

    PIL简介 什么是PIL PIL:是Python Image Library的缩写,图像处理的模块.主要的类包括Image,ImageFont,ImageDraw,ImageFilter PIL的导入 ...