|
谷歌瀏覽器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以及渲染沒什麼關係。 選擇一個幀範圍可以查看這個範圍內幀的一些數據，如下：  八.內存模式: 內存視圖會通過一個圖表顯示您的頁面隨着時間的推移所使用的內存，你可以查看每個時間段的內存使用量，並找出性能問題。  |