來源：Jarttos blog

http://jartto.wang/2019/09/08/web-optimization-tools/

工欲善其事，必先利其器。在「網站優化實戰：http://jartto.wang/2019/02/16/web-optimization/」中我們提到了一些優化的相關經驗，并沒有對優化工具展開討論，這節就讓我們一起上手實踐吧！

概 要

關于優化工具，我們主要從兩方面說起：「性能評估工具」和「優化工具」。

性能評估工具：

Lighthouse；

PageSpeed；

YSlow。

優化工具：

我們主要依賴「Chrome DevTools」，大致如下：

Network；

Performance；

Show Third Party Badges；

Block Request URL；

Coverage；

DOM；

Rendering；

Layer。

Lighthouse

Lighthouse 安裝

Chrome Setting - 更多工具 - 擴展程序 - 打開 Chrome 網上應用店 - Lighthouse

插件 - 生成報告

報告是我們的一個重要參考指標，這是網站評估的通用方法。

當然，網站也會有不同的類別，關注指標也不盡相同，后續我們會繼續探討「如何制定合理的網站優化性能指標」。

優化建議

Lighthouse 比較人性化的點在于他既提出了問題，同時也提出了解決建議。

PageSpeed

使用 PageSpeed

我們可以在「Chrome DevTools」菜單欄中找到并打開：

分析報告

Chrome DevTools - Network

關于 Network 我們重點關注標注的 3 處

Timing 也是優化不可缺少的工具：

補充說明一下：TTFB：等待初始響應所用的時間，也稱為第一字節的時間，這是我們判斷服務器以及網絡狀況的重要指標。

此時間將捕捉到服務器往返的延遲時間，以及等待服務器傳送響應所用的時間。

Chrome DevTools - Performance

概覽

版面主要由 4 部分構成：

控制面板：錄制，清除，配置記錄期間需要捕獲的信息；

Overview：頁面性能的高級匯總，以及頁面加載情況；

火焰圖：CPU 堆疊追蹤的可視化；

總覽：餅圖記錄各部分耗時情況。

Overview 詳解

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

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

NET每條彩色橫杠表示一種資源。橫杠越長，檢索資源所需的時間越長。每個橫杠的淺色部分表示等待時間（從請求資源到第一個字節下載完成的時間）。深色部分表示傳輸時間（下載第一個和最后一個字節之間的時間）。

需要特別注意，Performance 工具中的每一種顏色其實都有自己的含義。

HTML 文件為藍色；

腳本為黃色；

樣式表為紫色；

媒體文件為綠色；

其他資源為灰色。

小技巧：

使用無痕模式，減少 Chrome 擴展程序會給應用的干擾。

火焰圖

NetworkNetwork 這里我們可以看出來，我們資源加載的一個順序情況。什么時間加載了什么資源，通過這些，我們更直觀的知道資源是否并行加載。

Frames上文提及到的頁面幀情況。

Interactions。

Timings 中如下 5 個指標是我們優化的方向：

First Paint；

DOMContentLoaded Event；

Onload Event；

First Contentful Paint；

First Meaningful Paint。

Main：展示了主線程運行狀況。X 軸代表著時間，每個長條代表著一個 event。長條越長就代表這個 event 花費的時間越長。Y 軸代表了調用棧 call stack 。

在棧里，上面的 event 調用了下面的 event。

注意紅色警告：

JS Heap：

JavaScript 運行過程中的大部分數據都保存在堆 Heap 中，所以 JavaScript 性能分析另一個比較重要的方面是內存，也就是堆的分析。

打開 Performance 監視器

Chrome DevTools - Show Third Party Badges

很多情況下，并不是我們網站本身的問題，有可能你使用的三方資源拖累了站點性能。所以，我們需要使用 Show Third Party Badges 來進行排查。

測試站點：https://techcrunch.com/

打開控制面板：Command + Shift + P

打開 Network，注意資源前面的彩色標志

三方資源都被標記出來了，移除或者替換那些影響性能的東西。

Chrome DevTools - Block Request URL

對于項目中不確定是否有用的資源，我們可以使用 Block Request URL 來排除。

選中資源 - 右鍵 - Block Request URL

阻止某些資源加載，控制變量法來排查頁面性能問題。

Chrome DevTools - Coverage

打開控制面板：Command + Shift + P

輸入：Show Coverage

找到相應的文件，可以看到文件左側已經標記出了部分代碼的使用情況

解決思路也很簡單：盡可能去通過 Webpack 來拆包，控制大小在 40KB 以下，移除那些未使用代碼。

Chrome DevTools - DOM

我們經常提到要優化 Dom，那么節點控制在什么范圍才合理呢？

總共少于 1500 個節點；

最大深度為 32 個節點；

不要存在子節點超過 60 個節點的父節點。

查看所有 DOM 節點數：

document.querySelectorAll(*).length

查看子元素個數：

document.querySelectorAll(body > *).length

通常，只在需要時查找創建 DOM 節點的方法，并在不再需要時銷毀它們。

Chrome DevTools - Rendering

關于重渲對頁面的影響，我們就不多說了。那么如何知道頁面的渲染過程呢？我們可以通過 Rendering 來可視化查看。

打開 Rendering 選項

刷新頁面

綠色區域越重，說明重復渲染的次數越多，通過優化 DOM 來減少無效渲染。

Chrome DevTools - Layer

你可能會很好奇，為什么要查看圖層？

這是因為，我們經常會在不知不覺的情況下搞亂了圖層關系，或者增加了不合適的圖層。

打開控制面板：Command + Shift + P2.選擇 Layer 選項

是不是圖層問題就清清楚楚的擺在眼前了～

總 結

通過優化工具，我們可以輕而易舉的對網站進行定位分析。之后就可以快速展開優化，讓網站高性能的運轉起來。優化，也不過如此。

后續我們會深入了解一些優化相關的原理細節，如果你有優化相關的問題，歡迎一起探討，一起進步。

粉絲專屬福利：公眾號關注后回復前端架構設計，將限時領取書籍一份，每天只限10份，已累計領取超過33000份。