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