使用HMTL5 API監控前端效能
- 黄舟原創
- 2018-05-19 14:31:372413瀏覽
使用者計時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」兩個變數之間的差值（單位毫秒）。
<html>
<head>
<meta charset="utf-8" />
<title>test timing</title>
</head>
<body>
<img src="http://cdn3.infoqstatic.com/statics_s2_20150922 -0305u1/styles/i/logo_bigger.jpg" alt="image" >
<script type="text/javascript">
var measure_start = performance.now();
document.getElementsByTagName("img")[0].addEventListener ("load", function() {
var measure_end = performance.now();
console.log("image load time: " + (measure_end - measure_start) + "ms");
}, false);
</script>
</body>
</html>訪問這個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中文网（www.php.cn）！