3.優(yōu)化建議

比較人性化的點(diǎn)在于他既提出了問題，同時(shí)也提出了解決建議。

三、

1.使用

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

2.分析報(bào)告

四、 -

1.關(guān)于我們重點(diǎn)關(guān)注標(biāo)注的 3 處

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

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

此時(shí)間將捕捉到服務(wù)器往返的延遲時(shí)間，以及等待服務(wù)器傳送響應(yīng)所用的時(shí)間。

五、 -

1.概覽

2.版面主要由 4 部分構(gòu)成

3. 詳解

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

小技巧：

使用無痕模式，減少 擴(kuò)展程序會(huì)給應(yīng)用的干擾。

4.火焰圖

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

在棧里，上面的 event 調(diào)用了下面的 event。

注意紅色警告：

六、 - Show Third Party

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

1.測(cè)試站點(diǎn)：

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

3.打開，注意資源前面的彩色標(biāo)志

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

七、 - Block URL

對(duì)于項(xiàng)目中不確定是否有用的資源，我們可以使用 Block URL 來排除。

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

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

八、 -

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

2.輸入：Show

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

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

九、 - DOM

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

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

document.querySelectorAll('*').length

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

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

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

十、 -

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

1.打開 選項(xiàng)

2.刷新頁面

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

十一、 - Layer

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

這是因?yàn)椋覀兘?jīng)常會(huì)在不知不覺的情況下搞亂了圖層關(guān)系，或者增加了不合適的圖層。

1.打開控制面板： + Shift + P2.選擇 Layer 選項(xiàng)

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

十二、總結(jié)

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

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

近期

若此文有用，何不素質(zhì)三連??