JavaScript Performance API

目錄

Performance API用于精確度量、控制、增強(qiáng)瀏覽器的性能表現(xiàn)。這個API為測量網(wǎng)站性能，提供以前沒有辦法做到的精度。

比如，為了得到腳本運(yùn)行的準(zhǔn)確耗時，需要一個高精度時間戳。傳統(tǒng)的做法是使用Date對象的getTime方法。

var start = new Date().getTime();

// do something here

var now = new Date().getTime();
var latency = now - start;
console.log("任務(wù)運(yùn)行時間：" + latency);

上面這種做法有兩個不足之處。首先，getTime方法（以及Date對象的其他方法）都只能精確到毫秒級別（一秒的千分之一），想要得到更小的時間差別就無能為力了；其次，這種寫法只能獲取代碼運(yùn)行過程中的時間進(jìn)度，無法知道一些后臺事件的時間進(jìn)度，比如瀏覽器用了多少時間從服務(wù)器加載網(wǎng)頁。

為了解決這兩個不足之處，ECMAScript 5引入“高精度時間戳”這個API，部署在performance對象上。它的精度可以達(dá)到1毫秒的千分之一（1秒的百萬分之一），這對于衡量的程序的細(xì)微差別，提高程序運(yùn)行速度很有好處，而且還可以獲取后臺事件的時間進(jìn)度。

目前，所有主要瀏覽器都已經(jīng)支持performance對象，包括Chrome 20+、Firefox 15+、IE 10+、Opera 15+。

performance對象的timing屬性指向一個對象，它包含了各種與瀏覽器性能有關(guān)的時間數(shù)據(jù)，提供瀏覽器處理網(wǎng)頁各個階段的耗時。比如，performance.timing.navigationStart就是瀏覽器處理當(dāng)前網(wǎng)頁的啟動時間。

Date.now() - performance.timing.navigationStart
// 13260687

上面代碼表示距離瀏覽器開始處理當(dāng)前網(wǎng)頁，已經(jīng)過了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連接的耗時、讀取頁面第一個字節(jié)之前的耗時。

performance.timing對象包含以下屬性（全部為只讀）：

• navigationStart：當(dāng)前瀏覽器窗口的前一個網(wǎng)頁關(guān)閉，發(fā)生unload事件時的Unix毫秒時間戳。如果沒有前一個網(wǎng)頁，則等于fetchStart屬性。

• unloadEventStart：如果前一個網(wǎng)頁與當(dāng)前網(wǎng)頁屬于同一個域名，則返回前一個網(wǎng)頁的unload事件發(fā)生時的Unix毫秒時間戳。如果沒有前一個網(wǎng)頁，或者之前的網(wǎng)頁跳轉(zhuǎn)不是在同一個域名內(nèi)，則返回值為0。

• unloadEventEnd：如果前一個網(wǎng)頁與當(dāng)前網(wǎng)頁屬于同一個域名，則返回前一個網(wǎng)頁unload事件的回調(diào)函數(shù)結(jié)束時的Unix毫秒時間戳。如果沒有前一個網(wǎng)頁，或者之前的網(wǎng)頁跳轉(zhuǎn)不是在同一個域名內(nèi)，則返回值為0。

• redirectStart：返回第一個HTTP跳轉(zhuǎn)開始時的Unix毫秒時間戳。如果沒有跳轉(zhuǎn)，或者不是同一個域名內(nèi)部的跳轉(zhuǎn)，則返回值為0。

• redirectEnd：返回最后一個HTTP跳轉(zhuǎn)結(jié)束時（即跳轉(zhuǎn)回應(yīng)的最后一個字節(jié)接受完成時）的Unix毫秒時間戳。如果沒有跳轉(zhuǎn)，或者不是同一個域名內(nèi)部的跳轉(zhuǎn)，則返回值為0。

• fetchStart：返回瀏覽器準(zhǔn)備使用HTTP請求讀取文檔時的Unix毫秒時間戳。該事件在網(wǎng)頁查詢本地緩存之前發(fā)生。

• domainLookupStart：返回域名查詢開始時的Unix毫秒時間戳。如果使用持久連接，或者信息是從本地緩存獲取的，則返回值等同于fetchStart屬性的值。

• domainLookupEnd：返回域名查詢結(jié)束時的Unix毫秒時間戳。如果使用持久連接，或者信息是從本地緩存獲取的，則返回值等同于fetchStart屬性的值。

• connectStart：返回HTTP請求開始向服務(wù)器發(fā)送時的Unix毫秒時間戳。如果使用持久連接（persistent connection），則返回值等同于fetchStart屬性的值。

• connectEnd：返回瀏覽器與服務(wù)器之間的連接建立時的Unix毫秒時間戳。如果建立的是持久連接，則返回值等同于fetchStart屬性的值。連接建立指的是所有握手和認(rèn)證過程全部結(jié)束。

• secureConnectionStart：返回瀏覽器與服務(wù)器開始安全鏈接的握手時的Unix毫秒時間戳。如果當(dāng)前網(wǎng)頁不要求安全連接，則返回0。

• requestStart：返回瀏覽器向服務(wù)器發(fā)出HTTP請求時（或開始讀取本地緩存時）的Unix毫秒時間戳。

• responseStart：返回瀏覽器從服務(wù)器收到（或從本地緩存讀?。┑谝粋€字節(jié)時的Unix毫秒時間戳。

