網站優化，這些工具你必定用得着

「工欲善其事，必先利其器」，在「網站優化實戰」中咱們提到了一些優化的相關經驗，並無對優化工具展開討論，這節就讓咱們一塊兒上手實踐吧！

1、概要

關於優化工具，咱們主要從兩方面提及：「性能評估工具」和「優化工具」。

1.性能評估工具

• Lighthouse
• PageSpeed
• YSlow

2.優化工具咱們主要依賴「Chrome DevTools」，大體以下：

• Network
• Performance
• Show Third Party Badges
• Block Request URL
• Coverage
• DOM
• Rendering
• Layer

2、Lighthouse

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

2.插件 - 生成報告

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

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

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

3、PageSpeed

1.使用 PageSpeed 咱們能夠在「Chrome DevTools」菜單欄中找到並打開：

2.分析報告

4、Chrome DevTools - Network

1.關於 Network 咱們重點關注標註的 3 處

2.Timing 也是優化不可缺乏的工具：

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

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

5、Chrome DevTools - Performance

1.概覽

2.版面主要由 4 部分構成

• 控制面板：錄製，清除，配置記錄期間須要捕獲的信息
• Overview：頁面性能的高級彙總，以及頁面加載狀況
• 火焰圖：CPU 堆疊追蹤的可視化
• 總覽：餅圖記錄各部分耗時狀況

3.Overview 詳解

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

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

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

須要特別注意，Performance 工具中的每一種顏色其實都有本身的含義。

• HTML 文件爲藍色。
• 腳本爲黃色。
• 樣式表爲紫色。
• 媒體文件爲綠色。
• 其餘資源爲灰色。

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

4.火焰圖

• Network Network 這裏咱們能夠看出來，咱們資源加載的一個順序狀況。什麼時間加載了什麼資源，經過這些，咱們更直觀的知道資源是否並行加載。

• 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 監視器

6、Chrome DevTools - Show Third Party Badges

不少狀況下，並非咱們網站自己的問題，有可能你使用的三方資源拖累了站點性能。因此，咱們須要使用 Show Third Party Badges 來進行排查。

1.測試站點：techcrunch.com/

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

3.打開 Network，注意資源前面的彩色標誌

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

7、Chrome DevTools - Block Request URL

對於項目中不肯定是否有用的資源，咱們可使用 Block Request URL 來排除。

1.選中資源 - 右鍵 - Block Request URL

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

8、Chrome DevTools - Coverage

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

2.輸入：Show Coverage

3.找到相應的文件，能夠看到文件左側已經標記出了部分代碼的使用狀況

解決思路也很簡單： 儘量去經過 Webpack 來拆包，控制大小在 40KB 如下，移除那些未使用代碼。

9、Chrome DevTools - DOM

咱們常常提到要優化 Dom，那麼節點控制在什麼範圍才合理呢？

• 總共少於 1500 個節點
• 最大深度爲 32 個節點
• 不要存在子節點超過 60 個節點的父節點

查看全部 DOM 節點數：

document.querySelectorAll('*').length
複製代碼

查看子元素個數：

document.querySelectorAll('body > *').length
複製代碼

一般，只在須要時查找建立 DOM 節點的方法，並在再也不須要時銷燬它們。

10、Chrome DevTools - Rendering

關於重渲對頁面的影響，咱們就很少說了。那麼如何知道頁面的渲染過程呢？咱們能夠經過 Rendering 來可視化查看。

1.打開 Rendering 選項

2.刷新頁面

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

11、Chrome DevTools - Layer

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

這是由於，咱們常常會在不知不覺的狀況下搞亂了圖層關係，或者增長了不合適的圖層。

1.打開控制面板：Command + Shift + P 2.選擇 Layer 選項

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

12、總結

經過優化工具，咱們能夠垂手可得的對網站進行定位分析。以後就能夠快速展開優化，讓網站高性能的運轉起來。優化，也不過如此。

後續咱們會深刻了解一些優化相關的原理細節，若是你有優化相關的問題，歡迎一塊兒探討，一塊兒進步。