window.performance

時間 2019-11-14

標籤 window.performance window performance 欄目 Windows 简体版

原文原文鏈接

利用window.performance查看網頁性能javascript

通常咱們能夠經過瀏覽器的調試工具-網絡面板，或者代理工具查看網頁加載過程當中的各個階段的耗時。而利用window.performance屬性則能夠得到更爲精確的原始數據，以毫秒爲單位，精確到微秒。css

performance.timing屬性介紹html

圖片說明以下：前端

屬性說明：java

navigationStart：瀏覽器處理當前網頁的啓動時間
fetchStart：瀏覽器發起http請求讀取文檔的毫秒時間戳。
domainLookupStart：域名查詢開始時的時間戳。
domainLookupEnd：域名查詢結束時的時間戳。
connectStart：http請求開始向服務器發送的時間戳。
connectEnd：瀏覽器與服務器鏈接創建（握手和認證過程結束）的毫秒時間戳。
requestStart：瀏覽器向服務器發出http請求時的時間戳。或者開始讀取本地緩存時。
responseStart：瀏覽器從服務器（或讀取本地緩存）收到第一個字節時的時間戳。
responseEnd：瀏覽器從服務器收到最後一個字節時的毫秒時間戳。
domLoading：瀏覽器開始解析網頁DOM結構的時間。
domInteractive：網頁dom樹建立完成，開始加載內嵌資源的時間。
domContentLoadedEventStart：網頁DOMContentLoaded事件發生時的時間戳。
domContentLoadedEventEnd：網頁全部須要執行的腳本執行完成時的時間，domReady的時間。
domComplete：網頁dom結構生成時的時間戳。
loadEventStart：當前網頁load事件的回調函數開始執行的時間戳。
loadEventEnd：當前網頁load事件的回調函數結束運行時的時間戳。

性能數據分析

前端性能統計的數據大體有如下幾個：chrome

白屏時間：從打開網站到有內容渲染出來的時間節點；
首屏時間：首屏內容渲染完畢的時間節點；
用戶可操做時間節點：domready觸發節點；
總下載時間：window.onload的觸發節點。

一、DNS尋址時間：t.domainLookupEnd - t.domainLookupStart。瀏覽器

優化方法：檢查頁面是否添加了DNS預解析代碼。緩存

　　DNS Prefetch 是一種DNS 預解析技術，當你瀏覽網頁時，瀏覽器會在加載網頁時對網頁中的域名進行解析緩存，這樣在你單擊當前網頁中的鏈接時就無需進行DNS的解析，減小用戶等待時間，提升用戶體驗。目前支持 DNS Prefetch 的瀏覽器有 google chrome 和 firefox 3.5。若是要控制瀏覽器端是否對域名進行預解析，能夠經過Http header 的x-dns-prefetch-control 屬性進行控制。服務器

<link rel="dns-prefetch" href="//haitao.nosdn1.127.net">

　　是否合理利用域名發散與域名收斂的策略網絡

二、TCP鏈接耗時：t.connectEnd - t.connectStart

三、首包時間: t.responseStart - t.navigationStart

優化方法：是否加cdn，數據能否靜態化等

四、request請求耗時：t.responseEnd - t.requestStart

　　優化方法：返回內容是否已經壓縮過，靜態資源是否打包好等。

五、白屏時間 domLoading - fetchStart

　　白屏時間節點指的是從用戶進入網站（輸入url、刷新、跳轉等方式）的時刻開始計算，一直到頁面有內容展現出來的時間節點。這個過程包括dns查詢、創建tcp鏈接、發送首個http請求（若是使用https還要介入TLS的驗證時間）、返回html文檔、html文檔head解析完畢。

　　使用注入代碼監控沒法獲取解析html文檔以前的時間信息，目前廣泛使用的白屏時間統計方案是在html文檔的head中全部的靜態資源以及內嵌腳本/樣式以前記錄一個時間點，在head最底部記錄另外一個時間點，二者的差值做爲白屏時間。

<html>
    <head>
        <meta charset="UTF-8"/>
        <!--這裏還有一大串meta信息-->
        <script>
           var start_time = new Date();//統計起點，實際爲html開始解析的時間節點
        </script>
        <link href='a.css'></link>
        <script src='a.js'></script>
        <script>
            var end_time = new Date();//統計起點，實際爲html開始解析的時間節點
        </script>
    </head>
    <body>
    </body>
</html>

　　上述代碼中的end_time和start_time的差值通常做爲白屏時間的估值，但理論上來說，這個差值只是瀏覽器解析html文檔head的時間，並不是準確的白屏時間。

六、解析DOM樹結構的時間：t.domComplete - t.domLoading

　　優化方法：檢查dom節點是否過多，dom是否嵌套過深

七、頁面加載完成的時間：t.loadEventEnd - t.fetchStart

　　首屏時間的統計比較複雜，目前應用比較廣的方案是將首屏的圖片、iframe等資源添加onload事件，獲取最慢的一個。這種方案比較適合首屏元素數量固定的頁面。

優化方法：考慮延遲加載，懶加載，部分加載，減小首屏渲染時間

方法

　　performance.getEntries()：每一個資源請求的時間數據。

　　performance.now() 計算網頁從performance.timing.navigationStart到當前時間的毫秒數。

　　精確計算某個操做，或某個方法執行的耗時。

var start = performance.now();
dosomething();
var end = performance.now();
var time = end - start;
console.log('耗時' + time + '毫秒。');

　　performance.mark()給相應的視點作標記。結合performance.measure()使用也能夠算出各個時間段的耗時。

　　執行下列代碼能夠查看頁面加載各個階段的耗時。

function getTimes(){
    var t = performance.timing;
    var timing = {
        domainLookupTime: t.domainLookupEnd - t.domainLookupStart,
        TCPConnectTime: t.connectEnd - t.connectStart,
        ttfb: t.responseStart - t.navigationStart,
        requestTime: t.responseEnd - t.requestStart,
        waitTime: t.domLoading - t.navigationStart,
        renderDomTime: t.domComplete - t.domLoading,
        loadPageTime: t.loadEventEnd - t.fetchStart
    }
    console.log(timing);
}
getTimes();

相關標籤/搜索

window.performance

Windows

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。