利用Navigation Timing测量页面加载时间

最近在看一本名为《web性能实践日志》的书籍，其中第十三章"网络计时"中介绍了一种比较新的计算页面各部分加载时间方法，这也是W3C Web性能工作小组正在做的事情，接下来我就给大家大概介绍一下：

首先先撇开这篇文章所要介绍的，如果要你来写一段代码来计算整个页面加载的时间的话，我们一般都会这样做：获得页面开始加载的时间和结束加载的时间，两个一减便是页面加载的时间了，没错，代码如下：

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4
 5 var start = new Date().getTime(); //获取开始加载时间
 6 function onLoad() {
 7     var now = new Date().getTime(); //获取加载结束时间
 8     var latency = now - start;  //页面加载时间
 9     alert("page loading time: " + latency);
10 }
11
12 </script>
13 </head>
14 <body onload="onLoad()">
15 <!- Main page body goes from here. -->
16 </body>
17 </html>

这是计算页面加载时间的简单脚本，但是如果我们想进一步深入了解资源的加载时间呢？比如我想知道dom内容加载完毕的时间，而非页面加载的时间呢，上述代码明显做不到了。

然而W3C提供了window.performance.timing方法让我们可以轻松获得页面各个部分的加载时间，具体代码页非常简单，如下：

 1 <html>
 2 <head>
 3 <script type="text/javascript">
 4
 5 function onLoad() {
 6      var now = new Date().getTime();
 7      var page_load_time = now - performance.timing.navigationStart; //performance.timing.navigationStart即为获取页面开始加载时间
 8      alert("User-perceived page loading time: " + page_load_time);
 9 }
10
11 </script>
12 </head>
13 <body onload="onLoad()">
14 <!- Main page body goes from here. -->
15 </body>
16 </html>

经过实践发现，通过上述方法获取的页面加载时间相比第一种获取的时间稍微多那么几毫秒，根据不同页面的大小可能数值会有出入，但是上述方式获取的时间肯定比我们一开始写的要更加精确，同样的，当我们想知道dom内容加载完毕的时间的话，代码改为：

1 <script>
2 function onLoad(){
3     var now=new Date().getTime();
4     var dom_load=performance.timing.domComplete -performance.timing.navigationStart;
5     alert('页面加载时间为：'+dom_load);
6 }
7 </script>

这样就OK了，我们甚至可以得到更多关于页面加载的详细信息，W3C官网提供了如下可供我们获取的页面信息图示：

这张图片所提供的功能就叫导航计时（Navigation Timing）,是HTML5提供的一组新API，已经在最新版的浏览器中实现了，但是不兼容低版本IE，如果大家对web前端性能比较感兴趣，可以访问W3C提供的官方文档对其进行探究：

http://www.w3.org/TR/navigation-timing/

转载于:https://www.cnblogs.com/luozhihao/p/4681564.html

利用Navigation Timing测量页面加载时间相关推荐

QTP统计页面加载时间
QTP是一款功能自动化测试工具,而页面加载时间或响应速度应该是性能测试的事情,其实QTP也可以实现对页面加载时间的统计功能.因为QTP使用的是VBS脚本,VBS脚本的强大之处在于它可以调用任何wind ...
Python+selenium自动化：页面加载慢、超时加载情况下内容已经加载完毕的快速执行脚本解决方案，页面加载时间过长优化方案
driver.set_page_load_timeout(3) 页面加载时间设置 3 秒,执行到某一步涉及页面加载如果加载时间超过 3 秒就会停止加载并抛出异常,其实这个时候页面内的元素已经加载出来了 ...
移动4G网络App页面加载时间过长
移动4G网络App页面加载时间过长发现问题 2016年12月份开始,使用android客户端的部分用户反映在使用移动4G网络的情况下,App内的页面加载时间过长,几乎加载不出来,导致无法正常使用Ap ...
页面加载时间过长的解决
有时候会遇到这样的问题: 页面加载时间很长,需要一个友好界面来load这段空白时间, 而页面未加载的时候,页面里面的表单元素都是不存在的, 那前台写的初始化的js肯定是用不了了, 怎么办? 到网上搜了 ...
android测量网页加载时间
如果被测浏览器用的是webkit内核,或者是自己写的程序,总之就是如果可以获取对应的webview对象:可以通过重写webviewclient来获取加载时间.webviewclient中的onPage ...
JavaScript获取页面加载时间和页面停留时间
JavaScript获取页面加载时间和页面停留时间 var duration = 0; //停留时间 var loadingTime = 0; //加载时间 var startTime = Math. ...
利用Medium的CDN来改善Feed的页面加载时间
前阵子 ,我决定,我想从我的中型出版的文章的很好的视觉房源出现在我的网站的底部. 方便地,我需要完成的大多数信息都存在于出版物的feed中. 对于许多中型出版物,可以按以下方式查找供稿: https: ...
Web前端优化最佳实践及工具集锦(如减少页面加载时间)
前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快.对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升.下图显示了页面加载速度对于用户体验的影响. 你的Web页 ...
chrome如何分析页面加载时间
以chrome为例,开发者模式中跟页面加载时间相关的是network面板. network 面板的 DOMContentLoaded和load 打开Network面板后,刷新页面,面板底部有这三个时间 ...

利用Navigation Timing测量页面加载时间

利用Navigation Timing测量页面加载时间相关推荐

最新文章

热门文章