Chrome 性能監測

前端性能優化一直是前端工做中必不可少的一部分，可是咱們如何知道哪些部分的性能有優化的空間呢？此時，Chrome 性能監測就派上用場了。

正所謂：知己知彼，百戰百勝，只有肯定了性能瓶頸，纔能有條不紊地進行前端性能優化工做。

Performance

Performance 是 Chrome 開發者工具中的一個功能，用於記錄網頁從初始化到運行時的全部性能指標。

使用 Performance 以前，咱們須要先打開 Chrome 的無痕模式，由於，身爲開發者，Chrome 上通常都有着大量的 Chrome 插件，而 Chrome 插件會顯著影響頁面的性能。因此，咱們須要進入無痕模式來規避 Chrome 插件對頁面性能的影響。

進入無痕模式後，咱們打開須要進行性能監測的網站，開啓 Chrome 開發者工具，點擊 Performance 選項卡，進入面板。此時的面板什麼都沒有，只有幾個操做提示。

接下來，咱們點擊左上角的 Record（小圓點）按鈕，Performance 進入 Record 階段，今後刻開始，它會記錄用戶的交互以及這些交互對頁面性能數據的影響。當交互完成後，點擊 Stop 來中止 Record ，Performance 面板會展現出剛纔錄製的頁面性能數據。以下所示：

拿到 Performance 性能報告，首先，咱們先看頂部的三個數據：FPS、CPU 以及 NET。

1. FPS：主要和動畫性能有關，表明每秒幀數。圖表中的綠色長條越高，說明FPS越高，用戶體驗越好。若是其中有紅色長條，表明着這部分幀數有卡頓，須要優化。
2. CPU：和底部的 Summary 對應，顯示了頁面加載過程當中，各階段對 CPU 的佔用時間，佔用時間越多，表明該階段越須要優化。在 Performance 中，該部分是最須要關注的指標之一。
3. NET：主要展現了網絡請求的前後順序以及各自的請求耗時，能夠被 Network 面板完美替代，建議直接查看 Network。

接下來，咱們來了解一下最雜亂的中間部分，通常狀況下，咱們主要根據中間部分中 Main 的圖表來分析頁面性能。

因爲 Main 的圖表長得像一團團倒立的火焰，因此，咱們將其稱爲火焰圖。它展示了主線程在 Record 過程當中作的全部事情，包括：Loading、Scripting、Rendering、Painting 等等。火焰圖的橫軸表明着時間，縱軸表明着調用堆棧。每個長條表明執行了一個事件或函數，長條的長度表明着耗時的長短，若是某個長條右上角是紅色的則表示該函數存在性能問題，須要重點關注。

活用 Performance，按照 Chrome 的提示進行優化，能夠解決掉絕大部分的性能問題。

Performance monitor

看起來，Performance 提供的性能監測功能已經較爲完備，可是，它有兩個問題：

1. 數據缺乏實時性
2. 數據面板過於複雜，不夠直觀

爲了解決這兩個問題，Chrome 提供了 Performance monitor 功能，以實時直觀的數據展現頁面性能。

相比 Performance ，Performance monitor 所在的位置較爲隱蔽，須要如下幾個步驟才能打開：

1. 打開 Chrome 開發者工具
2. 按「Esc」，打開附加面板
3. 點擊選項按鈕，打開選項菜單
4. 選擇「Performance monitor」

因爲 Performance monitor 是實時的，因此，進入面板後，Performance monitor 將會自動運行，記錄頁面性能數據，經過點擊左側的選項，能夠調整記錄的數據類型。

相比 Performance，Performance monitor 的功能雖然不夠全面，但勝在簡潔、實時。一般狀況下，能夠經過 Performance monitor 來分析頁面使用過程當中的性能問題，例如：動畫性能等。

Audits

雖然 Performance 以及 Performance monitor 提供了大量性能數據，可是，若是開發者經驗不足，複雜的性能數據無異於天書。那麼，Chrome 能不能自動分析出頁面的性能缺陷，給出具體的性能優化點呢？萬幸，Chrome 提供了 Audits。

Audits 源於著名的開源自動化分析插件——Lighthouse，Lighthouse 不只可以分析頁面性能，還可以對 PWA、無障礙訪問、SEO 等進行測試評分，並給出優化建議。爲了方便開發者使用，在 Chrome 60 版本，Chrome 開發團隊直接將其加入 Chrome 開發者工具中的 Audits 面板中。

Lighthouse 轉正以後，使用該功能不須要安裝額外的 Chrome 插件，只須要進入 Audits 面板，點擊 Run audits 按鈕便可生成一份頁面分析報告，以下所示：

經過結果能夠看到，Audits 不只可以自動分析出頁面的缺陷，還能根據缺陷給出具體的優化建議。這就意味着，使用了 Audits 以後，咱們只須要按照 Audits 給出的優化建議逐條嘗試，便可大幅度提升頁面性能，實乃前端偷懶神器~

彩蛋

以前咱們一直說的是基於 Chrome 瀏覽器的性能監測方案，可是，其實還有一種不基於瀏覽器的性能監測方案：編程式性能監測。

編程式性能監測主要依託於 W3C 推出的 Performance API，該套 API 的目的是簡化開發者對網站性能進行精確分析與控制的過程，方便開發者採起手段提升 web 性能。

相比以前的性能監測方法，Performance API 最大的優勢是：靈活、精確，因此一經推出便風靡全球。好比，Vue 中便封裝了 Performance API 方便開發者進行性能追蹤。

因爲篇幅有限，在此再也不贅述，有興趣的同窗能夠自行了解。

總結

性能監測是前端性能優化的第一步，只有學會了性能監測，咱們才能更好地剖析性能問題，直至完全解決性能問題。