Chrome DevTools之Timeline Tool簡介
相信大多數開發者都在用chrome瀏覽器，無論是它豐富的拓展插件還是方便的開發者視圖，都是非常非常的棒。我還相信很多開發者也都在用Google Chrome Canary這個版本哈，原因無他，只是因為這個版本會有很多正在開發測試的新功能，是面向開發者的，對就是它，它和面向大眾的chrome版本是不衝突的。
那其實chrome devtools的使用網上也有很多很多的教程，它的功能還是非常豐富的。今天我主要想簡單介紹一下chrome devtools 裡面的Timeline，因為這個工具對與網頁的性能優化是必備的。
先上圖，看一下timeline的界面。
timeline的界面由四部分組成。1.控制區, 2.總覽區,3.幀區域,4.細節區。下面詳細說一下這4個區域。
1.控制區。這個區域的最左邊那個小點點一下就可以開始錄製了，右面可以選擇你在錄製過程裡面需要分析的信息。要錄製一個網頁載入，那麼你就點一下這個小點，重新載入一個網頁，timeline就會自動的記錄下來這個重新載入記錄，快捷鍵是Command/Control+shift+R。如果你想錄製你與網頁所做的交互，那麼你可以按下小點後，與網頁進行交互，完成後再按一下就結束錄製了，快捷鍵是Command/Control+E。當錄製結束後，DevTools會自凍猜測你最關心的那一部分並且放大呈現出來，哈，很智能吧？提醒一下錄製的過程中要注意：
- 盡量保證錄製的時間短一點。因為這樣利於你後面的分析。
- 要避免不必要的行為。類似於點擊，網路載入這些不必要的行為，因為這也會增加你分析的複雜度。比如如果你想要錄製一個點擊按鈕後發生的事件，那就不要滾動窗口，不要載入圖片等等。
- 禁用瀏覽器緩存。當錄製網路行為時，最好禁用瀏覽器的緩存，可以從DevTools的設置裡面禁用緩存。
- 禁用拓展插件。chrome的拓展插件會給你的錄製帶來很多無關的干擾，你可以新開一個窗口保證禁用所有拓展插件，也可以在新窗口中打開無痕瀏覽模式。
2.總覽區。這個區域可以看到一個總的信息，這裡面有3個表格組成：FPS,CPU和NET。FPS就是指的每秒多少幀。綠色的柱子越高就代表FPS越高。FPS柱子上面的紅色塊塊表明了這是長時間載入的幀數，很可能就是網頁呈現的阻斷點，需要優化。下面一點的是CPU，這部分圖表表明了是那種類型的事件在佔用CPU資源。最下面那個NET區域，每一個顏色的橫條都代表了一種資源。這個橫條越長，取回資源花費的時間越長。這個橫條中淺色的部分表示的是等待時間，即這個資源從第一次發出請求到下載成功第一個位元組的時間，深色部分表示的是轉換時間，即從第一個位元組下載到最後一個位元組下載成功所用的時間。其中每個顏色所代表的類型分別為：
- 藍色是HTML
- 黃色是Script
- 紫色是Stylesheets
- 綠色是媒體事件
- 灰色是其他雜項
4.細節區。當你在幀區域選中了一個事件，那麼這個區域就會顯示這個事件的詳細信息。當沒有事件選中時，這個區域會顯示在總覽區選中時間段內這些幀數的信息。
Summary這個選項卡會顯示所有的事件總類。其它的標籤就只適用於某些事件了。
好了，文章不易太長（其實是時間有點晚了，太困了╮(￣▽￣)╭），今天先簡單介紹到這裡，明天再補充幾點關於錄製時候的操作。
最後再說一下今天的技術名詞發音。Chrome，音標:[kro?m]，注意最後落音是m，閉著嘴唇。這個還是很好讀的，但我相信很多同學還是不會讀吧，哈哈。因為我以前也是，而且懶得去查o(￣▽￣)ｄ。不過最好的方法還是能去聽一下老外是咋讀的，有時候我感覺聽詞典上發音也不是那麼地道。既然說到瀏覽器，那麼這裡再說一下Mac自帶的瀏覽器Safafi,哈哈我相信這個更多的同學不會讀:）, 音標是[s?fɑ?ri],雖然兩個a，但是注意第一個音[?],第二個音[ɑ?]，而且重音是在第二個音上，哈哈，試著讀一下吧。想聽最地道的發音還是去找一下視頻，看看老外是怎麼發音的吧(｀?′)Ψ。還是希望大家能夠重視自己的技術名詞發音，本來也沒多少詞，地道的發音會讓你與別人交流的時候逼格高一點。
有興趣的同學可以看看我前面寫的關於網頁性能優化的入門介紹。
前端入門之網頁性能優化（一）
前端入門之網頁性能優化（二）
前端入門之網頁性能優化（三）
推薦閱讀：
※前端開發備忘錄（合集）
※macOS Sierra 開發環境配置指南
※前端那些炫酷、實用、又好玩的效果、、、、
※造輪子系列之——定時任務服務