頁面效能監控之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
};