前言
當一個站點內容非常豐富，功能非常強大時，它所需要加載的文件會是非常龐大的，打開站點對網絡的要求會很高，在弱網的情況下打開它會有更長時間的等待，對用戶來說是非常不友好的，這時候需要對前端性能進行優化。
但是，該從哪里入手呢？
我們可以想象一下，通常一個前端頁面主要是由 html、css、js、圖片等資源構成。影響用戶瀏覽體驗的可能有服務端數據返回的時間、網絡傳輸的時間和頁面加載時間等因素。
現在知道了原因，可以想辦法對這些因素進行前端性能的測試，并針對性能測試的結果進行優化。
該如何進行性能測試呢？其實有現成的工具可以供我們使用。
性能測試工具
現在有很多很好用的測試性能的工具，我們可以根據自己的需要選擇適合自己的。
作用
測試工具可以計算出包括資源加載、頁面渲染、網絡傳輸以及服務器解析等綜合因素在內的加載時間指標，并對頁面性能進行評估分析，找出影響性能的主要因素和瓶頸，并給出一定的優化建議和解決方法，從而提升用戶體驗。
Lighthouse
作為一名使用谷歌開發的程序猿，使用 Lighthouse 再方便不過了。
Lighthouse 是谷歌開源的一款 Web 前端性能自動化測試工具，它主要用于幫助改進網絡應用的質量，可以適用于網頁和移動端。
Lighthouse 可以分析 web 應用程序和 web 頁面，收集關于開發人員最佳實踐的現代性能指標和見解，讓開發人員根據生成的評估頁面，來進行網站優化和完善，提升用戶體驗。
Lighthouse 的測試項包括頁面性能、可訪問性、最佳實踐、SEO 、PWA（Progressive Web apps，漸進式 Web 應用）。Lighthouse 會對各個測試項的結果打分，為你優化性能提供參考，來幫助你看看使用哪些措施改進你的應用。
可以使用以下命令全局安裝到電腦上，或者 Chrome 拓展程序，也可以使用瀏覽器的 F12 功能，打開開發者工具。
npm install -g lighthouse
命令行和 Chrome 拓展程序，這篇文章暫時不講，有興趣的同學可自行百度，我們現在主要使用瀏覽器的 F12 功能來具體看一下：
點擊 Generate report 就會開始分析打開的網站
分析結束后得出性能分析報告
以下是具體的指標，每個指標下面都有優化建議。
- 性能
- 可訪問性
- 最佳實踐
- SEO
Speedcurve
Speedcurve 可以幫助追蹤自己的性能表現，以及競爭對手的性能表現。它可以用來查看某個因素在不同站點的速度表現，并且還提供了綜合監控。綜合監控是指在受控環境中模擬網站，在其中可以自定義選項，比如網絡速度、設備、操作系統等等。
Speedcurve 是一個前端性能綜合監控網站，通過輸入被測網站的 url 地址，進行測試。
選擇訪問的設備
得出性能報告
也可以查看具體的性能指標：
- 最大的圖片的渲染時間
- 首頁加載完成全部片段
- 渲染時間
- 頁面加載時間
- 頁面渲染
- 交互
- CPU
- 請求數
- 文件大小
總結
我們可以通過自動化測試工具去測試網頁的性能，并根據性能報告去優化前端頁面，以提升用戶的體驗。
Lighthouse 可以從頁面性能、可訪問性、SEO 等幾方面給出優化建議，開發人員可以根據評估頁面的標準和優化建議，來進行網站優化和完善，提升用戶體驗。
Speedcurve 可以用來查看某個因素在不同站點的速度表現，并且提供了綜合監控，可以從多個方面去監控前端的性能，甚至可以自定義選項，比如網絡速度、設備、操作系統等。
