JavaScript Performance API

目錄

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

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

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

// do something here

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

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

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

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

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

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

上面代碼表示距離瀏覽器開始處理當(dāng)前網(wǎng)頁(yè)，已經(jīng)過(guò)了13260687毫秒。

下面是另一個(gè)例子。

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;

上面代碼依次得到頁(yè)面加載的耗時(shí)、域名解析的耗時(shí)、TCP連接的耗時(shí)、讀取頁(yè)面第一個(gè)字節(jié)之前的耗時(shí)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

performance.now方法返回當(dāng)前網(wǎng)頁(yè)自從performance.timing.navigationStart到當(dāng)前時(shí)間之間的微秒數(shù)（毫秒的千分之一）。也就是說(shuō)，它的精度可以達(dá)到100萬(wàn)分之一秒。

performance.now() 
// 23493457.476999998

Date.now() - (performance.timing.navigationStart + performance.now())
// -0.64306640625

上面代碼表示，performance.timing.navigationStart加上performance.now()，近似等于Date.now()，也就是說(shuō)，Date.now()可以替代performance.now()。但是，前者返回的是毫秒，后者返回的是微秒，所以后者的精度比前者高1000倍。

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

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

console.log('耗時(shí)：' + (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)頁(yè)時(shí)，會(huì)對(duì)網(wǎng)頁(yè)中每一個(gè)對(duì)象（腳本文件、樣式表、圖片文件等等）發(fā)出一個(gè)HTTP請(qǐng)求。performance.getEntries方法以數(shù)組形式，返回這些請(qǐng)求的時(shí)間統(tǒng)計(jì)信息，有多少個(gè)請(qǐng)求，返回?cái)?shù)組就會(huì)有多少個(gè)成員。

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

window.performance.getEntries()[0]

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

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

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

它有兩個(gè)屬性：

（1）performance.navigation.type

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

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

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

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

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

（2）performance.navigation.redirectCount

該屬性表示當(dāng)前網(wǎng)頁(yè)經(jīng)過(guò)了多少次重定向跳轉(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