Chrome DevTools — Timeline

關於Timeline一直沒下手去寫，究其緣由是看了文檔以後仍是有點不知因此然，實踐的太少了，甚至都不清楚拿它能夠作什麼。內心有一個大概的概念就是Timeline是分析性能的！因此我我的就先從網站性能優化開始學習、總結，也寫了兩篇文章，《網站性能優化—CRP》和《網站性能優化—瀏覽器渲染》，而後慢慢地就明白了Timeline怎麼使用以及如何分析性能。若是你之前沒怎麼關注過性能優化，仍是推薦你先了解一下，這樣對掌握Timeline的使用大有好處。

Timeline，顧名思義「時間軸」，不管是頁面加載仍是在頁面上產生交互，它都能記錄下來這一段時間內瀏覽器幹了什麼，執行了哪些操做，消耗了多少時間等等。因而可知，Timeline對於分析網站性能是多麼重要。

認識 Timeline

• Controls：開始/結束記錄、清除記錄、選擇記錄的類型等

• Overview：頁面性能的一個概覽

  • FPS：每秒幀數，綠色豎線越高，FPS越高。FPS圖表上的紅色塊表示長時間幀，極可能會出現卡頓

  • CPU： CPU資源，此區域圖表示佔用CPU資源的事件類型

  • NET：每條彩色橫槓表示一種資源，橫槓越長，獲取資源所需的時間越長。每一個橫槓的淺色部分表示等待時間，深色部分表示下載時間。橫崗顏色表示的文件類型以下:

    • HTML文件：藍色

    • JS文件：黃色

    • CSS文件：紫色

    • 媒體文件：綠色

    • 其餘資源：灰色

• Flame Chart：CPU棧追蹤的可視化展現。在這裏能夠查看到瀏覽器渲染一個頁面的完整過程，或者是一個交互的過程；還能夠查看到JS中函數的調用關係以及每一個函數所消耗的時間等等。頁面加載的時候，在這裏還能夠看到三條垂直的虛線：綠線表明首次繪製的時間，藍線表明DOMContentLoaded事件發生的時間，紅線表明load事件發生的時間。

• Details：在Flame Chart中，選擇了某一事件後，這部分會展現與這個事件相關的更多信息；若是選擇了某一幀，這部分會展現與選中幀相關的信息。若是既沒有選中事件也沒有選中幀，則這部分會展現當前記錄時間段內的相關信息。

錄製時間軸

頁面加載：打開要錄製的頁面，而後打開Chrome DevTools，切換到Timeline，重載頁面，Timeline會自動錄製頁面重載的過程。

頁面交互：切換到Timeline以後，點擊錄製按鈕，或者快捷鍵Cmd+E（Mac）、Ctrl+E（Windows/Linux）便可開始錄製。錄製期間，錄製按鈕變爲紅色。以後就能夠在頁面上進行交互，而後再次點擊錄製按鈕或者Stop按鈕以中止記錄。Cmd+E/Ctrl+E也能夠中止錄製，但前提是鼠標的焦點要在Timeline裏面。

錄製完畢後，DevTools會猜想哪一部分記錄與你最相關，並自動縮放到那一部分。

錄製建議：

• 儘量保持記錄簡短：記錄越短，分析越容易

• 避免沒必要要的操做：好比你想要記錄點擊登陸按鈕以後發生的事件，那就不要有滾動頁面、加載圖像等操做

• 禁用瀏覽器緩存：如記錄與網絡相關的信息，最好禁用瀏覽器緩存

• 禁用瀏覽器擴展：Chrome 擴展程序會給 Timeline 記錄增長不相關的噪聲，推薦以隱身模式打開 Chrome 窗口錄製

捕捉屏幕截圖

Timeline面板能夠在頁面加載的過程當中捕捉屏幕截圖，這個特性被稱爲幻燈片。錄製以前，勾選上Screenshots便可。

錄製完成後，屏幕截圖顯示在Overview下方，將鼠標懸停在截圖或Overview上能夠查看那一時刻放大的屏幕截圖。左右移動鼠標能夠模擬頁面生成的動畫效果。

放大記錄顯示區間

放大顯示一部分記錄，以便簡化分析。在Overview區域能夠放大顯示一部分記錄，放大後，Frame Chart會自動縮放以匹配同一部分記錄。

縮放的方法：

• 在Overview上拖動左右兩側的灰色滑動條

• W、A、S和D鍵：A向左移動，D向右移動，W放大，S縮小

• Mac上用觸摸板也很方便

分析JS

當咱們想要分析具體的JS時，能夠開啓JS分析器（勾選JS Profile）。錄製以後在Frame Chart能夠清晰地看到詳細的JS調用狀況以及各自消耗的時間。若是未開啓JS分析器，則不會顯示詳細的JS調用關係。

分析繪製

若是想進一步查看Paint事件相關的信息，能夠勾選Paint。錄製完以後，點擊某個Paint事件，在Details中會多出一個Paint Profiler選項卡，此選項卡里展現了與該Paint事件詳細的信息。

除了Paint事件，此時點擊某一幀也能夠查看網頁中層相關的信息，詳細內容在《網站性能優化—瀏覽器渲染》中已經闡述過。

搜索事件

查看事件時，你可能想專一某一類事件，好比想查看每個Parse HTML事件。在Timeline處於焦點時，按Cmd+F/Ctrl+F便可調出一個搜索框，輸入想要查看的事件名字便可搜索。搜索結果僅限於當前選定的時間幀範圍內，選定時間幀範圍外的任何事件都不包括在搜索結果中。

保存和載入記錄

在Timeline面板下右鍵，能夠選擇保存或載入Timeline記錄。保存的Timeline記錄是一份json文件。

---

因爲Chrome瀏覽器不斷更新，不一樣版本的Timeline面板也會有所不一樣，因此Timeline就簡單介紹這麼多，通常的性能分析應該都不是問題了。無論瀏覽器怎麼更新，基本的使用是不會變的，碰到新增的一些內容能夠Google搜索一下或者查看官方文檔是否有更新。

有用的資源：

• https://web-design-weekly.com...

• http://blog.librato.com/posts...

• http://echizen.github.io/tech...

更新：

---

Chrome DevTools 系列：

• Chrome DevTools — Network

• Chrome DevTools — JS調試

• Chrome DevTools — Elements

• Chrome DevTools — Console