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

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