一、概要關(guān)于優(yōu)化工具，我們主要從兩個方面入手：「性能評估工具」和「優(yōu)化工具」。1.性能評估工具LighthousePageSpeedYSlow2.我們主要依賴優(yōu)化工具「ChromeDevTools」，大致如下：NetworkPerformanceShowThirdPartyBadgesBlockRequestURLCoverageDOMRenderingLayer二、Lighthouse1.Lighthouse安裝ChromeSetting-打開更多工具-擴(kuò)展程序-打開Chrome網(wǎng)上應(yīng)用店-Lighthouse2.插件-生成報(bào)告報(bào)告是我們的重要參考指標(biāo)，這是網(wǎng)站評估的常用方法。當(dāng)然，網(wǎng)站會有不同的類別，關(guān)注指標(biāo)也會不同。我們將繼續(xù)討論后續(xù)工作「如何制定合理的網(wǎng)站優(yōu)化性能指標(biāo)」。當(dāng)然，網(wǎng)站會有不同的類別，關(guān)注指標(biāo)也會不同。我們將繼續(xù)討論后續(xù)工作「如何制定合理的網(wǎng)站優(yōu)化性能指標(biāo)」。3.優(yōu)化建議Lighthouse更人性化的一點(diǎn)是，他不僅提出了問題，還提出了解決方案。三、PageSpeed1.使用PageSpeed2.分析報(bào)告四、ChromeDevTools-Network1.關(guān)于Network我們重點(diǎn)關(guān)注三個標(biāo)記2.Timing也是優(yōu)化不可缺少的工具:補(bǔ)充說明:TTFB：等待初始響應(yīng)所用的時間，又稱第一字節(jié)時間，這是我們判斷服務(wù)器和網(wǎng)絡(luò)狀況的重要指標(biāo)。此時將捕捉到服務(wù)器往返的延遲時間，以及等待服務(wù)器傳輸響應(yīng)的時間。五、ChromeDevTools-Performance1.概覽2.布局主要由四部分組成控制面板：記錄、清除、配置記錄過程中需要捕獲的信息Overview：高級總結(jié)頁面性能，頁面加載火焰圖：CPU堆疊跟蹤的可視化總結(jié):餅圖記錄各部分的耗時情況3.Overview詳解FPS每秒幀數(shù)。綠色豎線越高，F(xiàn)PS越高。綠色豎線越高，F(xiàn)PS越高。FPS圖表上的紅色塊表示長時間幀，很可能會出現(xiàn)卡頓。CPUCPU資源。該面積圖表示消耗CPU資源事件類型。NET每個彩色橫杠都表示一種資源。橫杠越長，檢索資源的時間越長。每個橫杠的淺色部分表示等待時間(從請求資源到第一字節(jié)下載時間)。深色部分表示傳輸時間(下載第一個和最后一個字節(jié)之間的時間)。需要特別注意，Performance工具中的每種顏色實(shí)際上都有自己的含義。HTML藍(lán)色的文件。腳本是黃色的。款式表為紫色。綠色媒體文件。灰色是其它資源。小技巧：減少無痕模式Chrome擴(kuò)展程序會干擾應(yīng)用。4.火焰圖NetworkNetwork在這里，我們可以看到我們資源加載的順序。什么時間加載了什么資源，通過這些，我們更直觀的知道資源是否并行加載。Frames上述頁面幀情況。InteractionsTimings以下五個指標(biāo)是我們優(yōu)化的方向FirstPaintDOMContentLoadedEventOnloadEventFirstContentfulPaintFirstMeaningfulPaintMain：展示主線程的運(yùn)行狀態(tài)。X軸代表時間，每個長條代表一個event。長條越長代表這個event時間越長。Y軸代表調(diào)用棧callstack。在棧里，上面event調(diào)用以下內(nèi)容event。JSHeapJavaScript大部分?jǐn)?shù)據(jù)都存儲在運(yùn)行過程中Heap中，所以JavaScript性能分析另一個比較重要的方面是內(nèi)存，也就是堆的分析。打開Performance監(jiān)視器六、ChromeDevTools-ShowThirdPartyBadges在很多情況下，這不是我們網(wǎng)站本身的問題。您使用的三方資源可能會拖累網(wǎng)站的性能。因此，我們需要使用它ShowThirdPartyBadges進(jìn)行調(diào)查。1.測試站：https://techcrunch.com/2.打開控制面板：CommandShiftP3.打開Network，注意資源前的彩色標(biāo)志標(biāo)記了三方資源，刪除或替換影響性能的東西。七、ChromeDevTools-BlockRequestURL我們可以使用項(xiàng)目中不確定是否有用的資源BlockRequestURL來排除。1.選擇資源-右鍵-BlockRequestURL防止一些資源加載，控制變量法來調(diào)查頁面性能。八、ChromeDevTools-Coverage1.打開控制面板：CommandShiftP2.輸入：ShowCoverage3.找到相應(yīng)的文件，可以看到文件左側(cè)標(biāo)記了一些代碼的使用解決方案也很簡單:盡量通過Webpack拆包，控制大小40KB以下，刪除未使用的代碼。九、ChromeDevTools-DOM我們經(jīng)常提到優(yōu)化Dom，那么節(jié)點(diǎn)控制的合理范圍是什么呢？總共于1500個節(jié)點(diǎn)最大深度為32個節(jié)點(diǎn)不要有子節(jié)點(diǎn)超過60個節(jié)點(diǎn)的父節(jié)點(diǎn)查看所有DOM節(jié)點(diǎn)數(shù)：document.querySelectorAll('*').length檢查子元素?cái)?shù)：document.querySelectorAll('body>*').length通常，只有在需要時才能找到創(chuàng)建DOM當(dāng)不再需要時，節(jié)點(diǎn)的方法會被銷毀。十、ChromeDevTools-Rendering我們就不多說重渲對頁面的影響了。十、ChromeDevTools-Rendering我們就不多說重渲對頁面的影響了。那么如何知道頁面的渲染過程呢？我們可以通過Rendering可視化查看。1.打開Rendering選項(xiàng)2.刷新頁面通過優(yōu)化，綠色區(qū)域越重，重復(fù)渲染的次數(shù)就越多DOM減少無效渲染。十一、ChromeDevTools-Layer你可能很好奇，為什么要檢查圖層？這是因?yàn)槲覀兘?jīng)常在不知不覺中混淆圖層關(guān)系，或者增加不合適的圖層。1.打開控制面板：CommandShiftP2.選擇Layer選項(xiàng)圖層問題是否清晰地?cái)[在眼前~十二、總結(jié)通過優(yōu)化工具，我們可以很容易地定位和分析網(wǎng)站。之后可以快速優(yōu)化，讓網(wǎng)站高性能運(yùn)行。優(yōu)化就是這樣。

網(wǎng)站建設(shè)公司" />