網(wǎng)頁性能檢測-performance

上一篇講到看懂Chrome瀏覽器自帶的Performance性能監(jiān)控,但很多時(shí)候我們希望的是主動(dòng)收集客戶端的數(shù)據(jù)，瀏覽器的調(diào)試工具就有些無法滿足了。

推薦使用window.performance對象。

一、performance是什么

允許網(wǎng)頁訪問某些函數(shù)來測量網(wǎng)頁和Web應(yīng)用程序的性能，包括 Navigation Timing API和高分辨率時(shí)間數(shù)據(jù)。

來源：MDN

實(shí)質(zhì)上來說performance對象就是專門用于性能監(jiān)測的對象，內(nèi)置了幾乎所有常用前端需要的性能參數(shù)監(jiān)控。

注意：performance對象的所有API，都是只讀的。

例如：

• 自輸入網(wǎng)址回車開始到某一特定時(shí)間
• 解析dom樹耗時(shí)
• 白屏?xí)r間
• domready時(shí)間
• onload時(shí)間
• 重定向耗時(shí)
• request請求耗時(shí)

還有：

• 當(dāng)前網(wǎng)頁的全部對象統(tǒng)計(jì)信息
• 用戶行為信息
• 
  

二、performance的兼容性

performance的監(jiān)控前端性能推出，讓幾乎所有瀏覽器都舒服了一把。(IE9以下除外) 并且各大瀏覽器都在盡力的做向下兼容。

不能盲目樂觀：

1. performance的內(nèi)置方法的返回結(jié)果各內(nèi)核瀏覽器不一致，例如：獲取所有所有http請求列表時(shí)，F(xiàn)irefox返回結(jié)果包括失敗和成功全部內(nèi)容，Chrome瀏覽器則只返回成功請求。
2. performance很多內(nèi)置API是基于瀏覽器實(shí)現(xiàn)，因此在移動(dòng)端或客戶端上有所限制。(如getEntries()等)

三、performance的API

performance`的API比較多，但有幾個(gè)尤為實(shí)用。

1. performance.now()方法

performance.now()返回performance.navigationStart至當(dāng)前的毫秒數(shù)。performance.navigationStart是下文將介紹到的可以說是瀏覽器訪問最初的時(shí)間測量點(diǎn)。

值得注意的兩點(diǎn)：

• 測量初始點(diǎn)是瀏覽器訪問最初測量點(diǎn)，或者理解為在地址欄輸入U(xiǎn)RL后按回車的那一瞬間。
• 返回值是毫秒數(shù)，但帶有精準(zhǔn)的多位小數(shù)。

用performance.now()檢測for循環(huán)的執(zhí)行時(shí)間(毫秒)

    var st = performance.now();    for (var o = 0; o < 10000; o ++)  console.log(o)    var end = performance.now();
    console.log(`for時(shí)間${end - st}`); // for時(shí)間1155.9950000373647

2. performance.navigation屬性

performance.navigation`負(fù)責(zé)紀(jì)錄用戶行為信息，只有兩個(gè)屬性。

console.log(performance.navigation);// PerformanceNavigation {type: 1, redirectCount: 0}

• type：表示網(wǎng)頁的加載來源，可能有4種情況
• 0：網(wǎng)頁通過點(diǎn)擊鏈接、地址欄輸入、表單提交、腳本操作等方式加載，相當(dāng)于常數(shù)
• 1：網(wǎng)頁通過“重新加載”按鈕或者location.reload()方法加載
• 2：網(wǎng)頁通過“前進(jìn)”或“后退”按鈕加載
• 255：任何其他來源的加載
• redirectCount：表示當(dāng)前網(wǎng)頁經(jīng)過了多少次重定向跳轉(zhuǎn)。

3. performance.timing對象

作為performance最為重要的屬性之一，timing內(nèi)包含了幾乎所有時(shí)間節(jié)點(diǎn)。(附1)

