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

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