chrome開發者工具淺析--timeline

 

1、概述                                                                                                        

       用戶都但願他們訪問的web應用是可交互且運行流暢的。所以，做爲web開發者，也要在這方面多花點功夫。咱們所作的頁面，不但要能被快速加載，還要能流暢運行：頁面的滾動要快速響應手指的動做，動畫和交互效果更要如絲般順滑。

       這樣一來，想要編寫高性能的web站點就須要充分了解瀏覽器如何處理html/js/css，從而能夠確保代碼是高效的。

2、FPS和性能優化的必要

       FPS是每秒刷新頻率，目前大多數設備的屏幕刷新率都是 60次/秒 ，若是在頁面中有一個動畫或漸變效果，或者用戶正在滑動頁面，那麼瀏覽器渲染動畫或頁面的每一幀的速率都要保持16毫秒（1秒 / 60 = 16.66毫秒）以內完成。

1.頁面渲染過程

       但實際上，在渲染某一幀畫面的同時，瀏覽器還有一些額外的工做要作（好比渲染隊列的管理，渲染線程與其餘線程之間的切換等等）。所以單純的渲染工做，通常須要控制在10毫秒以內完成，才能達到流暢的視覺效果。若是超過了這個時間限度，頁面的渲染就會出現卡頓效果，也就是常說的jank，它是很糟糕的用戶體驗。

       頁面轉化爲屏幕上的像素大體要經歷如下五個階段：

      

       從左到右依次是JS，樣式，佈局，繪製，渲染層合併。

       a.繪製：本質上就是填充像素的過程。第一步是建立一系列draw調用；第二步填充像素，也稱爲（rasterization）光柵化

       b渲染層合併：指瀏覽器會將全部層按照合理的順序合併成一個圖層，而後顯示在屏幕上。

3、性能優化提高的方法

1.優化javascript的執行效率

1.1對於動畫效果的實現，避免使用setTimeout或setInterval，請使用requestAnimationFrame

