chrome控制台查看網絡性能指標-TTFB_Content Download_window.performance

如圖,是一個http請求Timing相關指標

 

 TTFB

TTFB是非常重要的一個性能指標,他記錄的是最初的網絡請求被發起到從服務器接收到第一個字節這段時間，它包含了 TCP連接時間，發送HTTP請求時間和獲得響應消息第一個字節的時間

在項目中如果網頁加載很慢,我們就可以查看TTFB,當ttfb對應的時間很大時,說明我們的服務器性能比較差,是服務端問題.

解決方法

針對服務器的問題,我們前端是沒辦法解決的,但是可以通過減少DNS查詢,部署CDN來減少http的請求時間.

 

Content Download

Content Download表示是瀏覽器接受到第一個字節到最后一個字節所花費的時間.當這個指標很大時,說明我們的網絡環境不好,或者是服務器響應比較慢

解決方法

針對網絡環境不好,我們可以通過按需加載,預加載,懶加載的方式去優化

TTSR(Time to Start Render)

TTSR-開始渲染時間，指某些非空元素開始在瀏覽器顯示時的時間，這也是一項重要指標，即TTSR越短，用戶越早瀏覽器中的內容，心理上的等待時間會越短。過多的CPU消耗會拖慢TTSR，所以網站中有大量圖片和腳本往往會造成不良用戶體驗。

TTSR優化：

• 優化TTFB

• 降低客戶端CPU消耗，即頁面加載初期不要有大腳本運行，把JS腳本放到頁面下方

• 使用效率較高的CSS選擇器，避免使用CSS表達式

• 避免使用CSS濾鏡

TTDC(Time to Document Complete)

TTDC-文檔完成時間，指頁面結束加載，可供用戶進行操作的時間，等價於瀏覽器的onload事件觸發點。TTDC是比較重要的性能優化對象，TTDC越低，頁面加載速度越快，用戶等待時間越短。

TTDC的優化方法有：

• 優化TTFB

• 優化TTSR

• 優化首屏時間，將不必要的頁面加載放到onload事件之后

TTFL(Time to Fully Loaded)

TTFL-完全加載時間，指頁面在onload之前和onload事件之后額外加載的內容所花費的時間的總和，即頁面完完全全加載完畢消耗的總時間。

TTFL的優化方法：

• 優化TTFB

• 優化TTSR

• 優化TTDC

• 延遲加載

• 異步加載

• 按需加載

重要的window.performance

window.performance可以讓我們獲取頁面的一些關鍵信息,我們在控制台中輸入它,可以看到頁面的內存值memory,頁面渲染的各種指標timing

 

 

如果你的老大,要看網頁的性能情況,我們就可以通過window.performance-timing內的內容查看,如下是常用的指標計算

重定向耗時 = redirectEnd - redirectStart;

DNS查詢耗時 = domainLookupEnd - domainLookupStart;

TCP鏈接耗時 = connectEnd - connectStart;

HTTP請求耗時 = responseEnd - responseStart;

解析dom樹耗時 = domComplete - domInteractive;

白屏時間 = responseStart - navigationStart;

DOMready時間 = domContentLoadedEventEnd - navigationStart;

onload時間 = loadEventEnd - navigationStart;