當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

使用HMTL5 API监控前端性能

發(fā)布時間：2025/4/5 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了使用HMTL5 API监控前端性能小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

http://www.infoq.com/cn/articles/html5-performance-api-monitoring

用戶計時API

用戶計時API可以在網(wǎng)頁應(yīng)用中測量兩個預(yù)定義標(biāo)記之間的性能。開發(fā)者僅僅需要分別定義測量的開始和結(jié)束標(biāo)記。可以通過JavaScript對象“performance”提供的函數(shù)，對計時位置進(jìn)行標(biāo)記。

var measuring_start = performance.now();

通過“now”函數(shù)，可以在網(wǎng)頁應(yīng)用的獲取計時用高精度時間戳。和該函數(shù)類似的是Date對象，它同樣可以獲取當(dāng)前時間戳。二者的主要區(qū)別是時間精度，now函數(shù)的返回值的w3c文檔中明確要求，必須能夠表示精確到千分位小數(shù)的毫秒值。另外now函數(shù)返回的數(shù)值，是從瀏覽器的“瀏覽開始事件（navigationStart）”開始到現(xiàn)在的毫秒數(shù)。

performance.now() 35438640.775000006 (new Date()).getTime() 1443063066478

如果希望分析一個圖片的加載性能，可以在圖片的加載（load）事件中設(shè)置第二個標(biāo)記。圖片加載的耗時，就是“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開發(fā)者工具中網(wǎng)絡(luò)標(biāo)簽頁的加載時間做比較：

(點擊放大圖像)

除了使用now函數(shù)直接獲取時間戳之外，Performance接口還提供了標(biāo)記（mark）函數(shù)。開發(fā)者可以在任何需要記錄時間的地方創(chuàng)建、清除標(biāo)記。

performance.mark("start"); … performance.mark("end");

mark函數(shù)不返回任何值，但是后續(xù)可以通過標(biāo)記的名稱來獲取標(biāo)記的數(shù)據(jù)。如果要計算標(biāo)記之間的差值，可以通過“measure”函數(shù)來完成。該函數(shù)需要三個參數(shù)，第一個參數(shù)定義了該差值的名稱，第二個和第三個變量指定標(biāo)記的名稱。同樣，該函數(shù)也不返回任何值。

performance.measure("difference", "start", "end");

上面這個例子，計算了“start”和“end”兩個標(biāo)記之間的差值，并將差值命名為“difference”。需要特別注意的是，這里相同的名稱都會被記錄，不會覆蓋。

前面說到了，mark、measure這兩個函數(shù)，不會返回任何值。如果要讀取標(biāo)記或者測量的內(nèi)容，需要通過調(diào)用Performance接口中的“getEntries”、“getEntriesByType”或者“getEntriesByName”函數(shù)讀取。其中“getEntries”返回當(dāng)前performance對象中保存的所有標(biāo)記（包括網(wǎng)頁加載的資源）和測量結(jié)果；“getEntriesByType”函數(shù)通過類型獲取對應(yīng)的標(biāo)記；“getEntriesByName”函數(shù)通過標(biāo)記（或者測量結(jié)果）名稱來獲取對應(yīng)的數(shù)據(jù)。這些函數(shù)的返回值是PerformanceEntry對象列表，包含名稱、開始時間、耗時等字段。

例如，如果要獲取所有的標(biāo)記或者測量結(jié)果，可以通過“getEntriesByType”函數(shù)獲取：

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）控制臺執(zhí)行后的輸出為：

===marks===: start: 6805479.590000001 end: 6805479.74 ===measures===: difference: 0.14999999944120646

可以看見，返回的對象中，name字段為設(shè)置的標(biāo)記（測量結(jié)果）的名稱，對于標(biāo)記可以通過startTime獲取標(biāo)記時間（和前文提到的now函數(shù)一樣，這里返回的時間也是相對于navigationStart事件），對于計算結(jié)果，可以通過duration字段獲取計算結(jié)果。上面示例中使用的“mark”、“measure”兩種類型之外，瀏覽器（Chrome、Firefox等）已經(jīng)支持“resource”類型。也就是說，這些瀏覽器已經(jīng)默認(rèn)幫我們測量了所有外部資源加載的耗時。對于之前示例中的html（包含一個圖片的引用），如果在瀏覽器的控制臺執(zhí)行下面的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

