????????打開chrome-》f12/右鍵查看元素-》NetWrok/網(wǎng)絡? ?

????????ctrl+F5 刷新網(wǎng)頁，可以看到從輸入url到頁面資源請求并加載網(wǎng)頁，用于查看資源加載，接口請求，評估網(wǎng)頁、網(wǎng)站性能等，如下圖：

request、stransferred、resources 的含義

? ? ? ? request（）代表請求數(shù)量：點擊上面可以單獨查看各個request類型下的請求，request類型包含：xhr and fetch（接口請求）、Document、css、javaScript、Font、Image、Media、Manifest、web Socket、WebAssembly、other;

? ? ? ? stransferred（transferred over network）:通過網(wǎng)絡加載的資源大小。

????????標識請求的資源的傳輸，可以看到資源大小

? ? ? ? resources（resources loaded by the page）：統(tǒng)計的是前端頁面加載的所有資源經(jīng)過解壓之后的原始大小。

【

以上說明來自Google官網(wǎng)： https://developers.google.com/web/tools/chrome-devtools/network/reference#uncompressed

https://stackoverflow.com/questions/56043151/what-is-the-difference-between-transferred-and-resources-in-chrome-devtools

】

DOMContentLoaded 和 Load 和 Finish的含義和區(qū)別

????????DOMContentLoaded：DOM樹構建完成。?即HTML頁面由上向下解析HTML結構到末尾封閉標簽。

????????Load：頁面加載完畢。?DOM樹構建完成后，繼續(xù)加載html/css 中的圖片資源等外部資源，加載完成后視為頁面加載完畢。

????????DOMContentLoaded 會比 Load 時間小，兩者時間差大致等于外部資源加載的時間。

????????Finish： 是頁面上所有 http 請求發(fā)送到響應完成的時間， HTTP1.0/1.1 協(xié)議限定，單個域名的請求并發(fā)量是 6 個，即 Finish 是所有請求（不只是XHR請求，還包括DOC，img，js，css等資源的請求）在并發(fā)量為6的限制下完成的時間。

????????Finish 的時間比 Load 大，意味著頁面有相當部分的請求量，

????????Finish 的時間比 Load 小，意味著頁面請求量很少，如果頁面是只有一個 html文檔請求的靜態(tài)頁面，Finish時間基本就等于HTML文檔請求的時間。

????????頁面發(fā)送請求和頁面解析文檔結構，分屬兩個不同的線程，

Performance

Lighthouse

????????Lighthouse 是 Google 開發(fā)的一款工具，用于分析網(wǎng)絡應用和網(wǎng)頁，收集現(xiàn)代性能指標并提供對開發(fā)人員最佳實踐的意見。為 Lighthouse 提供一個需要審查的網(wǎng)址，它將針對此頁面運行一連串的測試，然后生成一個有關頁面性能的報告。

????????Lighthouse報告分析

????????Lighthouse生成的分析報告，首先會根據(jù)自定義勾選的需要測試的指標進行總的打分（下圖標1處，可以把分析報告進行導出結果等操作）。

????????Lighthouse 會對選擇進行分析的維度給出一個的評估得分，分值范圍0-100。

????????評分主要分為三個檔次，分別用紅黃綠三種顏色代表：

0 – 49（慢）：紅色?
?50 – 89（平均值）： 橙色
?90 – 100（快）： 綠色

????????如果得分能達到 90 分以上（綠色），則說明網(wǎng)站應用在該方面的評估表現(xiàn)符合最佳實踐。??注：?如果沒有分數(shù)或得分為 0，則很有可能是檢測過程發(fā)生了錯誤，比如網(wǎng)絡連接狀況異常等。

點擊?See calculator，查看具體打分規(guī)則如下：

1、Metrics指標說明

