利用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测量页面加载时间的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 让你的网站在移动端健步如飞
- 下一篇： 数据结构之排序算法：基数排序