頁面性能監控之performance

  • 2019 年 10 月 3 日
  • 筆記

頁面性能監測之performance

author: @TiffanysBear

最近，需要對業務上的一些性能做一些優化，比如降低首屏時間、減少核心按鈕可操作時間等的一些操作；在這之前，需要建立的就是數據監控的準線，也就是說一開始的頁面首屏數據是怎樣的，優化之後的數據是怎樣，需要有一個對比效果。此時，performance 這個API就非常合適了。

performance

Performance 介面可以獲取到當前頁面中與性能相關的資訊。它是 High Resolution Time API 的一部分，同時也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。

該類型的對象可以通過調用只讀屬性 Window.performance 來獲得。

參考鏈接 https://developer.mozilla.org/zh-CN/docs/Web/API/Performance

performance.timing對象

performance對象是全局的，它的timing屬性是一個對象，它包含了各種與瀏覽器性能有關的時間數據，提供瀏覽器處理網頁各個階段的耗時。偷一個圖~

performance.timing對象包含下列屬性（全部只讀）：

  • navigationStart：當前瀏覽器窗口的前一個網頁關閉，發生unload事件時的Unix毫秒時間戳。如果沒有前一個網頁，則等於fetchStart屬性。

  • unloadEventStart：如果前一個網頁與當前網頁屬於同一個域名，則返回前一個網頁的unload事件發生時的Unix毫秒時間戳。如果沒有前一個網頁，或者之前的網頁跳轉不是在同一個域名內，則返回值為0。

  • unloadEventEnd：如果前一個網頁與當前網頁屬於同一個域名，則返回前一個網頁unload事件的回調函數結束時的Unix毫秒時間戳。如果沒有前一個網頁，或者之前的網頁跳轉不是在同一個域名內，則返回值為0。

  • redirectStart：返回第一個HTTP跳轉開始時的Unix毫秒時間戳。如果沒有跳轉，或者不是同一個域名內部的跳轉，則返回值為0。

  • redirectEnd：返回最後一個HTTP跳轉結束時（即跳轉回應的最後一個位元組接受完成時）的Unix毫秒時間戳。如果沒有跳轉，或者不是同一個域名內部的跳轉，則返回值為0。

  • fetchStart：返回瀏覽器準備使用HTTP請求讀取文檔時的Unix毫秒時間戳。該事件在網頁查詢本地快取之前發生。

  • domainLookupStart：返回域名查詢開始時的Unix毫秒時間戳。如果使用持久連接，或者資訊是從本地快取獲取的，則返回值等同於fetchStart屬性的值。

  • domainLookupEnd：返回域名查詢結束時的Unix毫秒時間戳。如果使用持久連接，或者資訊是從本地快取獲取的，則返回值等同於fetchStart屬性的值。

  • connectStart：返回HTTP請求開始向伺服器發送時的Unix毫秒時間戳。如果使用持久連接（persistent connection），則返回值等同於fetchStart屬性的值。

  • connectEnd：返回瀏覽器與伺服器之間的連接建立時的Unix毫秒時間戳。如果建立的是持久連接，則返回值等同於fetchStart屬性的值。連接建立指的是所有握手和認證過程全部結束。

  • secureConnectionStart：返回瀏覽器與伺服器開始安全鏈接的握手時的Unix毫秒時間戳。如果當前網頁不要求安全連接，則返回0。

  • requestStart：返回瀏覽器向伺服器發出HTTP請求時（或開始讀取本地快取時）的Unix毫秒時間戳。

  • responseStart：返回瀏覽器從伺服器收到（或從本地快取讀取）第一個位元組時的Unix毫秒時間戳。

  • responseEnd：返回瀏覽器從伺服器收到（或從本地快取讀取）最後一個位元組時（如果在此之前HTTP連接已經關閉，則返回關閉時）的Unix毫秒時間戳。

  • domLoading：返回當前網頁DOM結構開始解析時（即Document.readyState屬性變為「loading」、相應的readystatechange事件觸發時）的Unix毫秒時間戳。

  • domInteractive：返回當前網頁DOM結構結束解析、開始載入內嵌資源時（即Document.readyState屬性變為「interactive」、相應的readystatechange事件觸發時）的Unix毫秒時間戳。

  • domContentLoadedEventStart：返回當前網頁DOMContentLoaded事件發生時（即DOM結構解析完畢、所有腳本開始運行時）的Unix毫秒時間戳。

  • domContentLoadedEventEnd：返回當前網頁所有需要執行的腳本執行完成時的Unix毫秒時間戳。

  • domComplete：返回當前網頁DOM結構生成時（即Document.readyState屬性變為「complete」，以及相應的readystatechange事件發生時）的Unix毫秒時間戳。

  • loadEventStart：返回當前網頁load事件的回調函數開始時的Unix毫秒時間戳。如果該事件還沒有發生，返回0。

  • loadEventEnd：返回當前網頁load事件的回調函數運行結束時的Unix毫秒時間戳。如果該事件還沒有發生，返回0。

