6.10 Performance API · JavaScript 標準參考教程

[TOC] Performance API用于精確度量、控制、增強瀏覽器的性能表現。這個API為測量網站性能，提供以前沒有辦法做到的精度。比如，為了得到腳本運行的準確耗時，需要一個高精度時間戳。傳統的做法是使用Date對象的getTime方法。 ~~~ var start = new Date().getTime(); // do something here var now = new Date().getTime(); var latency = now - start; console.log("任務運行時間：" + latency); ~~~ 上面這種做法有兩個不足之處。首先，getTime方法（以及Date對象的其他方法）都只能精確到毫秒級別（一秒的千分之一），想要得到更小的時間差別就無能為力了；其次，這種寫法只能獲取代碼運行過程中的時間進度，無法知道一些后臺事件的時間進度，比如瀏覽器用了多少時間從服務器加載網頁。為了解決這兩個不足之處，ECMAScript 5引入“高精度時間戳”這個API，部署在performance對象上。它的精度可以達到1毫秒的千分之一（1秒的百萬分之一），這對于衡量的程序的細微差別，提高程序運行速度很有好處，而且還可以獲取后臺事件的時間進度。目前，所有主要瀏覽器都已經支持performance對象，包括Chrome 20+、Firefox 15+、IE 10+、Opera 15+。 ## performance.timing對象 performance對象的timing屬性指向一個對象，它包含了各種與瀏覽器性能有關的時間數據，提供瀏覽器處理網頁各個階段的耗時。比如，performance.timing.navigationStart就是瀏覽器處理當前網頁的啟動時間。 ~~~ Date.now() - performance.timing.navigationStart // 13260687 ~~~ 上面代碼表示距離瀏覽器開始處理當前網頁，已經過了13260687毫秒。下面是另一個例子。 ~~~ var t = performance.timing; var pageloadtime = t.loadEventStart - t.navigationStart; var dns = t.domainLookupEnd - t.domainLookupStart; var tcp = t.connectEnd - t.connectStart; var ttfb = t.responseStart - t.navigationStart; ~~~ 上面代碼依次得到頁面加載的耗時、域名解析的耗時、TCP連接的耗時、讀取頁面第一個字節之前的耗時。 performance.timing對象包含以下屬性（全部為只讀）： * navigationStart：當前瀏覽器窗口的前一個網頁關閉，發生unload事件時的Unix毫秒時間戳。如果沒有前一個網頁，則等于fetchStart屬性。 * unloadEventStart：如果前一個網頁與當前網頁屬于同一個域名，則返回前一個網頁的unload事件發生時的Unix毫秒時間戳。如果沒有前一個網頁，或者之前的網頁跳轉不是在同一個域名內，則返回值為0。 * unloadEventEnd：如果前一個網頁與當前網頁屬于同一個域名，則返回前一個網頁unload事件的回調函數結束時的Unix毫秒時間戳。如果沒有前一個網頁，或者之前的網頁跳轉不是在同一個域名內，則返回值為0。 * redirectStart：返回第一個HTTP跳轉開始時的Unix毫秒時間戳。如果沒有跳轉，或者不是同一個域名內部的跳轉，則返回值為0。 * redirectEnd：返回最后一個HTTP跳轉結束時（即跳轉回應的最后一個字節接受完成時）的Unix毫秒時間戳。如果沒有跳轉，或者不是同一個域名內部的跳轉，則返回值為0。 * fetchStart：返回瀏覽器準備使用HTTP請求讀取文檔時的Unix毫秒時間戳。該事件在網頁查詢本地緩存之前發生。 * domainLookupStart：返回域名查詢開始時的Unix毫秒時間戳。如果使用持久連接，或者信息是從本地緩存獲取的，則返回值等同于fetchStart屬性的值。 * domainLookupEnd：返回域名查詢結束時的Unix毫秒時間戳。如果使用持久連接，或者信息是從本地緩存獲取的，則返回值等同于fetchStart屬性的值。 * connectStart：返回HTTP請求開始向服務器發送時的Unix毫秒時間戳。如果使用持久連接（persistent connection），則返回值等同于fetchStart屬性的值。 * connectEnd：返回瀏覽器與服務器之間的連接建立時的Unix毫秒時間戳。如果建立的是持久連接，則返回值等同于fetchStart屬性的值。連接建立指的是所有握手和認證過程全部結束。 * secureConnectionStart：返回瀏覽器與服務器開始安全鏈接的握手時的Unix毫秒時間戳。如果當前網頁不要求安全連接，則返回0。 * requestStart：返回瀏覽器向服務器發出HTTP請求時（或開始讀取本地緩存時）的Unix毫秒時間戳。 * responseStart：返回瀏覽器從服務器收到（或從本地緩存讀取）第一個字節時的Unix毫秒時間戳。 * responseEnd：返回瀏覽器從服務器收到（或從本地緩存讀取）最后一個字節時（如果在此之前HTTP連接已經關閉，則返回關閉時）的Unix毫秒時間戳。 * domLoading：返回當前網頁DOM結構開始解析時（即Document.readyState屬性變為“loading”、相應的readystatechange事件觸發時）的Unix毫秒時間戳。 * domInteractive：返回當前網頁DOM結構結束解析、開始加載內嵌資源時（即Document.readyState屬性變為“interactive”、相應的readystatechange事件觸發時）的Unix毫秒時間戳。 * domContentLoadedEventStart：返回當前網頁DOMContentLoaded事件發生時（即DOM結構解析完畢、所有腳本開始運行時）的Unix毫秒時間戳。 * domContentLoadedEventEnd：返回當前網頁所有需要執行的腳本執行完成時的Unix毫秒時間戳。 * domComplete：返回當前網頁DOM結構生成時（即Document.readyState屬性變為“complete”，以及相應的readystatechange事件發生時）的Unix毫秒時間戳。 * loadEventStart：返回當前網頁load事件的回調函數開始時的Unix毫秒時間戳。如果該事件還沒有發生，返回0。 * loadEventEnd：返回當前網頁load事件的回調函數運行結束時的Unix毫秒時間戳。如果該事件還沒有發生，返回0。根據上面這些屬性，可以計算出網頁加載各個階段的耗時。比如，網頁加載整個過程的耗時的計算方法如下： ~~~ var t = performance.timing; var pageLoadTime = t.loadEventEnd - t.navigationStart; ~~~ ## performance.now() performance.now方法返回當前網頁自從performance.timing.navigationStart到當前時間之間的微秒數（毫秒的千分之一）。也就是說，它的精度可以達到100萬分之一秒。 ~~~ performance.now() // 23493457.476999998 Date.now() - (performance.timing.navigationStart + performance.now()) // -0.64306640625 ~~~ 上面代碼表示，performance.timing.navigationStart加上performance.now()，近似等于Date.now()，也就是說，Date.now()可以替代performance.now()。但是，前者返回的是毫秒，后者返回的是微秒，所以后者的精度比前者高1000倍。通過兩次調用performance.now方法，可以得到間隔的準確時間，用來衡量某種操作的耗時。 ~~~ var start = performance.now(); doTasks(); var end = performance.now(); console.log('耗時：' + (end - start) + '微秒。'); ~~~ ## performance.mark() mark方法用于為相應的視點做標記。 ~~~ window.performance.mark('mark_fully_loaded'); ~~~ clearMarks方法用于清除標記，如果不加參數，就表示清除所有標記。 ~~~ window.peformance.clearMarks('mark_fully_loaded'); window.performance.clearMarks(); ~~~ ## performance.getEntries() 瀏覽器獲取網頁時，會對網頁中每一個對象（腳本文件、樣式表、圖片文件等等）發出一個HTTP請求。performance.getEntries方法以數組形式，返回這些請求的時間統計信息，有多少個請求，返回數組就會有多少個成員。由于該方法與瀏覽器處理網頁的過程相關，所以只能在瀏覽器中使用。 ~~~ window.performance.getEntries()[0] // PerformanceResourceTiming { // responseEnd: 4121.6200000017125, // responseStart: 4120.0690000005125, // requestStart: 3315.355000002455, // ... // } ~~~ 上面代碼返回第一個HTTP請求（即網頁的HTML源碼）的時間統計信息。該信息以一個高精度時間戳的對象形式返回，每個屬性的單位是微秒（microsecond），即百萬分之一秒。 ## performance.navigation對象除了時間信息，performance還可以提供一些用戶行為信息，主要都存放在performance.navigation對象上面。它有兩個屬性：（1）performance.navigation.type 該屬性返回一個整數值，表示網頁的加載來源，可能有以下4種情況： * 0：網頁通過點擊鏈接、地址欄輸入、表單提交、腳本操作等方式加載，相當于常數performance.navigation.TYPE_NAVIGATENEXT。 * 1：網頁通過“重新加載”按鈕或者location.reload()方法加載，相當于常數performance.navigation.TYPE_RELOAD。 * 2：網頁通過“前進”或“后退”按鈕加載，相當于常數performance.navigation.TYPE_BACK_FORWARD。 * 255：任何其他來源的加載，相當于常數performance.navigation.TYPE_UNDEFINED。（2）performance.navigation.redirectCount 該屬性表示當前網頁經過了多少次重定向跳轉。 ## 參考鏈接 * Mozilla Developer Network,?[Navigation Timing](https://developer.mozilla.org/en-US/docs/Navigation_timing) * W3C,?[Navigation Timing](http://www.w3.org/TR/navigation-timing/) * W3C,?[HTML5, A vocabulary and associated APIs for HTML and XHTML](http://www.w3.org/TR/html5/browsers.html) * Matt West,?[Timing JavaScript Code with High Resolution Timestamps](http://blog.teamtreehouse.com/timing-javascript-code-high-resolution-timestamps)