前言
我們多數(shù)性能測試，基本上針對接口的性能測試，很少涉及到前端頁面的性能測試。
但影響用戶體驗的因素除了后端接口數(shù)據(jù)的返回，還有前端頁面的渲染等等。
所以我們除了在開發(fā)的過程中注意代碼的質(zhì)量，同時還需要專業(yè)的網(wǎng)站測試工具輔助，讓我們知道自己的網(wǎng)頁還有哪些需要更為優(yōu)化的方面。
Lighthouse是一個開源的自動化工具，用于幫助改進網(wǎng)絡(luò)應(yīng)用的質(zhì)量。可將其作為一個 Chrome擴展程序運行，或從命令行運行。Lighthouse分析web應(yīng)用程序和web頁面，收集關(guān)于開發(fā)人員最佳實踐的現(xiàn)代性能指標和見解，讓開發(fā)人員根據(jù)生成的評估頁面，來進行網(wǎng)站優(yōu)化和完善，提高用戶體驗。
使用Lighthouse
接下來只介紹通過Chrome瀏覽器使用Lighthouse，其他使用方式自行了解，比如通過Chrome應(yīng)用商店安裝的方式、或者通過安裝拓展程序等。
1-打開F12，點擊Lighthouse
三種模式介紹：
-
導(dǎo)航模式（默認）
獲取性能分數(shù)和所有性能指標。
評估漸進式 Web 應(yīng)用功能。
在頁面加載后立即分析可訪問性。局限性
無法分析表單提交或單頁應(yīng)用轉(zhuǎn)換。
無法分析在頁面加載時無法立即提供的內(nèi)容。 -
時間跨度模式
測量某個時間范圍內(nèi)的布局偏移和 JavaScript 執(zhí)行時間，包括交互。
發(fā)現(xiàn)性能機會，以改善長期存在的頁面和 SPA 的體驗。
局限性
不提供總體性能分數(shù)。
無法分析基于時刻的性能指標（例如，最大內(nèi)容繪制）。
無法分析頁面狀態(tài)問題（例如，沒有無障礙功能類別） -
快照模式
分析當前狀態(tài)的頁面。
查找 SPA 或復(fù)雜表單深處的可訪問性問題。
評估隱藏在交互后面的菜單和 UI 元素的最佳實踐。局限性
不提供總體性能分數(shù)或指標。
無法分析當前 DOM 之外的任何問題（例如，沒有網(wǎng)絡(luò)、主線程或性能分析）。
報告解讀
重點關(guān)注頂部指標
Performance - 性能檢測，如網(wǎng)頁的加載速度、響時間等（重點）
Accessibility - 鋪助檢測，如網(wǎng)頁的可訪問性問題，HTML代碼標簽之類的優(yōu)化等
Best Practices - 實踐性檢測，如網(wǎng)頁安全性，如是否開啟HTTPS、網(wǎng)頁存在的漏洞等
SEO - Search Engine Optimisation搜索引擎優(yōu)化檢測，如網(wǎng)頁title是否符合搜索引擎的優(yōu)化標準等
PWA- 檢測對Progressive Web App的性能影響
另外Lighthouse 會衡量以下 Metrics 性能指標項：
-
詳解
首次內(nèi)容繪制（First Contentful Paint，F(xiàn)CP）。即瀏覽器首次將任意內(nèi)容（如文字、圖像、canvas 等）繪制到屏幕上的時間點。最大的內(nèi)容繪制（Largest Contentful Paint，LCP）加載頁面中元素到屏幕上的最長時間點。
可交互時間（Time to Interactive，TTI。指的是所有的頁面內(nèi)容都已經(jīng)成功加載，且能夠快速地對用戶的操作做出反應(yīng)的時間點。
速度指標（Speed Index，SI）。衡量了首屏可見內(nèi)容繪制在屏幕上的速度。在首次加載頁面的過程中盡量展現(xiàn)更多的內(nèi)容，往往能給用戶帶來更好的體驗，所以速度指標的值約小越好。
總阻塞時間（Total Blocking Time，TBT）表示此次分析過程中遇到的阻塞時間
累積布局偏移（Cumulative Layout Shift，CLS）是指一個頁面的布局在加載時的偏移程度。布局轉(zhuǎn)移的發(fā)生是因為瀏覽器傾向于異步加載頁面元素。更重要的是，你的頁面上可能存在最初尺寸未知的媒體元素。這種組合意味著瀏覽器在完成加載之前不知道各個元素會占用多少空間。因此，布局會發(fā)生劇烈變化。CLS的有趣之處在于它可以用各種工具進行客觀的測量，但它也是以用戶為中心的，因為每個用戶的設(shè)備都會影響你的網(wǎng)站布局的變化。雖然你不能控制這一方面，但你肯定可以采取預(yù)防措施，使其影響盡可能小。
-
以上六個指標所對應(yīng)的打分權(quán)重如下：
https://bharat23.github.io/lh-scorecalc/scorecalc/ -
業(yè)界指標衡量
當然也要關(guān)注影響性能的因素，比如頁面請求數(shù)、圖片大小、文件是否壓縮、是否使用 CDN 等。
由此可以制定出自己產(chǎn)品的性能指標，比如：
分析
如何確定頁面中加載了哪些不必要的資源呢？我們可以打開F12中的覆蓋率面板，查看當前使用資源的代碼覆蓋率，紅色表示未使用到的代碼。
使用Chrome中resource（性能）
前面說的都是頁面的性能測試方法，但其實頁面上還包含了大量的組件。比如：輸入框、滾動條、日歷等。而組件也會存在性能問題，應(yīng)該如何測試組件的性能呢？
-
使用開發(fā)者中的性能模塊錄制
-
停止錄制后會自動生成報告，對加載、執(zhí)行腳本、渲染、繪制的耗時求和即可。這個時間就反映組件的性能。
當前對組件的耗時沒有明確的標準，以使用流暢、無卡頓感為主，如果有性能優(yōu)化，可用該方法提供性能優(yōu)化數(shù)據(jù)。文章來源：http://www.zghlxwxcb.cn/news/detail-653185.html -
制定合適的測試策略文章來源地址http://www.zghlxwxcb.cn/news/detail-653185.html
需要重點關(guān)注的頁面性能： 用戶訪問量高的頁面； 用戶點擊量高的功能； 網(wǎng)站一級/部分二級重要的頁面； 監(jiān)控發(fā)現(xiàn)耗時久的頁面/功能； 用戶反饋卡頓的頁面/功能 需要注意： 配置一致：選用與客戶配置一致或相似的設(shè)備（操作系統(tǒng)、系統(tǒng)版本、系統(tǒng)設(shè)置、瀏覽器、瀏覽器版本等）進行測試； 數(shù)據(jù)一致：每次測試要用相同的測試數(shù)據(jù)； 操作一致：每次的操作場景要保持一致； 網(wǎng)絡(luò)一致：保持網(wǎng)絡(luò)穩(wěn)定，每次測試的網(wǎng)絡(luò)（WIFI、3G、4G、5G）和網(wǎng)速保持一致；
到了這里，關(guān)于【Lighthouse前端性能分析工具】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