/**

function updateScreen(time) {

  // Make visual updates here.

}

requestAnimationFrame(updateScreen);

 

1.2把耗時長的JavaScript代碼放到Web Workers中去作

1.3把DOM元素的更新劃分爲多個小任務，分別在多個frame中去完成

1.4使用Chrome DevTools的Timeline和JavaScript Profiler來分析JavaScript的性能

2.下降樣式計算的範圍和複雜度

       在最壞的狀況下，樣式計算量 = 元素個數 x 樣式選擇器個數。由於對每一個元素最少須要檢查一次全部的樣式，以確認是否匹配。

2.1 下降樣式選擇器的複雜度；使用基於class的方式，好比BEM

2.2減小須要執行樣式計算的元素的個數

2.3使用DevTools，選擇Timeline標籤，點擊左上角紅色record按鈕

3.避免大規模複雜的佈局

       佈局是瀏覽器計算DOM元素的幾何信息的過程：元素大小和在頁面中的位置。佈局的時間消耗主要在於：須要佈局的DOM元素的數量；佈局過程的複雜程度。

3.1應該儘量避免觸發佈局：DOM元素的幾何屬性的修改都須要從新佈局

4.簡化繪製的複雜度、減小繪製區域

5.優先使用渲染層合併屬性、控制層的數量

6.對用戶輸入時間的處理去

4、chrome控制檯工具

       控制檯，也稱開發者工具，是瀏覽器自帶的一種調試工具。目前主流的控制檯有：火狐的firebug，chrome開發工具，用於safiri的調試工具。

       用chrome瀏覽器打開任意網頁點擊F12或者點擊鼠標右鍵選擇「審查元素」均可以打開控制檯。本文以500主站做爲範例，點擊F12出現控制檯，以下圖所示：

整體有八個工具可供查看：元素，資源，網絡，源，時間表，簡介，審覈，控制檯。可使用 Ctrl + [ 和 Ctrl + ] 快捷鍵在面板之間移動。

Chrome每一個模塊及其主要功能爲：

Element ： 用於查看和編輯當前頁面中的 HTML 和 CSS 元素。

Network ：用於查看 HTTP 請求的詳細信息，如請求頭、響應頭及返回內容等。

Source ：用於查看和調試當前頁面所加載的腳本的源文件。

TimeLine ： 用於查看腳本的執行時間、頁面元素渲染時間等信息。

Profiles ：用於查看 CPU 執行時間與內存佔用等信息。

Resource ：用於查看當前頁面所請求的資源文件，如 HTML，CSS 樣式文件等。

Audits ：用於優化前端頁面，加速網頁加載速度等。

Console ：用於顯示腳本中所輸出的調試信息，或運行測試腳本等。

 

本文主要講時間表timeline

 時間表TimeLine

       每個寫進頁面的資源都會有本身的渲染繪畫結果，於是呈現了咱們眼中很美的網頁。可是也會消耗咱們的資源，例如寬帶，CPU，或者時間。資源被生成的時候就註定了週期，請求聲明週期的主要階段以下圖所示:

 

時間表能夠記錄和運行分析應用程序全部的活動，爲了使的記錄頁面的交互，打開時間軸面板，而後按開始錄製錄製按鈕（），或者經過鍵入鍵盤快捷鍵Cmd的 +E（Mac）或按Ctrl +E（Windows / Linux版）。這個記錄按鈕會從灰色變成紅色，而Timeline將開始從你的頁面獲取時間線（timeline）。在你的應用中完成一些操做，記錄到一些數據以後，再一次點擊按鈕來中止記錄。

請注意：會清除你現有的記錄會話，以便開始一個新的會話。將會強迫V8完成一輪的垃圾回收，在調試中它頗有用。將會對顯示的詳細信息進行過濾，只顯示那些完成耗時超過15ms的記錄

首先看一下timeline的主要目錄：

       紅色的點旁邊是清除記錄。後面的選項能夠選擇須要capture捕獲的項。分別是網絡，JS簡介，截圖，存儲，描繪。

       展現方式有兩種：左邊是幀模式，右邊是事件event模式. 幀模式能夠深刻到每一幀生成的內部細節。事件模式能夠查看影響性能的成本要素優先級排序。

下圖是一個任選的一個網頁打開的時間表：

 

       第一個框裏是概述，這裏能夠大體看到頁面的性能。

       第二個框裏是event，便是事件監控。這是CPU的堆棧跟蹤的可視化，綠色表示媒體時間，紅色表示負載事件，藍色表示DOM事件。

       第三個框裏表示存儲

       第四個框裏是詳細信息，這裏會顯示事件的詳細信息。

在這個模式中，Summary視圖(在Timeline的頂部)顯示了一些水平的柵欄，分別表明頁面中的網絡和HTML解析(藍色)，JavaScript(黃色)，樣式重計算和佈局(紫色)以及繪畫和合成(綠色)事件。重繪是瀏覽器事件，是爲響應諸如窗口大小改變或者滾動之類的視覺變化而調用的。

       在Summary視圖下面是Details視圖，包含了某個會話被記錄後，相關類別的記錄的詳細內容。

     每個記錄在左側有用於說明的標題，右側是時間軸區域。鼠標移到一個記錄之上，會顯示更多的提示信息，其中包括從開始錄製到結束的時間

 

3.CPU。CPU資源。此區域圖指明瞭事件的類型消耗的CPU資源。

       當選擇了一個事件火焰表中，詳細信息窗格顯示有關該事件的更多信息，以下圖所示：

       上圖可見加載時間0.02s，腳本15.68s，渲染時間11.28s，繪製時間46.06s，其餘時間49.06s，空閒1.27s時間。

上圖是總表。下圖是詳細彙總表。

 

4、其餘的功能

1.鏈接安卓手機調試代碼

       須要手機和電腦有chrome瀏覽器，安卓手機鏈接USB至PC

1.1在手機開發者工具中選擇容許USB調試

1.2打開chrome://inspect/#devices，選擇容許USB調試

會檢測到可用的安卓手機和安卓手機打開的頁面，也能夠本身輸入url，以下圖所示：

1.3點擊 圖片中的inspect,便可進入手機頁面的調試狀態。

這樣就能夠在電腦上操做和調試手機頁面了。

 

因筆者水平有限，有參考大神文章，若是想了解更多能夠查看如下連接：

http://wiki.jikexueyuan.com/project/chrome-devtools/overview.html

http://www.ibm.com/developerworks/cn/web/1410_wangcy_chromejs/

https://developers.google.com/web/fundamentals/performance/rendering/

附連接瀏覽器開發峯會：https://youtu.be/RCFQu0hK6bU