一、概要

關於最佳化工具，我們主要從兩方面說起：「效能評估工具」和「最佳化工具」。
1. 效能評估工具
Lighthouse
PageSpeed
YSlow
2. 最佳化工具我們主要依賴「Chrome DevTools」，大致如下：
Network
Performance
Show Third Party Badges
Block Request URL
Coverage
DOM
Rendering
Layer
二、 Lighthouse

1.Lighthouse 安裝
Chrome Setting – 更多工具 – 擴充套件程式 – 開啟 Chrome 網上應用店 – Lighthouse
2. 外掛 – 生成報告
報告是我們的一個重要參考指標，這是網站評估的通用方法。
當然，網站也會有不同的類別，關注指標也不盡相同，後續我們會繼續探討「如何制定合理的網站最佳化效能指標」。
3. 最佳化建議
Lighthouse 比較人性化的點在於他既提出了問題，同時也提出瞭解決建議。
三、 PageSpeed

1. 使用 PageSpeed
2. 分析報告
四、 Chrome DevTools – Network

1. 關於 Network 我們重點關注標註的 3 處
2.Timing 也是最佳化不可缺少的工具：
補充說明一下：TTFB：等待初始響應所用的時間，也稱為第一位元組的時間，這是我們判斷伺服器以及網路狀況的重要指標。
此時間將捕捉到伺服器往返的延遲時間，以及等待伺服器傳送響應所用的時間。
五、 Chrome DevTools – Performance

1. 概覽
2. 版面主要由 4 部分構成
控制面板：錄製，清除，配置記錄期間需要捕獲的資訊
Overview：頁面效能的高階彙總，以及頁面載入情況
火焰圖：CPU 堆疊追蹤的視覺化
總覽：餅圖記錄各部分耗時情況
3.Overview 詳解
FPS 每秒幀數。綠色豎線越高，FPS 越高。 FPS 圖表上的紅色塊表示長時間幀，很可能會出現卡頓。
CPUCPU 資源。此面積圖指示消耗 CPU 資源的事件型別。
NET 每條彩色橫槓表示一種資源。橫槓越長，檢索資源所需的時間越長。每個橫槓的淺色部分表示等待時間（從請求資源到第一個位元組下載完成的時間）。深色部分表示傳輸時間（下載第一個和最後一個位元組之間的時間）。
需要特別注意，Performance 工具中的每一種顏色其實都有自己的含義。
HTML 檔案為藍色。
指令碼為黃色。
樣式表為紫色。
媒體檔案為綠色。
其他資源為灰色。
小技巧：
使用無痕模式，減少 Chrome 擴充套件程式會給應用的干擾。
4. 火焰圖
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 來進行排查。
1. 測試站點：https://techcrunch.com/
2. 開啟控制面板：Command + Shift + P
3. 開啟 Network，注意資源前面的彩色標誌
三方資源都被標記出來了，移除或者替換那些影響效能的東西。

七、 Chrome DevTools – Block Request URL

對於專案中不確定是否有用的資源，我們可以使用 Block Request URL 來排除。
1. 選中資源 – 右鍵 – Block Request URL
阻止某些資源載入，控制變數法來排查頁面效能問題。
八、 Chrome DevTools – Coverage

1. 開啟控制面板：Command + Shift + P
2. 輸入：Show Coverage
3. 找到相應的檔案，可以看到檔案左側已經標記出了部分程式碼的使用情況
解決思路也很簡單：儘可能去透過 Webpack 來拆包，控制大小在 40KB 以下，移除那些未使用程式碼。
九、 Chrome DevTools – DOM

我們經常提到要最佳化 Dom，那麼節點控制在什麼範圍才合理呢？
總共少於 1500 個節點
最大深度為 32 個節點
不要存在子節點超過 60 個節點的父節點
檢視所有 DOM 節點數：

document.querySelectorAll(‘*’).length
檢視子元素個數：
document.querySelectorAll(‘body > *’).length
通常，只在需要時查詢建立 DOM 節點的方法，並在不再需要時銷燬它們。
十、 Chrome DevTools – Rendering

關於重渲對頁面的影響，我們就不多說了。那麼如何知道頁面的渲染過程呢？我們可以透過 Rendering 來視覺化檢視。
1. 開啟 Rendering 選項
2. 重新整理頁面
綠色區域越重，說明重複渲染的次數越多，透過最佳化 DOM 來減少無效渲染。
十一、 Chrome DevTools – Layer

您可能會很好奇，為什麼要檢檢視層？
這是因為，我們經常會在不知不覺的情況下搞亂了圖層關係，或者增加了不合適的圖層。
1. 開啟控制面板：Command + Shift + P2. 選擇 Layer 選項
是不是圖層問題就清清楚楚的擺在眼前了～
十二、總結

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