翻譯自：debugging-react-performance-with-react-16-and-chrome-devtools

github的地址 歡迎 star
文章主要介紹了用 Chrome 的工具和基于 react 16的性能分析。

react 是現(xiàn)在前端主要框架之一，不僅因為它出名，更因為它出色的渲染性能。react 的虛擬 DOM 以高效的渲染性能聞名，但是在我們項目會出現(xiàn)根本感受不到 react 高效性能的情況，這是我們該怎么定位，怎么修復(fù)它呢？

今天我將用真實的 react 代碼和 chrome 工具來證實 chrome 新的強大的性能追蹤工具的特性以及怎么用它來診斷出渲染緩慢的組件。

當(dāng)然新的性能工具需要滿足下面3個條件：

在開發(fā)模式中用 React 16

用 source-maps 導(dǎo)出你的 js（這個是可選的，但是強烈推薦你）

使用 Chrome 或者 Chromium’s Dev Tools

在 Chrome 中設(shè)置你的 audit

首先，你需要足夠的空間，最好把開發(fā)者工具彈出來，使它和你的屏幕一樣大，那樣是最好的。

我們應(yīng)該用 chrome 的 audit 功能模擬真實環(huán)境中代碼的運行情況，這是必不可少的。不是每個人都有價值 3000 美元的電腦或者最新的手機。

幸運的是，Chrome 對于設(shè)備模擬覆蓋廣泛，我們能夠降低 javascript 的執(zhí)行速度，通過這個我們能清晰的發(fā)現(xiàn)性能問題，還有額外的好處，如果你能做到在硬件一般的設(shè)備運行快速運行，那么桌面上就能體驗飛一般的感覺。

降低你得設(shè)備至少到 4x 就將和 Motorola Moto G4（摩托羅拉手機）一樣的性能

查看性能跟蹤

在開發(fā)者模式，以及 react 16版本渲染的條件下，它會為每一個組件創(chuàng)建標記與相關(guān)具體的調(diào)用。

首先，打開（本地的）需要測試的頁面，點擊 ‘Start profiling and reload page’ 按鈕，這樣就創(chuàng)建了一個對頁面的性能分析記錄（a performance profiler audit）。

這將會為當(dāng)前頁面記錄性能軌跡。在頁面加載完成幾秒鐘之后，Chrome將會自動停止記錄。

或者，使用鍵盤快捷鍵：?+?E

一旦你開始記錄，你的窗口看起來是這個樣子：

我們能看到一條從左到右的記錄我們頁面加載和初始化的時間軸

我想花一兩秒鐘指出一些對性能工具使用的新人來說不太明顯的事情。

如上圖中①所示，紅色的指示橫條說明在時間軸這部分占用了大量 cpu 資源（較長的任務(wù)執(zhí)行），我們應(yīng)該對這個地方進行分析

performance 頂部窗口圖表使用不同的顏色代表不同類型的活動。每個類別都需要不同的分析，修復(fù)，造成性能的原因也不同。

現(xiàn)在我們先聚焦在“Scripting”（JavaScript運行時性能）

展開窗口，單擊打開用戶計時，用截屏?xí)r間線來分析你的頁面如何繪制的?

接下來我們要去分析那些cpu占用高顯示紅色的部分。我們可以看到在整個性能跟蹤期間頁面渲染的元素。

在圖表區(qū)域拖拽可以縮放時間軸，你注意到 emoji ??了嗎?

一縮放立即就會顯示用戶花費時間信息，然后我們觀察到一個叫 Pulse 的組件，它花費了500ms時間渲染。

在 Pulse 組件的下面，可以看到它的子組件的渲染，盡管組件的大小表明它們渲染不會花費這么長時間。

發(fā)現(xiàn)執(zhí)行慢的函數(shù)

單擊你要分析的組件，在這里就是 Pulse。然后我們只需關(guān)注在 Pulse 組件執(zhí)行緩慢的部分。

選擇性能開發(fā)工具中 “Bottom-Up”.

按照總時間（total time）從高到低排序，當(dāng)然，你也可以按照自己本身時間（Self time）或者除了 URL 以外東西排序。總之，怎么適合你分析，怎么排序最好。

在你需要分析代碼的地方有個箭頭，點擊它，在這里就是 map 看起來是可疑的。它被調(diào)用了很多次，總共執(zhí)行時間為 90ms。

這就是你為什么需要sourcemaps的原因：點擊 MetricStore.js:59將會打開代碼并定位到59行

在代碼執(zhí)行花費較長的左邊就會有一個時間標識（大概這不是我向世界展示我代碼的最佳時機）

當(dāng)你知道怎么原因改進它是簡單的

在過去的幾周里，我通過這樣的方法實現(xiàn)了之前很復(fù)雜，需要花費很多解決的代碼的優(yōu)化工作。現(xiàn)在我完全知道如何以及在哪里尋找 JavaScript 性能問題。我也確信在未來我能寫出更好的代碼。

... 廣告濾過 ...

為什么 React 的分析工具會在 Chrome 里面？

在react內(nèi)部，react發(fā)布的這些工具也是通過 User Timing API，它就會在你的代碼里面添加時間標記，而Chrome利用User Timing API實現(xiàn)這個功能。

想象一下一個組件初始化花費 0.4s，用戶點擊購買按鈕花費 15s 時間

關(guān)于 User Timing API 的介紹，可以看看 Alex Danilo在2014年發(fā)表的 User Timing API，這是名副其實的HTML5 基石的文章。

所有的主流瀏覽器都已經(jīng)支持 User Timing API，但是在 Chrome 中通過 debugging 更簡單方便調(diào)試一個 React 應(yīng)用還需要走一段時間的路。

最優(yōu)化你的 JavaScript

我衷心的希望這篇文章能夠提升你性能分析的水平。請留下評論，分享你學(xué)到的東西或者改進你的應(yīng)用的方法?！

如果有錯誤或者不嚴謹?shù)牡胤?#xff0c;請務(wù)必給予指正，十分感謝!

參考

developers.google.com/web/tools/c…

總結(jié)

以上是生活随笔為你收集整理的【译】用 Chrome 开发者工具以及 react 16 版本分析性能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。