一、為什麼要測前端效能

日常效能測試，基本上針對介面的效能測試居多，很少涉及到前端頁面的效能測試。但影響使用者體驗的因素除了後端介面資料的返回，還有前端頁面的渲染等等。所以我們除了在開發的過程中注意程式碼的質量，同時還需要專業的網站測試工具輔助，讓我們知道自己的網頁還有哪些需要更為優化的方面。

Lighthouse是一個開源的自動化工具，用於幫助改進網路應用的質量。可將其作為一個 Chrome擴充套件程式執行，或從命令列執行。Lighthouse分析web應用程式和web頁面，收集關於開發人員最佳實踐的現代效能指標和見解，讓開發人員根據生成的評估頁面，來進行網站優化和完善，提高使用者體驗。

二、如何安裝

安裝方式一

通過chrome的應用商店搜尋Lighthouse下載安裝

安裝方式二

使用Node Cli，lighthouse依賴node 8或者更高的node版本

使用 npm install -g lighthouse 進行全域性安裝

安裝後，在cmd頁面中輸入lighthouse --help，如果出現此頁面說明命令列模式的lighthouse安裝成功

三、如何使用

1、瀏覽器中使用

瀏覽器在安裝好lighthouse之後，開啟需要測試的網頁，按F12開啟除錯模式，會在瀏覽器右上角出現Lighthouse圖示，如圖所示，點選Generate report 按鈕，即可以看到最終的效能檢測報告。

2、命令列中使用

開啟cmd，在其中輸入如下命令並回車，lighthouse命令後面跟的是待壓測的頁面地址以及引數

lighthouse 待測頁面地址 --chrome-flags="--headless" --only-categories=performance --locale zh

--chrome-flags="--headless"：該引數代表測試時採用瀏覽器無頭模式請求，不加該引數則會開啟瀏覽器進行請求（建議使用無頭模式，開啟瀏覽器會存在打不開待測地址的現象）

--only-categories=performance：該引數代表只採集該頁面的效能資料，不加該引數則會採集全部資料，包括SEO、Accessibility等資料，該引數根據實際需求新增

--locale zh：該引數代表生成的報告顯示為中文，不加該引數則生成的分析報告預設為英文

3、生成報告

指標含義：

首次內容繪製（First Contentful Paint）：即瀏覽器首次將任意內容（如文字、影象、canvas 等）繪製到螢幕上的時間點。

可互動時間（Time to Interactive）：指的是所有的頁面內容都已經成功載入，且能夠快速地對使用者的操作做出反應的時間點。

速度指標（Speed Index）：衡量了首屏可見內容繪製在螢幕上的速度。在首次載入頁面的過程中儘量展現更多的內容，往往能給使用者帶來更好的體驗，所以速度指標的值約小越好。

最大內容繪製（Largest Contentful Paint）：表示可視區“內容”最大的可見元素開始出現在螢幕上的時間點。

總的阻塞時間（Total Blocking Time）：表示此次分析過程中遇到的阻塞時間

四、踩坑記錄全集

1、存在部分網站地址在通過瀏覽器的Lighthouse分析時，無法分析成功，會一直卡住在分析頁面，具體原因未知，解決辦法是通過命令列模式的lighthouse進行分析即可解決

2、在使用命令列模式進行分析時，如果沒加--chrome-flags="--headless無頭模式，會存在瀏覽器無法開啟對應地址的問題，故使用命令測試時，建議都加上該引數

3、使用命令列模式測試部分頁面地址時，一直無法跳轉到正確頁面，原因是該頁面地址需要登入後才能正確跳轉，且跳轉的過程中存在重定向的地址。經過參考相關文件及實踐，目前有兩種方式可參考使用

第一種：在命令列中使用重定向後地址，通過--extra-headers引數新增Cookie資訊，這樣可以避免登入並跳轉到正確的地址

第二種：在命令列中使用最初的地址，在地址中拼接token引數，這樣可以直接跳轉至正確的地址

兩種方式均可解決該問題，實際測試過程中視情況而定使用哪種方案