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

網站建設公司" />