一(yī)、概要

關于優化工(gōng)具，我(wǒ)(wǒ)們主要從兩方面說起：「性能評估工(gōng)具」和「優化工(gōng)具」。

1.性能評估工(gōng)具

Lighthouse

PageSpeed

YSlow

2.優化工(gōng)具我(wǒ)(wǒ)們主要依賴「Chrome DevTools」，大(dà)緻如下(xià)：

Network

Performance

Show Third Party Badges

Block Request URL

Coverage

DOM

Rendering

Layer

二、Lighthouse

1.Lighthouse 安裝

Chrome Setting - 更多工(gōng)具 - 擴展程序 - 打開(kāi) Chrome 網上應用店(diàn) - Lighthouse

2.插件 - 生(shēng)成報告

報告是我(wǒ)(wǒ)們的一(yī)個重要參考指标，這是網站評估的通用方法。

當然，網站也會有不同的類别，關注指标也不盡相同，後續我(wǒ)(wǒ)們會繼續探讨「如何制定合理的網站優化性能指标」。

3.優化建議

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

三、PageSpeed

1.使用 PageSpeed

2.分(fēn)析報告

四、Chrome DevTools - Network

1.關于 Network 我(wǒ)(wǒ)們重點關注标注的 3 處

2.Timing 也是優化不可缺少的工(gōng)具：

補充說明一(yī)下(xià)：TTFB：等待初始響應所用的時間，也稱爲第一(yī)字節的時間，這是我(wǒ)(wǒ)們判斷服務器以及網絡狀況的重要指标。

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

五、Chrome DevTools - Performance

1.概覽

2.版面主要由 4 部分(fēn)構成

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

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

火(huǒ)焰圖：CPU 堆疊追蹤的可視化

總覽：餅圖記錄各部分(fēn)耗時情況

3.Overview 詳解

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

CPUCPU 資(zī)源。此面積圖指示消耗 CPU 資(zī)源的事件類型。

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

需要特别注意，Performance 工(gōng)具中(zhōng)的每一(yī)種顔色其實都有自己的含義。

HTML 文件爲藍(lán)色。

腳本爲黃色。

樣式表爲紫色。

媒體(tǐ)文件爲綠色。

其他資(zī)源爲灰色。

小(xiǎo)技巧：

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

4.火(huǒ)焰圖

NetworkNetwork 這裏我(wǒ)(wǒ)們可以看出來，我(wǒ)(wǒ)們資(zī)源加載的一(yī)個順序情況。什麽時間加載了什麽資(zī)源，通過這些，我(wǒ)(wǒ)們更直觀的知(zhī)道資(zī)源是否并行加載。

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

Interactions

Timings 中(zhōng)如下(xià) 5 個指标是我(wǒ)(wǒ)們優化的方向

First Paint

DOMContentLoaded Event

Onload Event

First Contentful Paint

First Meaningful Paint

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

在棧裏，上面的 event 調用了下(xià)面的 event。

JS Heap

JavaScript 運行過程中(zhōng)的大(dà)部分(fēn)數據都保存在堆 Heap 中(zhōng)，所以 JavaScript 性能分(fēn)析另一(yī)個比較重要的方面是内存，也就是堆的分(fēn)析。

打開(kāi) Performance 監視器

六、Chrome DevTools - Show Third Party Badges

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

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

2.打開(kāi)控制面闆：Command + Shift + P

3.打開(kāi) Network，注意資(zī)源前面的彩色标志(zhì)

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

網站優化

七、Chrome DevTools - Block Request URL

對于項目中(zhōng)不确定是否有用的資(zī)源，我(wǒ)(wǒ)們可以使用 Block Request URL 來排除。

1.選中(zhōng)資(zī)源 - 右鍵 - Block Request URL

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

八、Chrome DevTools - Coverage

1.打開(kāi)控制面闆：Command + Shift + P

2.輸入：Show Coverage

3.找到相應的文件，可以看到文件左側已經标記出了部分(fēn)代碼的使用情況

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

九、Chrome DevTools - DOM

我(wǒ)(wǒ)們經常提到要優化 Dom，那麽節點控制在什麽範圍才合理呢？

總共少于 1500 個節點

最大(dà)深度爲 32 個節點

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

查看所有 DOM 節點數：

document.querySelectorAll('*').length

查看子元素個數：

document.querySelectorAll('body > *').length

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

十、Chrome DevTools - Rendering

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

1.打開(kāi) Rendering 選項

2.刷新頁面

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

十一(yī)、Chrome DevTools - Layer

你可能會很好奇，爲什麽要查看圖層？

這是因爲，我(wǒ)(wǒ)們經常會在不知(zhī)不覺的情況下(xià)搞亂了圖層關系，或者增加了不合适的圖層。

1.打開(kāi)控制面闆：Command + Shift + P2.選擇 Layer 選項

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

十二、總結

通過優化工(gōng)具，我(wǒ)(wǒ)們可以輕而易舉的對網站進行定位分(fēn)析。之後就可以快速展開(kāi)優化，讓網站高性能的運轉起來。優化，也不過如此。