利用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>