• responseEnd：返回瀏覽器從服務(wù)器收到（或從本地緩存讀?。┳詈笠粋€字節(jié)時（如果在此之前HTTP連接已經(jīng)關(guān)閉，則返回關(guān)閉時）的Unix毫秒時間戳。

• domLoading：返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)開始解析時（即Document.readyState屬性變?yōu)椤發(fā)oading”、相應(yīng)的readystatechange事件觸發(fā)時）的Unix毫秒時間戳。

• domInteractive：返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)結(jié)束解析、開始加載內(nèi)嵌資源時（即Document.readyState屬性變?yōu)椤癷nteractive”、相應(yīng)的readystatechange事件觸發(fā)時）的Unix毫秒時間戳。

• domContentLoadedEventStart：返回當(dāng)前網(wǎng)頁DOMContentLoaded事件發(fā)生時（即DOM結(jié)構(gòu)解析完畢、所有腳本開始運(yùn)行時）的Unix毫秒時間戳。

• domContentLoadedEventEnd：返回當(dāng)前網(wǎng)頁所有需要執(zhí)行的腳本執(zhí)行完成時的Unix毫秒時間戳。

• domComplete：返回當(dāng)前網(wǎng)頁DOM結(jié)構(gòu)生成時（即Document.readyState屬性變?yōu)椤癱omplete”，以及相應(yīng)的readystatechange事件發(fā)生時）的Unix毫秒時間戳。

• loadEventStart：返回當(dāng)前網(wǎng)頁load事件的回調(diào)函數(shù)開始時的Unix毫秒時間戳。如果該事件還沒有發(fā)生，返回0。

• loadEventEnd：返回當(dāng)前網(wǎng)頁load事件的回調(diào)函數(shù)運(yùn)行結(jié)束時的Unix毫秒時間戳。如果該事件還沒有發(fā)生，返回0。

根據(jù)上面這些屬性，可以計(jì)算出網(wǎng)頁加載各個階段的耗時。比如，網(wǎng)頁加載整個過程的耗時的計(jì)算方法如下：

var t = performance.timing; 
var pageLoadTime = t.loadEventEnd - t.navigationStart;

performance.now方法返回當(dāng)前網(wǎng)頁自從performance.timing.navigationStart到當(dāng)前時間之間的微秒數(shù)（毫秒的千分之一）。也就是說，它的精度可以達(dá)到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倍。

通過兩次調(diào)用performance.now方法，可以得到間隔的準(zhǔn)確時間，用來衡量某種操作的耗時。

var start = performance.now();
doTasks();
var end = performance.now();

console.log('耗時：' + (end - start) + '微秒。');

mark方法用于為相應(yīng)的視點(diǎn)做標(biāo)記。

window.performance.mark('mark_fully_loaded');

clearMarks方法用于清除標(biāo)記，如果不加參數(shù)，就表示清除所有標(biāo)記。

window.peformance.clearMarks('mark_fully_loaded');

window.performance.clearMarks();

瀏覽器獲取網(wǎng)頁時，會對網(wǎng)頁中每一個對象（腳本文件、樣式表、圖片文件等等）發(fā)出一個HTTP請求。performance.getEntries方法以數(shù)組形式，返回這些請求的時間統(tǒng)計(jì)信息，有多少個請求，返回?cái)?shù)組就會有多少個成員。

由于該方法與瀏覽器處理網(wǎng)頁的過程相關(guān)，所以只能在瀏覽器中使用。

window.performance.getEntries()[0]

// PerformanceResourceTiming { 
//   responseEnd: 4121.6200000017125, 
//   responseStart: 4120.0690000005125, 
//   requestStart: 3315.355000002455, 
//   ...
// }

上面代碼返回第一個HTTP請求（即網(wǎng)頁的HTML源碼）的時間統(tǒng)計(jì)信息。該信息以一個高精度時間戳的對象形式返回，每個屬性的單位是微秒（microsecond），即百萬分之一秒。

除了時間信息，performance還可以提供一些用戶行為信息，主要都存放在performance.navigation對象上面。

它有兩個屬性：

（1）performance.navigation.type

該屬性返回一個整數(shù)值，表示網(wǎng)頁的加載來源，可能有以下4種情況：

• 0：網(wǎng)頁通過點(diǎn)擊鏈接、地址欄輸入、表單提交、腳本操作等方式加載，相當(dāng)于常數(shù)performance.navigation.TYPE_NAVIGATENEXT。

• 1：網(wǎng)頁通過“重新加載”按鈕或者location.reload()方法加載，相當(dāng)于常數(shù)performance.navigation.TYPE_RELOAD。

• 2：網(wǎng)頁通過“前進(jìn)”或“后退”按鈕加載，相當(dāng)于常數(shù)performance.navigation.TYPE_BACK_FORWARD。

• 255：任何其他來源的加載，相當(dāng)于常數(shù)performance.navigation.TYPE_UNDEFINED。

（2）performance.navigation.redirectCount

該屬性表示當(dāng)前網(wǎng)頁經(jīng)過了多少次重定向跳轉(zhuǎn)。

• Mozilla Developer Network, Navigation Timing
• W3C, Navigation Timing
• W3C, HTML5, A vocabulary and associated APIs for HTML and XHTML
• Matt West, Timing JavaScript Code with High Resolution Timestamps