小編給大家分享一下怎么使用HMTL5 API監(jiān)控前端性能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在豐都等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場(chǎng)前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、網(wǎng)站建設(shè) 網(wǎng)站設(shè)計(jì)制作按需定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),全網(wǎng)整合營(yíng)銷推廣,成都外貿(mào)網(wǎng)站建設(shè),豐都網(wǎng)站建設(shè)費(fèi)用合理。

用戶計(jì)時(shí)API可以在網(wǎng)頁應(yīng)用中測(cè)量?jī)蓚€(gè)預(yù)定義標(biāo)記之間的性能。開發(fā)者僅僅需要分別定義測(cè)量的開始和結(jié)束標(biāo)記?？梢酝ㄟ^JavaScript對(duì)象“”提供的函數(shù)，對(duì)計(jì)時(shí)位置進(jìn)行標(biāo)記。

var measuring_start = performance.now();

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

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

如果希望分析一個(gè)圖片的加載性能，可以在圖片的加載（load）事件中設(shè)置第二個(gè)標(biāo)記。圖片加載的耗時(shí)，就是“measure_start”和“measure_end”兩個(gè)變量之間的差值（單位毫秒）。

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

訪問這個(gè)html之后，可以在控制臺(tái)看見輸出：

image load time: 24.395ms

同時(shí)，可以和Chrome開發(fā)者工具中網(wǎng)絡(luò)標(biāo)簽頁的加載時(shí)間做比較：

(點(diǎn)擊放大圖像)

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

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

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

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

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

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

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

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

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

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

performance.getEntriesByType("resource").forEach(function(r) { console.log(r.name + ": " + r.duration) })

上述代碼輸出（Chrome）為：

/upload/otherpic70/2815.jpg: 21.696999901905656

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

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

同樣，Performance接口也提供了移除標(biāo)記的接口?？梢酝ㄟ^clearMarks和clearMeasures函數(shù)，刪除之前創(chuàng)建的標(biāo)記和測(cè)量結(jié)果。這兩個(gè)函數(shù)都接收一個(gè)可選的名稱參數(shù)，如果傳入名稱，則刪除指定名稱的數(shù)據(jù)，否則清空標(biāo)記/測(cè)量結(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)記被清除了。

瀏覽計(jì)時(shí)API

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

(點(diǎn)擊放大圖像)

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)建）的差值，來計(jì)算構(gòu)建DOM樹消耗的時(shí)間。

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

TYPE_NAVIGATE（type == 0）：通過點(diǎn)擊鏈接、輸入地址、表單提交、腳本初開啟等方式加載

TYPE_RELOAD（type == 1）：通過重新加載或者location.reload()操作加載

TYPE_BACK_FORWARD（type == 2）：通過瀏覽器歷史遍歷操作加載

TYPE_RESERVED（type == 255）：上面沒有定義的其他方式

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

console.log(performance.navigation.type);

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

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

瀏覽器支持

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

以上是“怎么使用HMTL5 API監(jiān)控前端性能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！