Performance — 帶你監(jiān)控前端性能

好久沒有寫內(nèi)容了...最近真的是疏于學(xué)習(xí)...按照慣例先安利下自己的Git....如果有錯(cuò)誤或者理解不正確的地方，麻煩告知我會(huì)及時(shí)更正。同時(shí)也非常歡迎大家一起討論。鞠躬。 Github地址：https://github.com/bsxz0604/RemarkForYouDontKnowJs麻煩各位兄弟姐妹點(diǎn)個(gè)star...(ps:祝Github十歲快樂

這個(gè)是我根據(jù)Performance 做的一個(gè)小的插件...感興趣的可以試用一下
https://github.com/bsxz0604/FE_Performance_Timing

我們先看到的是navigation timing監(jiān)測(cè)指標(biāo)圖,是HTML5提供的一組新API，已經(jīng)在很多主流的瀏覽器中實(shí)現(xiàn)了,最后會(huì)有圖說明支持的瀏覽器(不想承認(rèn)IE是主流瀏覽器ing….


RequestToDoWhat.jpg
navigationTime.png

可以看到瀏覽器處理請(qǐng)求會(huì)經(jīng)歷了下面這些階段：重定向→拉取緩存→DNS查詢→建立TCP鏈接→發(fā)起請(qǐng)求→接收響應(yīng)→處理HTML元素→元素加載完成，而這些時(shí)間數(shù)據(jù)都會(huì)Performance對(duì)象中體現(xiàn)出來

按觸發(fā)順序排列所有屬性,詳細(xì)的可以查看Navigation Timing

屬性

window.performance //返回一個(gè)Performance對(duì)象

interface Performance {
  readonly attribute PerformanceTiming timing;
  readonly attribute PerformanceNavigation navigation;
};

interface PerformanceTiming {
  readonly attribute unsigned long long navigationStart;
  readonly attribute unsigned long long unloadEventStart;
  readonly attribute unsigned long long unloadEventEnd;
  readonly attribute unsigned long long redirectStart;
  readonly attribute unsigned long long redirectEnd;
  readonly attribute unsigned long long fetchStart;
  readonly attribute unsigned long long domainLookupStart;
  readonly attribute unsigned long long domainLookupEnd;
  readonly attribute unsigned long long connectStart;
  readonly attribute unsigned long long connectEnd;
  readonly attribute unsigned long long secureConnectionStart;
  readonly attribute unsigned long long requestStart;
  readonly attribute unsigned long long responseStart;
  readonly attribute unsigned long long responseEnd;
  readonly attribute unsigned long long domLoading;
  readonly attribute unsigned long long domInteractive;
  readonly attribute unsigned long long domContentLoadedEventStart;
  readonly attribute unsigned long long domContentLoadedEventEnd;
  readonly attribute unsigned long long domComplete;
  readonly attribute unsigned long long loadEventStart;
  readonly attribute unsigned long long loadEventEnd;
};

interface PerformanceNavigation {
  const unsigned short TYPE_NAVIGATE = 0; //普通進(jìn)入，包括：點(diǎn)擊鏈接、在地址欄中輸入 URL、表單提交、或者通過除下表中 TYPE_RELOAD 和 TYPE_BACK_FORWARD 的方式初始化腳本
  const unsigned short TYPE_RELOAD = 1; // 通過刷新進(jìn)入，包括：瀏覽器的刷新按鈕、快捷鍵刷新、location.reload()等方法。
  const unsigned short TYPE_BACK_FORWARD = 2; //通過操作歷史記錄進(jìn)入，包括：瀏覽器的前進(jìn)后退按鈕、快捷鍵操作、history.forward()、history.back()、history.go(num)
  const unsigned short TYPE_RESERVED = 255; // 其他
  readonly attribute unsigned short type;
  readonly attribute unsigned short redirectCount; //表示到達(dá)最終頁面前，重定向的次數(shù)，但是這個(gè)接口有同源策略限制，即僅能檢測(cè)同源的重定向。
}

由于這些內(nèi)容都差不多是字面意思.而且W3C上解釋的很清楚,所以就不展開了(其實(shí)就是我懶ORZ…當(dāng)然.為了不浪費(fèi)大家時(shí)間這個(gè)….

列出PerformanceTiming中一些常用的計(jì)算:

  • DNS查詢耗時(shí) ：domainLookupEnd - domainLookupStart
  • TCP鏈接耗時(shí) ：connectEnd - connectStart
  • request請(qǐng)求耗時(shí) ：responseEnd - responseStart
  • 解析dom樹耗時(shí) ： domComplete - domInteractive
  • 白屏?xí)r間 ：responseStart - navigationStart
  • domready時(shí)間(用戶可操作時(shí)間節(jié)點(diǎn)) ：domContentLoadedEventEnd - navigationStart
  • onload時(shí)間(總下載時(shí)間) ：loadEventEnd - navigationStart

在PerformanceNavigation中的屬性查看上面接口代碼后的注釋,暫時(shí)在工作中沒有使用到
ps: 如果你使用的是chrome, MemoryInfo是一個(gè)非標(biāo)準(zhǔn)屬性
* jsHeapSizeLimit: 內(nèi)存大小限制
* totalJSHeapSize: 可使用的內(nèi)存
* usedJSHeapSize: JS對(duì)象(包括V8引擎內(nèi)部對(duì)象)占用的內(nèi)存，不能大于totalJSHeapSize，如果大于，有可能出現(xiàn)了內(nèi)存泄漏

方法

  • 獲取所有資源請(qǐng)求的時(shí)間數(shù)據(jù),這個(gè)函數(shù)返回一個(gè)按startTime排序的對(duì)象數(shù)組
    getEntries: ? getEntries()
  • 返回值仍是一個(gè)數(shù)組,這個(gè)數(shù)組相當(dāng)于getEntries()方法經(jīng)過所填參數(shù)篩選后的一個(gè)子集
    getEntriesByName: ? getEntriesByName( name, type[optional] )
    getEntriesByType: ? getEntriesByType(type)
  • 用于做標(biāo)記和清除標(biāo)記，供用戶自定義統(tǒng)計(jì)一些數(shù)據(jù)，比如某函數(shù)運(yùn)行耗時(shí)等
    mark: ? mark()
    measure: ? measure()
    clearMarks: ? clearMarks()
    clearMeasures: ? clearMeasures()
  • 無返回值，可以清除目前所有entryType為"resource"的數(shù)據(jù),用于單頁應(yīng)用的統(tǒng)計(jì)腳本非常有用
    clearResourceTimings: ? clearResourceTimings()
  • 是當(dāng)前時(shí)間與performance.timing.navigationStart的時(shí)間差,以微秒（百萬分之一秒）為單位的時(shí)間，與 Date.now()-performance.timing.navigationStart的區(qū)別是不受系統(tǒng)程序執(zhí)行阻塞的影響，因此更加精準(zhǔn)
    now: ? now()

總結(jié)

Performance用來做前端性能監(jiān)控，就2個(gè)字形容:利器...
當(dāng)然這只是前端性能優(yōu)化的第一步（性能的路上我也只看到了冰山一角），道阻且長 ~ 所以希望大家提出問題和指出疑問，一起進(jìn)步~

之前寫的文章大家感興趣的話，也可以閱讀了解討論:
HTTP協(xié)議淺談
Javascript作用域和閉包

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容