比较浏览器性能的一般方法在比较不同浏览器的性能时，最重要的事情之一就是选择一些性能指标。通常，这些指标来自标准化的WebAPI。对于性能比较，您可以使用NavigationTiming，它是一种可以准确衡量网络性能的javascriptAPI。该API提供了一种简单的方法来获取页面导航和加载事件的精确和详细的时间状态。需要注意的是，NavigationTiming的目的是分析页面的整体性能指标。如果你想获取单个资源（如JS、图片）的性能指标，请使用ResourceTimingAPI。本文将重点介绍基于NavigationTimingAPI的性能对比。选择测试指标和设计测试除了明确定义测试指标外，还需要选择有意义的测试内容。根据技术标准和比较，我选择了一组技术难度较高的站点。在我的测试中，我更注重用户的感受，所以我找的样本也一定是用户在日常生活中经常使用的网站。在我的研究中，我专注于世界前200个新闻网站（使用网站的Alexa排名作为参考），因为这些网站往往具有更多的关注度。这些网站将在Chromev61.0.3163.100和FirefoxQuantumBetav57.0b10两种浏览器中分别以正常浏览模式和隐身浏览模式加载，其中FirefoxQuantum启用了跟踪保护功能，可以自动屏蔽网页广告，不良跟踪插件等。为了使比较更具可信度，每个站点在每个浏览器上加载了10次。现在已经选择了测试指标和网站样本，是时候运行测试了。用SeleniumWebDriver工具控制测试过程因为测试和收集数据的过程非常复杂，如果手动对比，很容易出错。因此，我建议尽可能进行自动化测试。更重要的是，这个测试工具必须在不同的浏览器运行环境下都有效。因此，可以使用外部脚本应用程序（如Mozilla的Hasal项目）或浏览器自动化框架（如SeleniumWebDriver）。Selenium和WebDriver原本是两个独立的工具，后来合并为一个工具——SeleniumWebDriver，现在是一个用于复杂重复的Web自动化测试的工具。我的页面加载测试基于一个Python脚本，该脚本使用SeleniumPython绑定分别通过geckodriver和chromedriver控制浏览器。这个脚本类似于在Chrome和Firefox中加载一组网站并在每次加载后存储window.performance.timing，意味着可以在其中找到每次加载后的时间。但目前其性能还不够完美，还有进一步提升的空间。我最近在MacbookPro（13版MacbookPro2017、3.1ghzi5、16GBRAM、OSX10.13）上执行了上述测试，通过WiFi（802.11ac，867Mbit/s）通过Webpass100Mbps连接。上面的脚本在其中一个浏览器中加载一个网站，并通过将window.performance.timing作为csv文件返回来节省性能加载时间。为了说明，每个网站在每个浏览器中加载了10次。在脚本中，页面上的加载超时设置为60秒。如果网站上有广告，页面加载速度会非常慢。在我的测试中，如果脚本在60秒后仍未加载，页面加载过程就会中断。该脚本将使用PerformanceTimingAPI检查loadEventEnd是否已经存在。PerformanceTiming接口包含当前页面的时间相关信息。可以通过只读属性Performance.timing获取实现此接口的对象。浏览器提供的新的性能接口，准确的告诉我们访问一个网站页面时，当前网页各个处理阶段的精确时间（时间戳），方便我前端分析。是浏览器的直接实现，比起用js在网页中设置Date.time或者cookies来分析网页的时间要准确的多。loadEventEnd表示请求页面的加载事件完成的时间点，即页面的所有静态内容已经加载完毕。如果保存了loadEventEnd时间，那么它将存储在csv文件中，如果没有保存loadEventEnd时间，脚本将尝试重新加载相应的页面。在极少数情况下，当重新加载请求超时时，将手动加载页面，而无需任何自动超时设置。页面完全加载后手动请求window.performance.timing。测试结果分析如果您愿意，可以单击此链接查看有关此测试的所有原始数据。首先，让我们比较不同浏览器的平均页面加载时间。为了让结果更加可信，我在每个浏览器上进行了2000次测试。具体来说，每个浏览器会打开200个新闻网站，每个网站会加载10个页面，然后将总共2000次运行时间取平均值，就是平均页面加载时间。每个浏览器的平均加载时间绘制为橙色点，如下图所示。Chrome的隐私浏览模式加载速度比FirefoxQuantum的隐私浏览模式慢2.4倍。顺带一提，Chrome的隐私浏览模式加载时间与普通浏览模式相同，而FirefoxQuantum的普通浏览模式与其隐私浏览模式（类似Chrome的隐身模式+跟踪保护）的区别在于TrackingProtection。虽然loadEventEnd对用户加载页面的体验没有任何实质性的监控，但我最近发现loadEventEnd和平均会话加载时间都会提前判断用户的跳出率（BounceRate）。跳出率是网站分析中的一种衡量标准。跳出率定义了只浏览单个页面的访问量占总访问量的比率。AvinashKaushik定义了一个基于站点停留时间的指标，类似于跳出率，即停留时间小于10秒或5秒的访问比例。Bounce：进入网站成功后（如果不能成功打开网站又关闭，称为Loss），然后在没有点击页面任何链接的情况下关闭，则为该网站的Bounce（跳出）.根据SOASTAInc.的第3方研究结果，我发现平均6秒的会话加载时间会导致70%的跳出率。让我们看一下我的测试数据中加载时间超过6秒的页面比例，并跨浏览器进行比较。正如您在下面看到的，在带有跟踪保护的FirefoxQuantum中，只有5.5%的页面加载时间超过6秒，而在Chrome中加载的所有页面中，这一比例约为31%。***一个问题是数据是否也可用于了解页面加载期间浏览器之间的差异。再来看看Chrome的隐身模式和FirefoxQuantum的隐私浏览模式。performance.timing提供页面加载期间的事件。我可以在页面加载时按出现顺序打印这些事件，并以newsweek.com为例来查看浏览器之间的差异。显然，主要区别出现在加载过程的末尾。创建DOM在两种浏览器中运行得相当快，但Chrome等待内容的时间比Firefox长得多。这种差异首先出现在domComplete上，即解析器在主文档上完成运行的那一刻。这从另一个方面说明，在Firefox的隐私浏览模式下，TrackingProtection可以通过屏蔽跟踪器来阻止第三方内容的加载。总结通过本文的讲解，相信你也可以通过这种简单的方法来比较不同浏览器的页面加载速度。如果你想进行自己的比较测试，将你喜欢的浏览器相互比较，我的建议是：1.你加载更多的页面并选择不同类型的网站。由于测试需要，本文只加载了部分新闻站点。2.本文的测试是在电脑上进行的，如果您愿意，可以在移动设备上进行测试。请注意，如果您想在每次使用Firefox时都启用跟踪保护，请务必下载FirefoxQuantum。跟踪保护可能会阻止您在社交网站、评论工具（模因）和一些跨站点视频内容上单击“喜欢”按钮。在FirefoxQuantum中，打开***选项卡，选择“隐私和安全”并向下滚动以找到“跟踪保护”。或者，直接在输入字段中搜索“跟踪保护”以找到它。找到后选择“始终”，完全启用跟踪保护，让您无论何时使用FirefoxQuantum，都能享受到最佳的加载速度和隐私服务。
