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

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

推薦使用window.performance對(duì)象。

一、performance是什么

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

來(lái)源：MDN

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

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

例如：

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

還有：

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

二、performance的兼容性

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

不能盲目樂(lè)觀：

1. performance的內(nèi)置方法的返回結(jié)果各內(nèi)核瀏覽器不一致，例如：獲取所有所有http請(qǐng)求列表時(shí)，F(xiàn)irefox返回結(jié)果包括失敗和成功全部?jī)?nèi)容，Chrome瀏覽器則只返回成功請(qǐng)求。
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是下文將介紹到的可以說(shuō)是瀏覽器訪問(wèn)最初的時(shí)間測(cè)量點(diǎn)。

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

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

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

3. performance.timing對(duì)象

作為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)備新頁(yè)面時(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請(qǐng)求耗時(shí): ' + timing.responseEnd - timing.requestStart);  console.log('白屏?xí)r間: ' + timing.responseStart - timing.navigationStart);  console.log('請(qǐng)求完畢至DOM加載: ' + timing.domInteractive - timing.responseEnd);  console.log('解釋dom樹(shù)耗時(shí): ' + timing.domComplete - timing.domInteractive);  console.log('從開(kāi)始至load總耗時(shí): ' + timing.loadEventEnd - timing.navigationStart);}

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

4. performance.mark(markName)方法

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

5. performance.memory屬性

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

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

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

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

6. performance.getEntries()方法

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

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

entryType的值:

也可參見(jiàn)：MDN

initiatorType的值：

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

四、如何將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：