如今测试指标和网站样本都选好了，可以开端运行测试了。
CTO练习营 | 12月3-5日，深圳，是时刻成为优良的技巧治理者了
比较浏览器机能的通用办法
比来我在Macbook Pro(13版Macbook Pro 2017,3.1 ghz i5,16GB内存，OSX 10.13)长进行了以上的测试，经由过程与WiFi(802.11 ac,867Mbit / s)上的Webpass 100Mbps进行连接。以上的脚本在个一一个浏览器中加载了一个网站，并经由过程将返回的window.performance.timing作为csv文件，来保存机能加载时光。要解释的是，每个网站在每个浏览器中都被加载了10次。裹足本中，对页面的加载超时设置为60秒。如不雅网站上有告白，则页面加载速度极慢。在我的测试中，如不雅脚本在60秒后还未被加载，则页面的加载过程就会被中断。该脚本会应用PerformanceTimingAPI来检查loadEventEnd是否已经存在。PerformanceTiming 接口包含了当前页面中与时光相干的信息。可以经由过程只读属性Performance.timing 获得实现该接口的一个对象。浏览器新供给的performance接口精确的告诉我们当拜访一个网站页面时当前网页每个处理阶段的精确时光(timestamp)，以便利我进行前端分析。
在比较不合浏览器的机能时，最重要的一条就是选择一些机能指标。平日，这些指标都来自标准化的Web API。关于机能比较， 可以应用Navigation Timing（导航计时），它是一个可以在web中精确测量机能的javascript API。这个API供给了一个简单的办法来获得页面导航、加载事宜的精确而又具体的时光状况。须要留意的是，Navigation Timing的目标是用于分析页面整体机能指标。如不雅要获取个别资本（例如JS、图片）的机能指标，请应用Resource Timing API。
起首，让我们比较一下浏览器的平均页面加载时光。为了让结不雅更可托，我对每个浏览器进行了2000次测试，具体是如许的，每个浏览器会打开200个消息网站，每个网站又加载10个页面，然后把2000次的总运行时光一平均，就是平均页面加载时光。每个浏览器的平均加载时光都邑被绘制成橙色的点，如下图所示。
本文会把评论辩论重点放在基于Navigation Timing API的机能比较上。
选择测试指标并对测试进行设计
除了明白定义测试指标之外，还须要选择有意义的测试内容。基于技巧方面的准则和比较，我选择了一组具有技巧难度都比较高的网站。在我的测试中，我比较存眷的是用户的感触感染，是以找的样本还必须是用户在日常平凡生活中常用的网站。在我的研究中，我存眷的是全球排名前200的消息网站（以Alexa网站的排名作为参考），因为这些网站往往存眷度较高。这些网站会在正常浏览模式和隐身浏览模式下分别在Chrome v61.0.3163.100和Firefox Quantum Beta v57.0b10两个浏览器中进行加载，个中Firefox Quantum启用了Tracking Protection功能，该功能可以或许主动拦截网页内的告白、追踪不良插件等等。为了让比较更具可托性，每个网站在每个浏览器上都对被加载了10次。
用Selenium WebDriver对象控制测试过程
因为进行测试和收集数据的过程很复杂，如不雅用人工进行比较，则很轻易掉足。是以，如不雅前提许可，我建议采取主动化测试。更重要的是，这个测试对象还得在不合的浏览器的运行情况下都有效。是以，既可以应用像Mozilla的Hasal项目如许的外部脚本应用法度榜样，也可以应用像Selenium WebDriver如许的浏览器主动化框架。Selenium 和 WebDriver 本来是两个自力的对象，后来归并成了一个对象——Selenium WebDriver，如今它是一个用来进行复杂反复的web主动化测试的对象。
我的页面加载测试是基于Python脚本，该脚本应用了Selenium Python bindings，分别经由过程geckodriver和chromedriver来控制浏览器。这个脚本类似于在Chrome和Firefox中加载一组网疆场且在每次加载之后存储window.performance.timing，这意味着每次加载后的时光都可以在个中找到。不过它的机能今朝还不是很完美，还有进一步地改良空间。
它是浏览器的直接实现，比之前在网页顶用js设置Date.time或者cookie来分析网页时光上要精确很多。
测试结不雅分析
如不雅愿意，你可以点此链接来查看竽暌剐关这个测试的所有原始数据。
Chrome的隐身浏览模式比Firefox Quantum隐私浏览模式的加载时光慢了2.4倍。趁便说一下，Chrome的隐身浏览模式和正常浏览模式的加载时光是一样的，而Firefox Quantum的┞俘常浏览模式和它的隐私浏览模式之间的差别（类似于Chrome的隐身模式+跟踪保护）就是Tracking Protection。
固然在加载页面时，loadEventEnd不会对用户的体验效不雅有什么本质性监测，但我比来发明，loadEventEnd和平均会话加载时光都邑对用户彪炳率（Bounce Rate）进行提前断定。Bounce Rate是网站分析一一个度量，彪炳率定义了只浏览了单个页面的拜访量占总拜访量的比率。Avinash Kaushik定义了一个基于网站逗留时光、类似于彪炳率的指标，即拜访的逗留时光小于10秒或5秒的拜访量所占的比例。Bounce：指成功进入网站(如不雅不克不及成功打开辟站就封闭，则称为一个Loss)后，不点击页面上的任何链接，就封闭它，那么对该网站而言就是一个Bounce（彪炳）。根据SOASTA Inc .第三方研究结不雅来看，我发明平均会话加载时光为6秒会导致彪炳率为70％。让我们来看看我的测试数据中加载时光跨越6秒的页面的比例，并在不合的浏览器之间进行比较。如下所示，带有Tracking Protection的Firefox Quantum只有5.5％的页面加载时光跨越6秒，而在Chrome的所有加载页面中，这一比例约为31%。
推荐阅读
CTO练习营 | 12月3-5日，深圳，是时刻成为优良的技巧治理者了 0×00 媒介义务：预备对象：python安装包、pip、http请求库：requests库、正则库：re库。阁下名是相对于网站的主域名的。>>>详细阅读
本文标题：如何比较不同浏览器的页面加载时间
地址：http://www.17bianji.com/lsqh/39469.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示