頁面性能監控之performance

頁面性能監測之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
};