頁面性能監控之performance

頁面性能監測之performance<br> 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。

<!-- more -->

performance API

一、performance.now()

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

performance.now()

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

二、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);

三、performance.getEntries()

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

因爲該方法與瀏覽器處理網頁的過程相關，因此只能在瀏覽器中使用。

四、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
};

原文出處：https://www.cnblogs.com/tiffanybear/p/11351497.html