Chrome 開發者工具 —— Performance 快速入門

原文連接： https://developers.google.com...
若是你想學會如何使用 Chrome 的 Performance 來分析頁面性能，而你又沒法使用 Google，也許這篇文章能幫到你。
這篇文章將教會你如何使用 Performance 面板來分析瀏覽器運行時的性能。
github 地址： https://github.com/hewq/blog/...
相關文章： https://github.com/hewq/blog/...

開始

在本教程中，你將在 Chrome 瀏覽器的開發者工具中，使用 Performance 面板查找頁面性能瓶頸。

1. 打開 Chrome 的無痕模式。無痕模式可以確保瀏覽器在沒有其餘干擾的環境中運行。好比，若是你的 Chrome 安裝了不少插件，這些插件可能會干擾到性能的評估。
2. 在無痕窗口中打開 https://hewq.github.io/apps/a...，這是一個用來分析性能的 Demo。
3. 按下Command+Option+I(Mac)或者Control+Shift+I(Windows, Linux)打開開發者工具。

模擬手機 CPU

手機的 CPU 性能比起電腦的要差一些，因此當你分析頁面的時候能夠經過限制 CPU 來模擬頁面在手機上的表現。

1. 在開發者工具中，點擊 Performance。
2. 勾選 Screenshots 複選框。
3. 點擊右邊的 Capture Settings

，將會看到有關性能指標的設置。

1. 在 CPU 那一欄，選擇 2x slowdown （新版本的 Chrome 可能只有 4x slowdown 和 6x slowdown）。限制 CPU 比正常狀況下慢 2 倍。

設置 Demo

很難作到打開該頁面的全部用戶都能有同樣的性能演示，因此你能夠手動設置，不管使用哪一種設置，確保你的體驗和本教程中看到的屏幕截圖和說明相近。

1. 持續點擊 Add 10，直到藍色方塊的移動明顯變慢。
2. 點擊 Optimize，藍色方塊將移動得更快更順滑。
3. 點擊 Un-Optimize，藍色方塊的移動又會變慢變卡。

記錄運行時的性能

當你開啓優化（Optimize）的時候，藍色的方塊比沒有開啓優化（Un-Optimize）時移動更快。爲何會這樣？兩個版本都是在相同的時間內將方塊移動到相同位置。在 Performance 中進行記錄，以瞭解如何檢測未優化版本的性能瓶頸。

1. 點擊 Record

。開發者工具將會記錄頁面運行時的性能指標。

1. 等待幾秒鐘。
2. 點擊 Stop。開發者工具中止記錄，處理數據，而後顯示結果。

是否是看到了不少眼花繚亂的數據無從下手，不用擔憂，接下來你就能學會如何分析這些數據。

結果分析

記錄了頁面性能以後，就能夠衡量頁面的性能有多差，並找出緣由。

分析 frames per second（FPS）

衡量動畫的主要指標就是 frames per second（FPS）。當動畫以 60 FPS 運行的時候，用戶就會以爲很順滑。

1. 查看 FPS 圖表。當你看到 FPS 上面的紅色條時，就表示幀速率降低得很低，可能會影響用戶的體驗。通常來講，綠色條越高，FPS 越高。
2. 在 FPS 圖表下面有個 CPU 圖表。CPU 圖表中的顏色和下方 Summary 的顏色時相對應的。CPU 圖表充滿顏色意味着在記錄過程當中，CPU 的使用已經達到最大值。當你看到 CPU 長時間處於滿負荷狀態時，你應該想辦法下降 CPU 的使用。
3. 鼠標放到 FPS、CPU 或者 NET 圖表上，開發者工具將顯示出該時間點的頁面截圖。將鼠標從左到右移動，就能夠從新看到記錄過程當中頁面的渲染狀況。這對於手動分析動畫的進度頗有用。
4. 在 Frames 部分，將鼠標放到任意一個綠色方塊上面，你就能看到指定幀的 FPS。每一幀均可能遠低於 60 FPS。

固然，在這個 Demo 中，頁面性能很差是很明顯的。可是在實際狀況下，可能並非那麼容易分辨，因此有這些工具進行測量就很是方便了。

打開 FPS 顯示器

另外一個方便的工具就是 FPS 顯示器，它能夠在頁面運行時顯示 FPS 的實時數據。

1. 按下Command+Shift+P（Mac）或者Control+Shift+P（Windows, Linux）打開命令菜單。
2. 在命令菜單中輸入Rendering，選擇 Show Rendering。
3. 在 Rendering 選項下，選中 FPS Meter（或者 Frame Rendering Stats）, FPS 的實時數據就會顯示出來。

找到性能瓶頸

如今，你已經測量並驗證了動畫效果不佳，接下來要回答的問題就是：爲何？

1. 留意 Summary 選項，若是沒有選擇任何事件，這裏就會顯示活動的細分。這個頁面在渲染上花費了大部分的時間，由於性能是一門減小工做量的藝術，因此你的目標是減小頁面渲染所花費的時間
2. 展開 Main 部分。你將看到主線程隨時間變化的火焰圖。x 軸表示隨時間變化的記錄，每一條表明一個事件，寬度越長表示花費的時間越多。y 軸表示的是調用棧。當你看到事件相互疊加時，表明上面的事件觸發了下面的事件。
3. 經過單擊，在概述上（包含 FPS、CPU 和 NET 圖表的那部分）按住並拖動鼠標來放大單個 Animation Frame Fired 事件。Main 和 Summary 部分會只顯示所選部分的信息。

*縮放的另外一種方法是經過單擊主要部分的背景或選擇一個事件來聚焦主要部分，而後按W，A，S和D鍵。

1. 留意 Animation Frame Fired 右上角的三角形，這是一個警告，每當你看到這個三角形時，說明可能存在與此事件相關的問題。

*每當執行requestAnimationFrame（）回調時，都會觸發 Animation Frame Fired 事件。

1. 點擊 Animation Frame Fired 事件，Summary 裏會顯示與該事件相關的信息。留意 reveal 連接，點擊該連接，能夠看到觸發 Animation Frame Fired 的事件。同時留意 app.js:94（app.js:81） 這個連接，點擊會跳到源代碼中的相關行。

*選擇事件後，使用箭頭鍵選擇它旁邊的事件。

1. 在 app.update 下面，有一堆紫色的事件，若是它們足夠寬，看上去好像每個上面都有一個紅色三角形。點擊紫色的 Layout 事件，Summary 中顯示了更多關於該事件的信息。實際上，是一個關於強制迴流（佈局）的警告。
2. 在 Summary 中點擊 Layout Forced 下的 app.js:70（app.js:57） 定位到強制迴流的代碼上。

*這個代碼的問題是，在每一個動畫幀中，它會更改每一個方塊的樣式，而後查詢頁面上每一個方塊的位置。由於樣式發生了變化，瀏覽器不知道每一個正方形的位置是否發生了變化，所以必須從新佈局正方形以計算其位置。

須要瞭解的內容有不少，可是如今你已經有了分析運行時性能的基本流程的基礎。加油！

分析優化版本

使用剛剛學到的工具和流程，點擊頁面上 Optimize 啓用優化後的代碼，獲取另外一個性能記錄，而後分析結果。從提升幀率到 Main 火焰圖中事件的減小，你能夠看到，優化後的頁面工做量大大減小，從而提升了性能。

*即便這個「優化」版本也不是那麼好，由於它仍然操縱每一個正方形的 top 屬性。更好的方法是使用隻影響合成層的屬性。