這個數(shù)據(jù)和Chrome開發(fā)者工具中網(wǎng)絡(luò)標(biāo)簽頁中對該請求記錄的耗時完全一致。

如果要直接通過標(biāo)記、測量結(jié)果名稱獲取數(shù)據(jù)，可以通過getEntriesByName函數(shù)獲取。需要注意的是，該函數(shù)同樣返回的是PerformanceEntry對象數(shù)組，需要迭代獲取具體數(shù)據(jù)。

同樣，Performance接口也提供了移除標(biāo)記的接口。可以通過clearMarks和clearMeasures函數(shù)，刪除之前創(chuàng)建的標(biāo)記和測量結(jié)果。這兩個函數(shù)都接收一個可選的名稱參數(shù)，如果傳入名稱，則刪除指定名稱的數(shù)據(jù)，否則清空標(biāo)記/測量結(jié)果。

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); })

上述代碼執(zhí)行后的輸出為：

before clear: start: 9080690.565000001 end: 9080690.575000001 after clear: end: 9080690.575000001

也就是說，執(zhí)行了performance.clearMarks("start");之后，“start”標(biāo)記被清除了。

瀏覽計時API

瀏覽計時API統(tǒng)計了一個網(wǎng)頁從卸載當(dāng)前文檔開始到加載完畢這整個流程中，每個節(jié)點的時間戳。和用戶計時API不同的是，瀏覽器計時API的時間，是標(biāo)準(zhǔn)的時間戳。每個節(jié)點的時間戳，都保存在performance.timing對象中。其中包含的每個節(jié)點，可以參考下圖：

(點擊放大圖像)

console.log(performance.timing.domLoading); console.log(performance.timing.domComplete); console.log("load time: " + (performance.timing.domComplete - performance.timing.domLoading ));

例如，可以通過獲取domComplete（DOM構(gòu)建完成）和domLoading（DOM開始構(gòu)建）的差值，來計算構(gòu)建DOM樹消耗的時間。

除了timing對象中保存的各個節(jié)點加載時間戳，performance對象中還保存了和navigation對象。它保存了當(dāng)前頁面的加載類型和重定向次數(shù)。其中，加載類型類型有：

TYPE_NAVIGATE（type == 0）：通過點擊鏈接、輸入地址、表單提交、腳本初開啟等方式加載
TYPE_RELOAD（type == 1）：通過重新加載或者location.reload()操作加載
TYPE_BACK_FORWARD（type == 2）：通過瀏覽器歷史遍歷操作加載
TYPE_RESERVED（type == 255）：上面沒有定義的其他方式

如直接打開一個頁面，在控制臺中執(zhí)行：

console.log(performance.navigation.type);

上述腳本執(zhí)行后，控制臺會輸出0，表示這是直接打開的一個頁面。再次刷新頁面，重新執(zhí)行上面的JavaScript片段，則會輸出1，表示這是一次重新加載。

performance.timing.redirectCount?記錄了當(dāng)前頁面經(jīng)歷的重定向次數(shù)。

瀏覽器支持

用戶計時API已經(jīng)大部分瀏覽器支持，如IE10+、Chrome 25+、Firefox 15+等，但是Safari等瀏覽器還不支持。對于瀏覽計時API，更多的瀏覽器已經(jīng)支持，包括Chrome、Firefox、IE9+、Safari 8+等等。

轉(zhuǎn)載于:https://www.cnblogs.com/davidwang456/articles/9167912.html

總結(jié)

以上是生活随笔為你收集整理的使用HMTL5 API监控前端性能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

性能
API

上一篇：唯品会Java核心项目VJTools开源
下一篇：通用前端监控采集脚本