使用chrome開發者工具中的performance面板解決性能瓶頸

使用chrome開發者工具中的performance面板解決性能瓶頸

前面的話

　　使用Chrome DevTools的performance面板能夠記錄和分析頁面在運行時的全部活動。本文將詳細介紹如何使用performance面板解決性能瓶頸

準備

【匿名模式】

　　匿名模式能夠保證Chrome在一個相對乾淨的環境下運行。好比安裝了許多chrome插件，這些插件可能會影響咱們分析性能表現

　　使用快捷鍵ctrl + shift + N 便可代碼匿名模式下的chrome新標籤頁

【移動設備CPU】

　　移動設備的CPU通常比臺式機和筆記本弱不少。分析頁面時，能夠用CPU控制器（CPU Throttling）來模擬移動端設備CPU

　　在DevTools中，點擊 Performance 的 tab。 確保 Screenshots checkbox 被選中；點擊 Capture Settings（⚙️）按鈕，DevTools會展現不少設置，來模擬各類情況；對於模擬CPU，選擇4x slowdown，因而Devtools就開始模擬4倍低速CPU

概覽

【組成】

　　performance面板有以下四個窗格：

　　一、controls。開始記錄，中止記錄和配置記錄期間捕獲的信息

　　二、overview。頁面性能的高級彙總

　　三、火焰圖。 CPU 堆疊追蹤的可視化

　　四、統計彙總。以圖表的形式彙總數據

【顏色表示】

HTML 文件爲藍色

腳本爲黃色

樣式表爲紫色

媒體文件爲綠色

其餘資源爲灰色

【作記錄】

　　打開想要記錄的頁面，而後從新加載頁面。 performance面板會自動記錄頁面從新加載。

要記錄頁面交互，打開 performance 面板，而後按Record按鈕  或者鍵入鍵盤快捷鍵Cmd+E(Mac) 或Ctrl+E(Windows / Linux)，開始記錄。記錄時，Record按鈕會變成紅色。執行頁面交互，而後按Record按鈕或再次鍵入鍵盤快捷鍵中止記錄

　　完成記錄後，DevTools 會猜想哪一部分記錄最相關，並自動縮放到那一個部分

查看

【Overview】

　　Overview窗格包含如下三個圖表：

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

　　二、CPU。 CPU 資源。此面積圖指示消耗 CPU 資源的事件類型

　　三、NET。每條彩色橫槓表示一種資源。橫槓越長，檢索資源所需的時間越長。 每一個橫槓的淺色部分表示等待時間（從請求資源到第一個字節下載完成的時間）

能夠放大顯示一部分記錄，以便簡化分析。使用Overview窗格能夠放大顯示一部分記錄。 放大後，火焰圖會自動縮放以匹配同一部分

選擇部分後，可使用W、A、S和D鍵調整您的選擇。W和S分別表明放大和縮小。A和D分別表明左移和右移

【火焰圖】

在火焰圖上看到一到三條垂直的虛線。藍線表明DOMContentLoaded事件。 綠線表明首次繪製的時間。 紅線表明load事件

在火焰圖中選擇事件時，Details窗格會顯示與事件相關的其餘信息

診斷

【JS】

　　JavaScript 計算，特別是會觸發大量視覺變化的計算會下降應用性能。 不要讓時機不當或長時間運行的 JavaScript 影響用戶交互

　　下面是一些常見 JavaScript 問題

　　一、大開銷輸入處理程序影響響應或動畫

　　讓瀏覽器儘量晚地處理觸摸和滾動，或者綁定偵聽

　　二、時機不當的 JavaScript 影響響應、動畫、加載

使用requestAnimationFrame、使 DOM 操做遍及各個幀、使用網絡工做線程

　　三、長時間運行的 JavaScript 影響響應

將純粹的計算工做轉移到web worker中。若是須要 DOM 訪問權限，配合使用requestAnimationFrame

【樣式】

　　樣式更改開銷較大，在這些更改會影響 DOM 中的多個元素時更是如此。 只要將樣式應用到元素，瀏覽器就必須肯定對全部相關元素的影響、從新計算佈局並從新繪製

點擊Recalculate Style事件（以紫色顯示）能夠在Details窗格中查看更多相關信息。 若是樣式更改須要較長時間，對性能的影響會很是大。 若是樣式計算會影響大量元素，則須要改進另外一個方面

要下降Recalculate Style事件的影響，使用一些對渲染性能的影響較小的屬性。如使用 transform 和 opacity 屬性更改來實現動畫，使用will-change或translateZ提高移動的元素

　　下面是一些常見的CSS問題

　　一、大開銷樣式計算影響響應或動畫

　　任何會更改元素幾何形狀的 CSS 屬性，如寬度、高度或位置；瀏覽器必須檢查全部其餘元素並重作佈局。避免會觸發重排的CSS屬性

　　二、複雜的選擇器影響響應或動畫

　　嵌套選擇器強制瀏覽器瞭解與全部其餘元素有關的所有內容，包括父級和子級。儘可能在CSS中引用只有一個類的元素

【重排】

佈局（或重排）是瀏覽器用來計算頁面上全部元素的位置和大小的過程。 網頁的佈局模式意味着一個元素可能影響其餘元素；例如body元素的寬度通常會影響其子元素的寬度以及樹中各處的節點等等。這個過程對於瀏覽器來講可能很複雜。 通常的經驗法則是，若是在幀完成前從 DOM 請求返回幾何值，將發現會出現「強制同步佈局」，在頻繁地重複或針對較大的 DOM 樹執行操做時這會成爲性能的大瓶頸。

performance面板能夠肯定頁面什麼時候會致使強制同步佈局。 這些Layout事件使用紅色豎線標記

　　「佈局抖動」是指反覆出現強制同步佈局狀況。 這種狀況會在 JavaScript 從 DOM 反覆地寫入和讀取時出現，將會強制瀏覽器反覆從新計算佈局

【重繪】

　　繪製是填充像素的過程。這常常是渲染流程開銷最大的部分。 若是在任何狀況下注意到頁面出現卡頓現象，頗有可能存在繪製問題。

　　合成是將頁面的已繪製部分放在一塊兒以在屏幕上顯示的過程。 大多數狀況下，若是堅持僅合成器屬性並避免一塊兒繪製，性能會有極大的改進，可是須要留意過多的層計數

　　必定不要使用下面的代碼

* {

  will-change: transform;

  transform: translateZ(0);

}

　　這是以迂迴方式說想要提高頁面上的每一個元素。此處的問題是建立的每一層都須要內存和管理，而這些並非免費的。事實上，在內存有限的設備上，對性能的影響可能遠遠超過建立層帶來的任何好處。每一層的紋理都須要上傳到 GPU，使 CPU 與 GPU 之間的帶寬、GPU 上可用於紋理處理的內存都受到進一步限制

　　若是大部分渲染時間花費在繪製上，即表示存在繪製問題

　　下面是一些常見的繪製問題

　　一、繪製風暴影響響應或動畫

　　較大的繪製區域或大開銷繪製影響了響應或動畫，要避免繪製、提高將要移動到自有層的元素，使用變形和不透明度

　　二、層數激增影響動畫

　　使用 translateZ(0) 過分提高過多的元素會嚴重影響動畫性能，要謹慎提高到層，而且僅在瞭解這樣會有切實改進時才提高到層