指標名稱	說明
首次內容繪制 FCP（First Contentful Paint）	瀏覽器首次繪制來自 DOM 的內容的時間，內容必須是文本、圖片（包含背景圖）、非白色的 canvas 或 SVG，也包括帶有正在加載中的 Web 字體的文本。 這是用戶第一次開始看到頁面內容，但僅僅有內容并不意味著它是有用的內容（如 Header、導航欄等）。
最大的內容繪制 LCP（Largest Contentful Paint）	可視區(qū)域中最大的內容元素呈現(xiàn)到屏幕上的最長時間，用以估算頁面的主要內容對用戶可見時間。 LCP 考慮的元素包括: 元素 、元素內的<svg>元素 、元素、通過 url() 函數(shù)加載背景圖片的元素、包含文本節(jié)點或其他內聯(lián)文本元素子級的塊級元素。
可交互時間 TTI?（Time to Interactive）	指的是所有的頁面內容都已經(jīng)成功加載，且能夠快速地對用戶的操作做出反應的時間點。 網(wǎng)頁第一次完全達到可交互狀態(tài)的時間點，瀏覽器已經(jīng)可以持續(xù)性的響應用戶的輸入。 完全達到可交互狀態(tài)的時間點是在最后一個長任務（Long Task）完成的時間，并且在隨后的 5 秒內網(wǎng)絡和主線程是空閑的。
總阻塞時間 TBT?（Total Blocking Time）	表示此次分析過程中遇到的阻塞時間。 度量了 FCP 和 TTI 之間的總時間，在該時間范圍內，主線程被阻塞足夠長的時間以防止輸入響應。 只要存在長任務，該主線程就會被視為“阻塞”，該任務在主線程上運行超過 50 毫秒（ms）。
累積布局偏移 CLS（Cumulative Layout Shift）	CLS 會測量在頁面整個生命周期中發(fā)生的每個意外的布局移位的所有單獨布局移位分數(shù)的總和，它是一種保證頁面的視覺穩(wěn)定性從而提升用戶體驗的指標方案。 布局轉移的發(fā)生是因為瀏覽器傾向于異步加載頁面元素。頁面上可能存在最初尺寸未知的媒體元素，這種組合意味著瀏覽器在完成加載之前不知道各個元素會占用多少空間。因此，布局會發(fā)生劇烈變化。 CLS的有趣之處在于它可以用各種工具進行客觀的測量，但它也是以用戶為中心的，因為每個用戶的設備都會影響你的網(wǎng)站布局的變化。雖然不能控制這一方面，但肯定可以采取預防措施，使其影響盡可能小。
速度指標 SI（Speed Index）	衡量首屏可見內容繪制在屏幕上的速度。在首次加載頁面的過程中盡量展現(xiàn)更多的內容，往往能給用戶帶來更好的體驗，所以速度指標的值約小越好。

其他指標：

指標名稱	說明
首次CPU閑置 FCI（First CPU Idle）	指在頁面加載期間，當頁面的主要內容已經(jīng)完成加載并且JavaScript代碼已經(jīng)執(zhí)行完畢后，瀏覽器第一次空閑的時間點。 在這個時間點之后，頁面可以響應用戶的交互操作，比如點擊按鈕或輸入文本。
首次繪制 FP?(First paint)	指瀏覽器首次將像素渲染到屏幕上的時間點，也就是頁面的第一個像素點被繪制的時間。 FP的發(fā)生時機取決于瀏覽器的渲染機制和頁面的結構。 當瀏覽器開始加載頁面時，會解析HTML和CSS，構建DOM和CSSOM樹，然后將它們合并為渲染樹。 當瀏覽器開始將渲染樹渲染到屏幕上時，FP就發(fā)生了，在這個時刻，用戶可以看到頁面上的第一個像素點，也就是FP。 通常FP表現(xiàn)為白屏。
首次有效繪制 FMP（First Meaningful Paint）	瀏覽器在加載網(wǎng)頁時，第一次將主要內容呈現(xiàn)給用戶的時間點。 這個時間點通常是用戶感知到頁面加載速度的關鍵點之一，用戶可以看到頁面上的一些內容，并開始與頁面進行交互。 FMP是通過一個算法來猜測某個時間點的，所以可能不準確，且在 Lighthouse 6.0中，FMP指標已被棄用。
文檔內容加載完成 DCL（DOMContentLoaded ）	DCL指的是HTML文檔中的DOM樹構建完成、CSS文件加載完成并解析、JavaScript文件加載完成并執(zhí)行的時間點，它表示網(wǎng)頁的主要內容已經(jīng)加載完成，可以開始進行交互和操作。
首次輸入延遲 FID（First Input Delay）	測量從用戶第一次與頁面交互，直到瀏覽器對交互作出響應，并實際能夠開始處理事件處理程序所經(jīng)過的時間。 FID測量頁面加載期間響應度，它針對的交互是不連續(xù)操作對應的輸入事件，如點擊、輕觸和按鍵。其他諸如滾動和縮放之類的交互屬于連續(xù)操作并不包含在她的測量內。

2、指標衡量標準

lighthouse衡量標準

模式名稱	綠色快	中	慢
首次內容繪制?FCP（First Contentful Paint）	0–1.8（s）	1.8–3	> 3
最大的內容繪制?FCP（Largest Contentful Paint）	0–2.5（s）	2.5-4	> 4
可交互時間?TTI（Time to Interactive）	0–3.8（s）	3.9–7.3	> 7.3
總阻塞時間?TBT（Total Blocking Time）	0–200（ms）	200-600	> 600
累積布局偏移?CLS（Cumulative Layout Shift）	0–0.1(比例)	0.1-0.25	> 0.25
速度指標?SI（Speed Index）	0-3.4（s）	3.4-5.8	> 5.8
首次CPU閑置?FCI（First CPU Idle）	0–4.7（s）	4.8-6.5	> 6.5
首次有效繪制?FMP?First Meaningful Paint	0–2（s）	2-4	> 4
最大潛在首次輸入延遲?MPFID?Max Potential First Input Delay	0–130（ms）	130-250	> 250
最大內容繪制?LCP?（Largest Contenttful Paint）	0–2.5（s）	2.5-4	>4