整理的常用時(shí)間點(diǎn)計(jì)算如下：直接復(fù)制粘貼取用。

window.onload = function() {  var timing  = performance.timing;  console.log('準(zhǔn)備新頁面時(shí)間耗時(shí): ' + timing.fetchStart - timing.navigationStart);  console.log('redirect 重定向耗時(shí): ' + timing.redirectEnd  - timing.redirectStart);  console.log('Appcache 耗時(shí): ' + timing.domainLookupStart  - timing.fetchStart);  console.log('unload 前文檔耗時(shí): ' + timing.unloadEventEnd - timing.unloadEventStart);  console.log('DNS 查詢耗時(shí): ' + timing.domainLookupEnd - timing.domainLookupStart);  console.log('TCP連接耗時(shí): ' + timing.connectEnd - timing.connectStart);  console.log('request請求耗時(shí): ' + timing.responseEnd - timing.requestStart);  console.log('白屏?xí)r間: ' + timing.responseStart - timing.navigationStart);  console.log('請求完畢至DOM加載: ' + timing.domInteractive - timing.responseEnd);  console.log('解釋dom樹耗時(shí): ' + timing.domComplete - timing.domInteractive);  console.log('從開始至load總耗時(shí): ' + timing.loadEventEnd - timing.navigationStart);}

值得注意的一點(diǎn)：放在window.onload中執(zhí)行，最主要的原因是渲染完成后能拿到大部分timing屬性，也可以放入定時(shí)器中執(zhí)行。

4. performance.mark(markName)方法

標(biāo)記在自定義的時(shí)間點(diǎn)，對應(yīng)的方法是peformance.clearMarks(markName) / performance.clearMarks();實(shí)測兼容性并不是很理想。。。（或者可能我用的不對）

5. performance.memory屬性

performance.memory用于顯示當(dāng)前的內(nèi)存占用情況；

console.log(performance.memory);/* MemoryInfo {  totalJSHeapSize: 11735319,  usedJSHeapSize: 9259919,  jsHeapSizeLimit: 2197815296} */

• usedJSHeapSize表示：JS 對象（包括V8引擎內(nèi)部對象）占用的內(nèi)存數(shù)
• totalJSHeapSize表示：可使用的內(nèi)存
• jsHeapSizeLimit表示：內(nèi)存大小限制

通常，usedJSHeapSize不能大于totalJSHeapSize，如果大于，有可能出現(xiàn)了內(nèi)存泄漏。

6. performance.getEntries()方法

瀏覽器獲取網(wǎng)頁時(shí)，會(huì)對網(wǎng)頁中每一個(gè)對象（腳本文件、樣式表、圖片文件等等）發(fā)出一個(gè)HTTP請求。performance.getEntries方法以數(shù)組形式，返回一個(gè)PerformanceEntry列表，這些請求的時(shí)間統(tǒng)計(jì)信息，有多少個(gè)請求，返回?cái)?shù)組就會(huì)有多少個(gè)成員。

name：資源名稱，是資源的絕對路徑或調(diào)用mark方法自定義的名稱startTime:開始時(shí)間duration：加載時(shí)間entryType：資源類型，entryType類型不同數(shù)組中的對象結(jié)構(gòu)也不同！具體見下initiatorType：誰發(fā)起的請求，具體見下

entryType的值:

也可參見：MDN

initiatorType的值：

1. 只能在瀏覽器中使用2. 該方法返回的數(shù)組第一項(xiàng)是HTML頁面信息

四、如何將performance的信息傳遞出去

1. sendBeacon方法
2. 動(dòng)態(tài)標(biāo)簽
3. web wroker

這些都是后話啦。。。

引用：

1. https://developer.mozilla.org/zh-CN/docs/Web/API/Window/performance
2. https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API
3. http://javascript.ruanyifeng.com/bom/performance.html
4. https://www.cnblogs.com/bldxh/p/6857324.html

附1：