用PerformanceTiming來檢測頁面效能

答案在風中飄著發表於2019-02-16
ORM

window.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

返回瀏覽器從伺服器收到（或從本地快取讀取）最後一個位元組時（如果在此之前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。

如何分析頁面整體載入速度

一般頁面統計所需要的引數（dom解析時間，domContentLoaded時間，onload時間， 白屏時間，getStyleConfig介面返回時間 – 準備載入新頁面的起始時間）

        let pt = window.performance.timing;  
        /* dom解析時間 
         *
         *
         *1.domComplete  
         *當前網頁DOM結構生成時（即Document.readyState屬性變為“complete”，以及相應的
         *readystatechange事件發生時）的Unix毫秒時間戳
         *
         *2.domInteractive 
         *當前網頁DOM結構結束解析、開始載入內嵌資源時
         *即Document.readyState屬性變為“interactive”、相應的readystatechange事件觸發時
         *的Unix毫秒時間戳。
         */
        let domComplete = pt.domComplete - pt.domInteractive;
        /* domContentLoaded時間
         *
         *
         *當前網頁DOM結構生成時（即Document.readyState屬性變為“complete”，以及相應的
         *1.domContentLoadedEventEnd  
         *網頁DOMContentLoaded事件發生時（即DOM結構解析完畢、所有指令碼開始執行時）的Unix毫秒時間
         *戳。
         *
         *2.navigationStart 
         *當前瀏覽器視窗的前一個網頁關閉，發生unload事件時的Unix毫秒時間戳。
         *如果沒有前一個網頁，則等於fetchStart屬性
         */
         let domLoaded = pt.domContentLoadedEventEnd - pt.navigationStart;
        /* onload時間
         *1.loadEventEnd
         *當前網頁load事件的回撥函式執行結束時的Unix毫秒時間戳。如果該事件還沒有發生，返回0。
         */
        let onload = pt.loadEventEnd - pt.navigationStart;
        // 白屏時間，getStyleConfig介面返回時間 - 準備載入新頁面的起始時間
        let white = window.dbStyleConfigEnd ? window.dbStyleConfigEnd - pt.navigationStart : ``;
        let dbStyle = window.dbStyleConfigEnd - window.dbStyleConfigStart;
        let url = `/statistics/activityPagePerf?hdType=${CFG.appName}&oaId=${CFG.actId}&domComplete=${domComplete}&domLoaded=${domLoaded}&onload=${onload}&white=${white}&dbStyle=${dbStyle}`;

  1. 主要是檢視指標值PAGET_頁面載入時間,此指標指的是頁面整體載入時間但不含(onload事件和redirect), 此指標值可直接反應使用者體驗, 從此項指標可以知道指定某時間段的頁面載入速度值,以及和天,周,月的對比狀況.

  2. 也可以查詢指標ALLT_頁面完全載入時間, 可以查詢到從瀏覽器開始導航(使用者點選連結或在位址列輸入url或點重新整理,後退按鈕)到頁面onload 事件js完全跑完的所有時間.

如果發現頁面載入速度有增加或減少,則可以分項查詢前面的每個指標值,總的來說他們的關係如下:

1.dom開始載入前所有花費時間=重定向時間+域名解析時間+建立連線花費時間+請求花費時間+接收資料花費時間

2.pageLoadTime頁面載入時間=域名解析時間+建立連線花費時間+請求花費時間+接收資料花費時間+解析dom花費時間+載入dom花費時間

3.allLoadTime頁面完全載入時間=重定向時間+域名解析時間+建立連線花費時間+請求花費時間+接收資料花費時間+解析dom花費時間+載入dom花費時間+執行onload事件花費時間

4.resourcesLoadedTime資源載入時間=解析dom花費時間+載入dom花費時間

相關文章