3、改進建議

Opportunity的建議可以幫助更快地加載頁面，但它們不會直接影響性能得分。

????????常見的可改進項有如下：

• Use HTTP/2 ，HTTP/2 提供了許多優(yōu)于 HTTP/1.1 的優(yōu)點，包括二進制標頭和多路復用。即現(xiàn)在用的是 HTTP/1.1，建議使用 HTTP/2。需要服務端配合改，目前不支持。
• Minifying JavaScript ，精簡js代碼。
• Reduce unused JavaScript ，減少未使用的 JavaScript 并推遲加載腳本，直到需要時才加載，以減少網(wǎng)絡活動消耗的字節(jié)數(shù)(LCP)。即：刪除無用的 JS，主要方法就是合理的代碼分割和按需引入。
• Enable text compression，基于文本的資源應該使用壓縮（gzip等），以最小化網(wǎng)絡總字節(jié)數(shù)（FCP，LCP）。即：配置 gzip壓縮。
• Eliminate render-blocking resources，列出了阻止頁面首次繪制的所有 URL（FCP，LCP），通過內聯(lián)關鍵資源、推遲非關鍵資源和刪除任何未使用的內容來減少這些阻止渲染的 URL 的影響。即：合理加載資源，控制加載順序。

????????如何識別關鍵資源：使用 Chrome DevTools 中的 Coverage 選項卡來識別非關鍵 CSS 和 JS。當加載或運行頁面時，該選項卡可以分析使用了多少代碼，以及加載了多少代碼，綠色（關鍵），紅色（非關鍵 ）

????????如何消除渲染阻塞腳本：合理使用 async 或 defer 屬性標記

????????如何消除阻塞渲染的樣式表：可使用 preload 鏈接異步加載其余樣式，可查看推遲非關鍵 CSS

4、Diagnostics（診斷）

5、PASSED AUDITS（ 審核通過）

????????列舉了在性能優(yōu)化方面做的比較好的地方，常見項及說明如下（其實做性能優(yōu)化的時候就可以參照這些方面）：

• Properly size images：適當大小的圖像，避免字節(jié)浪費而減慢頁面加載時間
• Defer offscreen images：屏幕外圖像延遲加載
• Minify CSS：縮小 CSS 文件，減少網(wǎng)絡負載大小
• Minify JavaScript：縮小 JS 文件，減少有效負載大小和腳本解析時間
• Reduce unused CSS：刪除未使用的 CSS
• Efficiently encode images：有效地圖片編碼和優(yōu)化
• Serve images in next-gen formats：以下一代格式提供圖像
• Enable text compression：啟用文本壓縮
• Preconnect to required origins：預連接到所需的源
• Initial server response time was short：初始服務器響應時間很短
• Avoid multiple page redirects：避免多個頁面重定向
• Preload key requests：預加載關鍵請求
• Use video formats for animated content：用視頻替換動畫 GIF
• Remove duplicate modules in JavaScript bundles：刪除 JavaScript 包中的重復模塊
• Avoid serving legacy JavaScript to modern browsers：避免向現(xiàn)代瀏覽器提供舊版 JavaScript
• Preload Largest Contentful Paint image：預加載最大的內容繪制
• Avoids enormous network payloads：避免巨大的網(wǎng)絡負載
• Uses efficient cache policy on static assets：對靜態(tài)資產使用高效的緩存策略
• Avoids an excessive DOM size：避免過大的 DOM 元素
• User Timing marks and measures：用戶計時標記和度量
• JavaScript execution time：JavaScript 執(zhí)行時間
• Minimizes main-thread work：最小化主線程工作
• All text remains visible during webfont loads：在 webfont 加載期間所有文本保持可見
• Minimize third-party usage：盡量減少第三方使用
• Lazy load third-party resources with facades：延遲加載第三方資源
• Uses passive listeners to improve scrolling performance：使用被動偵聽器來提高滾動性能
• Avoids document.write()：避免使用 document.write()
• Image elements have explicit width and height：圖像元素應具有明確的寬度和高度

6、可訪問性（Accessibility）

Accessibility 輔助功能 : 主要針對無障礙設計，也稱為網(wǎng)站可達性，是指所創(chuàng)建的網(wǎng)站對所有用戶都可用/可訪問，不管用戶的生理/身體能力如何、不管用戶是以何種方式訪問網(wǎng)站。

參考文章：Lighthouse（燈塔）—— Chrome瀏覽器強大的性能測試工具_chrome lighthouse-CSDN博客

Google dev開發(fā)指南：?web.dev/

如何看vue首頁的加載速度 ? Worktile社區(qū)

network其他模塊介紹參考：?Chrome DevTools谷歌瀏覽器開發(fā)者工具評估資源加載時間