performance API

1、performance.now()

performance.now()方法返回當前網頁自從performance.timing.navigationStart到當前時間之間的毫秒數。

performance.now()    // Date.now() 近似等於 (performance.timing.navigationStart + performance.now())

2、performance.mark()

該方法是做一個標記mark，結合measures方法，可以計算兩個標記之間間隔的時間差；因此可以直接依據業務上的不同，計算兩個業務邏輯之間的距離。

// 以一個標誌開始。  performance.mark('mySetTimeout-start');    // 等待一些時間。  setTimeout(function() {    // 標誌時間的結束。    performance.mark('mySetTimeout-end');      // 測量兩個不同的標誌。    performance.measure(      'mySetTimeout',      'mySetTimeout-start',      'mySetTimeout-end'    );      // 獲取所有的測量輸出。    // 在這個例子中只有一個。    var measures = performance.getEntriesByName('mySetTimeout');    var measure = measures[0];    console.log('setTimeout milliseconds:', measure.duration)      // 清除存儲的標誌位    performance.clearMarks();    performance.clearMeasures();  }, 1000);

3、performance.getEntries()

瀏覽器獲取網頁時，會對網頁中每一個對象（腳本文件、樣式表、圖片文件等等）發出一個HTTP請求。performance.getEntries方法以數組形式，返回這些請求的時間統計資訊，有多少個請求，返回數組就會有多少個成員。

由於該方法與瀏覽器處理網頁的過程相關，所以只能在瀏覽器中使用。

4、performance.navigation對象

（1）performance.navigation.type: 該屬性返回一個整數值，表示網頁的載入來源

0：網頁通過點擊鏈接、地址欄輸入、表單提交、腳本操作等方式載入，相當於常數performance.navigation.TYPE_NAVIGATENEXT。

1：網頁通過「重新載入」按鈕或者location.reload()方法載入，相當於常數performance.navigation.TYPE_RELOAD。

2：網頁通過「前進」或「後退」按鈕載入，相當於常數performance.navigation.TYPE_BACK_FORWARD。

255：任何其他來源的載入，相當於常數performance.navigation.TYPE_UNDEFINED。

（2）performance.navigation.redirectCount: 該屬性表示當前網頁經過了多少次重定向跳轉。

總結

因此根據圖上的解釋，封裝了一個計算頁面性能監控的基於performance的函數，用於返回性能數據。
可以根據自己的需求，在適合的時機執行函數，得到你需要的間隔時間duration。

  /**   * @file: performance.js   * @author: Tiffany   * @description: 頁面性能統計   */      var getPerformanceTiming = function () {      var performance = window.performance;        if (!performance) {          // 當前瀏覽器不支援 performance          return {msg: 'not suport performance'};      }      var t = performance.timing || {};        var ns = t.navigationStart;      var times = {          // 間隔時間瀏覽器打開頁面的耗時，          // 在首屏時間點執行這段函數呢，那就是首屏的耗時；          // 可以根據自己的業務需求，進行執行          duration: new Date().getTime() - ns,          // 頁面渲染出第一個字元的耗時          ttfb: t.responseStart - ns,          // 響應結束到開始請求的時間，          // 可以參考靜態資源的載入時間是否過長，是否能有優化的時間點          requestTime: t.responseEnd - t.requestStart      };          return times;  };    module.exports = {      getPerformanceTiming: getPerformanceTiming  };

Tags:

VirMach 便宜 VPS