3.優(yōu)化建議

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

三、

1.使用

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

2.分析報告

四、 -

1.關于我們重點關注標注的 3 處

2.也是優(yōu)化不可缺少的工具：

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

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

五、 -

1.概覽

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

3. 詳解

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

小技巧：

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

4.火焰圖

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

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

注意紅色警告：

六、 - Show Third Party

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

1.測試站點：

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

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

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

七、 - Block URL

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

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

阻止某些資源加載網(wǎng)站優(yōu)化，控制變量法來排查頁面性能問題。

八、 -

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

2.輸入：Show

3.找到相應的文件，可以看到文件左側已經(jīng)標記出了部分代碼的使用情況

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

九、 - DOM

我們經(jīng)常提到要優(yōu)化 Dom，那么節(jié)點控制在什么范圍才合理呢？

查看所有 DOM 節(jié)點數(shù)：

document.querySelectorAll('*').length

查看子元素個數(shù)：

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

通常，只在需要時查找創(chuàng)建 DOM 節(jié)點的方法，并在不再需要時銷毀它們。

十、 -

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

1.打開 選項

2.刷新頁面

綠色區(qū)域越重，說明重復渲染的次數(shù)越多網(wǎng)站優(yōu)化，通過優(yōu)化 DOM 來減少無效渲染。

十一、 - Layer

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

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

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

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

十二、總結

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

后續(xù)我們會深入了解一些優(yōu)化相關的原理細節(jié)，如果你有優(yōu)化相關的問題，歡迎一起探討，一起進步。

近期

若此文有用，何不素質三連??