JS程式碼優化一：谷歌瀏覽器的timeline工具的使用
阿新 • • 發佈：2018-12-31
谷歌瀏覽器Timeline用法詳解:
大家都知道，谷歌瀏覽器自帶的相關工具是前端開發人員的利器。
點選F12會彈出一個介面，頂部帶有功能的選項卡，其中有幾個功能強大，但是相對較為複雜，比如Timeline,console和network。
（1）.關於console的使用可以參閱谷歌控制檯console相關命令介紹一章節。
（2）.關於network的使用可以參閱谷歌瀏覽器network用法詳解一章節。
近期發現一片介紹關於Timeline用法的文章，下面和大家做一下分享，下面進入正題。
一.簡單介紹:
Timeline工具欄提供了對於在裝載你的Web應用的過程中，時間花費情況的概覽，這些應用包括處理DOM事件, 頁面佈局渲染或者向螢幕繪製元素。Timeline可以通過事件，框架，和實時記憶體用量3個方面的資料來監測網頁，通過這些資料，我們可以方便的找出頁面中存在問題的地方。
二.面板介紹:
開啟chrome開發者工具，切換到Timeline選項卡，介面如下:
下面介紹一下各個按鈕的作用:
工具預設是不開啟記錄的，如果要分析頁面，請點選圓形的記錄按鈕，按鈕變紅後就可以開始記錄頁面的各個事件了，這個時候可以在頁面上做各種操作，Timeline工具會詳細的記錄下各類事件。建議不要記錄太久，太多會增加分析的難度。
三.顏色的屬性:
Timeline工具裡面使用是4種顏色來表示不同類別的事件:
藍色：載入；
黃色：指令碼；
紫色：渲染；
綠色：繪製
四.過濾:
過濾面板可以對不同型別的事件和花費時間進行過濾，非常好用：
五.事件模式:
在這個模式中，Summary檢視(在Timeline的頂部)顯示了一些水平的柵欄，分別代表頁面中的網路和HTML解析(藍色)，JavaScript(黃色)，渲染(紫色)以及繪製(綠色)事件。重繪是瀏覽器事件，是為響應諸如視窗大小改變或者滾動之類的視覺變化而呼叫的。
我們可以在最上面灰色的時間節點哪裡拖動來選擇檢視的記錄範圍，如下圖：
在DETAILS面板中可以檢視該記錄範圍內各型別事件的時間開銷：
other表示其它事件花費的時間，Idle表示空閒時間，也可以在DETAILS面板中檢視單個記錄的時間開銷，如下：
六.名詞解釋:
（1）.send request:傳送請求。
（2）.evaluate script:評估指令碼。
（3）.parse html:解析html。
（4）.recalculate style:重新計算顯示樣式。
（5）.layout:計算佈局。
（6）.paint setup:繪製設定【準備繪製】。
（7）.paint:繪製。
（8）.composite layers:組合層。
（9）.timer fired:觸發定時器。
（10）.function call:函式呼叫。
（11）.receive data:接收資料。
（12）.receive response:接收響應。
（13）.finish loading:結束載入。
（14）.GC event:瀏覽器垃圾回收。
（15）.pevaluate script:評估指令碼。
（16）.rasterize:光柵化。
七.幀模式:
幀模式能讓我們深入的瞭解頁面的渲染效能，“幀”表示瀏覽器要呈現的內容顯示到單個幀所必須做的工作，如執行 JavaScript、 處理事件、 更新 DOM 和更改的樣式、 佈局和繪製。
目前大多數的顯示器的重新整理頻率是60Hz，那麼我們頁面的繪製頻率能達到60幀每秒是最好的，因為軟體幀和硬體的重新整理頻率一致的話，頁面能給人非常流暢的感覺，否則就會感覺到很卡，這樣我們大概有16.6ms（1000/60）來完成每一幀的呈現，這就是很多人說的“16.6ms”優化。
灰色的區域有點難理解，你可以理解是瀏覽器內部c++的一些工作，這部分可能和前端的js以及渲染沒什麼關係。
選擇一個幀範圍可以檢視這個範圍內幀的一些資料，如下：
八.記憶體模式:
記憶體檢視會通過一個圖表顯示您的頁面隨著時間的推移所使用的記憶體，你可以檢視每個時間段的記憶體使用量，並找出效能問題。
大家都知道，谷歌瀏覽器自帶的相關工具是前端開發人員的利器。
點選F12會彈出一個介面，頂部帶有功能的選項卡，其中有幾個功能強大，但是相對較為複雜，比如Timeline,console和network。
（1）.關於console的使用可以參閱谷歌控制檯console相關命令介紹一章節。
（2）.關於network的使用可以參閱谷歌瀏覽器network用法詳解一章節。
近期發現一片介紹關於Timeline用法的文章，下面和大家做一下分享，下面進入正題。
一.簡單介紹:
Timeline工具欄提供了對於在裝載你的Web應用的過程中，時間花費情況的概覽，這些應用包括處理DOM事件, 頁面佈局渲染或者向螢幕繪製元素。Timeline可以通過事件，框架，和實時記憶體用量3個方面的資料來監測網頁，通過這些資料，我們可以方便的找出頁面中存在問題的地方。
二.面板介紹:
開啟chrome開發者工具，切換到Timeline選項卡，介面如下:
下面介紹一下各個按鈕的作用:
工具預設是不開啟記錄的，如果要分析頁面，請點選圓形的記錄按鈕，按鈕變紅後就可以開始記錄頁面的各個事件了，這個時候可以在頁面上做各種操作，Timeline工具會詳細的記錄下各類事件。建議不要記錄太久，太多會增加分析的難度。
三.顏色的屬性:
Timeline工具裡面使用是4種顏色來表示不同類別的事件:
藍色：載入；
黃色：指令碼；
紫色：渲染；
綠色：繪製
四.過濾:
過濾面板可以對不同型別的事件和花費時間進行過濾，非常好用：
五.事件模式:
在這個模式中，Summary檢視(在Timeline的頂部)顯示了一些水平的柵欄，分別代表頁面中的網路和HTML解析(藍色)，JavaScript(黃色)，渲染(紫色)以及繪製(綠色)事件。重繪是瀏覽器事件，是為響應諸如視窗大小改變或者滾動之類的視覺變化而呼叫的。
我們可以在最上面灰色的時間節點哪裡拖動來選擇檢視的記錄範圍，如下圖：
在DETAILS面板中可以檢視該記錄範圍內各型別事件的時間開銷：
other表示其它事件花費的時間，Idle表示空閒時間，也可以在DETAILS面板中檢視單個記錄的時間開銷，如下：
六.名詞解釋:
（1）.send request:傳送請求。
（2）.evaluate script:評估指令碼。
（3）.parse html:解析html。
（4）.recalculate style:重新計算顯示樣式。
（5）.layout:計算佈局。
（6）.paint setup:繪製設定【準備繪製】。
（7）.paint:繪製。
（8）.composite layers:組合層。
（9）.timer fired:觸發定時器。
（10）.function call:函式呼叫。
（11）.receive data:接收資料。
（12）.receive response:接收響應。
（13）.finish loading:結束載入。
（14）.GC event:瀏覽器垃圾回收。
（15）.pevaluate script:評估指令碼。
（16）.rasterize:光柵化。
七.幀模式:
幀模式能讓我們深入的瞭解頁面的渲染效能，“幀”表示瀏覽器要呈現的內容顯示到單個幀所必須做的工作，如執行 JavaScript、 處理事件、 更新 DOM 和更改的樣式、 佈局和繪製。
目前大多數的顯示器的重新整理頻率是60Hz，那麼我們頁面的繪製頻率能達到60幀每秒是最好的，因為軟體幀和硬體的重新整理頻率一致的話，頁面能給人非常流暢的感覺，否則就會感覺到很卡，這樣我們大概有16.6ms（1000/60）來完成每一幀的呈現，這就是很多人說的“16.6ms”優化。
灰色的區域有點難理解，你可以理解是瀏覽器內部c++的一些工作，這部分可能和前端的js以及渲染沒什麼關係。
選擇一個幀範圍可以檢視這個範圍內幀的一些資料，如下：
八.記憶體模式:
記憶體檢視會通過一個圖表顯示您的頁面隨著時間的推移所使用的記憶體，你可以檢視每個時間段的記憶體使用量，並找出效能問題。