使用者計時API可以在網頁應用程式中測量兩個預先定義標記之間的效能。開發者僅僅需要分別定義測量的開始和結束標記。可以透過JavaScript物件「」提供的函數,對計時位置進行標記。
var measuring_start = performance.now();
透過「」函數,可以在網頁應用程式的取得計時用。和該函數類似的是Date對象,它同樣可以取得當前時間戳記。二者的主要差異是時間精度,now函數的回傳值的w3c文檔中明確要求,必須能夠表示精確到千分位小數的毫秒值。另外now函數傳回的數值,是從瀏覽器的「瀏覽開始事件(navigationStart)」開始到現在的毫秒數。
performance.now() 35438640.775000006 (new Date()).getTime() 1443063066478
如果希望分析一個圖片的載入效能,可以在圖片的載入(load)事件中設定第二個標記。圖片載入的耗時,就是「measure_start」和「measure_end」兩個變數之間的差值(單位毫秒)。
test timing ![]()
訪問這個html之後,可以在控制台看見輸出:
image load time: 24.395ms
同時,可以和Chrome開發者工具中網絡標籤頁的載入時間做比較:
(點擊放大圖像)
除了使用now函數直接在取得時間戳之外,Performance介面還提供了函數。開發者可以在任何需要記錄時間的地方建立、清除標記。
performance.mark("start"); … performance.mark("end");
mark函數不會傳回任何值,但是後續可以透過標記的名稱來取得標記的資料。如果要計算標記之間的差值,可以透過「measure」函數來完成。此函數需要三個參數,第一個參數定義了該差值的名稱,第二個和第三個變數指定標記的名稱。同樣,該函數也不傳回任何值。
performance.measure("difference", "start", "end");
上面這個例子,計算了「start」和「end」兩個標記之間的差值,並將差值命名為「difference」。要特別注意的是,這裡相同的名稱都會被記錄,不會被覆蓋。
前面說到了,mark、measure這兩個函數,不會回傳任何值。如果要讀取標記或測量的內容,則需要透過呼叫Performance介面中的「getEntries」、「getEntriesByType」或「getEntriesByName」來讀取。其中「getEntries」傳回目前performance物件中儲存的所有標記(包括網頁載入的資源)和測量結果;「getEntriesByType」函數透過取得對應的標記;「getEntriesByName」函數透過標記(或測量結果)名稱來取得對應的數據。這些函數的傳回值是列表,包含名稱、開始時間、耗時等欄位。
例如,如果要取得所有的標記或測量結果,可以透過「getEntriesByType」函數取得:
performance.mark("start"); performance.mark("end"); performance.measure("difference", "start", "end"); var marks = performance.getEntriesByType("mark"); var measures = performance.getEntriesByType("measure"); console.log("===marks===:") marks.forEach(function(mark) { console.log(mark.name + ": " + mark.startTime); }) console.log("===measures===:") measures.forEach(function(measure){ console.log(measure.name + ": " + measure.duration) })
在瀏覽器(Chrome)控制台執行後的輸出為:
===marks===: start: 6805479.590000001 end: 6805479.74 ===measures===: difference: 0.14999999944120646
可以看見,傳回的物件中, name欄位為設定的標記(測量結果)的名稱,對於標記可以透過startTime取得標記時間(和前文提到的now函數一樣,這裡傳回的時間也是相對於navigationStart事件),對於計算結果,可以透過duration字段取得計算結果。上述範例中使用的「mark」、「measure」兩種類型之外,瀏覽器(Chrome、Firefox等)已經支援「resource」類型。也就是說,這些瀏覽器已經預設幫我們測量了所有外部資源載入的耗時。對於先前範例中的html(包含一個圖片的引用),如果在瀏覽器的控制台執行下面的js程式碼,可以直接看見這個圖片載入的耗時:
performance.getEntriesByType("resource").forEach(function(r) { console.log(r.name + ": " + r.duration) })
上述程式碼輸出(Chrome)為:
http://cdn3.infoqstatic.com/statics_s2_20150922- 0305u1/styles/i/logo_bigger.jpg: 21.696999901905656
這個資料和Chrome開發者工具中網路標籤頁中對該請求記錄的耗時完全一致。
如果要直接透過標記、測量結果名稱取得數據,可以透過getEntriesByName函數取得。要注意的是,函數同樣傳回的是PerformanceEntry物件數組,需要迭代取得特定資料。
同樣,Performance介面也提供了移除標記的介面。可以透過clearMarks和clearMeasures函數,刪除先前建立的標記和測量結果。這兩個函數都接收一個可選的名稱參數,如果傳入名稱,則刪除指定名稱的數據,否則清空標記/測量結果。
performance.clearMarks(); performance.mark("start"); performance.mark("end"); var marks = performance.getEntriesByType("mark"); console.log("before clear:") marks.forEach(function(mark) { console.log(mark.name + ": " + mark.startTime); }) performance.clearMarks("start"); marks = performance.getEntriesByType("mark"); console.log("after clear:") marks.forEach(function(mark) { console.log(mark.name + ": " + mark.startTime); })
上述程式碼執行後的輸出為:
before clear: start: 9080690.565000001 end: 9080690.575000001 after clear: end: 9080690.575000001
也就是說,執行了performance.clearMarks("start");之後,「start」標記被清除了。
瀏覽計時API
瀏覽計時API統計了一個網頁從開始到載入完畢這整個流程中,每個節點的時間戳。和使用者計時API不同的是,瀏覽器計時API的時間,是標準的時間戳記。每個節點的時間戳,都保存在performance.timing物件中。其中包含的每個節點,可以參考下圖:
(點擊放大影像)
console.log(performance.timing.domLoading); console.log(performance.timing.domComplete); console.log("load time: " + (performance.timing.domComplete - performance.timing.domLoading ));
例如,可以透過取得domComplete(DOM建置完成)和domLoading(DOM開始建置)的差值,來計算建置DOM樹消耗的時間。
除了timing物件中保存的各個節點載入時間戳,performance物件中還保存了和物件。它保存了目前頁面的載入類型和重定向次數。其中,載入類型類型有:
TYPE_NAVIGATE(type == 0):通过点击链接、输入地址、表单提交、脚本初开启等方式加载
TYPE_RELOAD(type == 1):通过重新加载或者location.reload()操作加载
TYPE_BACK_FORWARD(type == 2):通过浏览器历史遍历操作加载
TYPE_RESERVED(type == 255):上面没有定义的其他方式
如直接打开一个页面,在控制台中执行:
console.log(performance.navigation.type);
上述脚本执行后,控制台会输出0,表示这是直接打开的一个页面。再次刷新页面,重新执行上面的JavaScript片段,则会输出1,表示这是一次重新加载。
performance.timing.redirectCount 记录了当前页面经历的重定向次数。
浏览器支持
用户计时API已经支持,如IE10+、Chrome 25+、Firefox 15+等,但是Safari等浏览器还不支持。对于浏览计时API,更多的浏览器已经,包括Chrome、Firefox、IE9+、Safari 8+等等。
以上就是使用HMTL5 API监控前端性能的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!