前言

當(dāng)一個(gè)站點(diǎn)內(nèi)容非常豐富岩臣，功能非常強(qiáng)大時(shí)烈评，它所需要加載的文件會(huì)是非常龐大的，打開站點(diǎn)對網(wǎng)絡(luò)的要求會(huì)很高工三，在弱網(wǎng)的情況下打開它會(huì)有更長時(shí)間的等待迁酸，對用戶來說是非常不友好的，這時(shí)候需要對前端性能進(jìn)行優(yōu)化徒蟆。

但是胁出，該從哪里入手呢？

我們可以想象一下段审，通常一個(gè)前端頁面主要是由 html全蝶、css、js寺枉、圖片等資源構(gòu)成抑淫。影響用戶瀏覽體驗(yàn)的可能有服務(wù)端數(shù)據(jù)返回的時(shí)間、網(wǎng)絡(luò)傳輸?shù)臅r(shí)間和頁面加載時(shí)間等因素姥闪。

現(xiàn)在知道了原因始苇，可以想辦法對這些因素進(jìn)行前端性能的測試，并針對性能測試的結(jié)果進(jìn)行優(yōu)化筐喳。

該如何進(jìn)行性能測試呢催式？其實(shí)有現(xiàn)成的工具可以供我們使用。

性能測試工具

現(xiàn)在有很多很好用的測試性能的工具避归，我們可以根據(jù)自己的需要選擇適合自己的荣月。

作用

測試工具可以計(jì)算出包括資源加載、頁面渲染梳毙、網(wǎng)絡(luò)傳輸以及服務(wù)器解析等綜合因素在內(nèi)的加載時(shí)間指標(biāo)哺窄，并對頁面性能進(jìn)行評估分析，找出影響性能的主要因素和瓶頸，并給出一定的優(yōu)化建議和解決方法萌业，從而提升用戶體驗(yàn)坷襟。

Lighthouse

作為一名使用谷歌開發(fā)的程序猿，使用 Lighthouse 再方便不過了生年。

Lighthouse 是谷歌開源的一款 Web 前端性能自動(dòng)化測試工具婴程，它主要用于幫助改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量，可以適用于網(wǎng)頁和移動(dò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 會(huì)對各個(gè)測試項(xiàng)的結(jié)果打分漱抓，為你優(yōu)化性能提供參考表锻，來幫助你看看使用哪些措施改進(jìn)你的應(yīng)用。

可以使用以下命令全局安裝到電腦上乞娄，或者 Chrome 拓展程序瞬逊，也可以使用瀏覽器的 F12 功能，打開開發(fā)者工具仪或。

npm install -g lighthouse

命令行和 Chrome 拓展程序确镊，這篇文章暫時(shí)不講，有興趣的同學(xué)可自行百度范删，我們現(xiàn)在主要使用瀏覽器的 F12 功能來具體看一下：

Lighthouse 初打開頁面

點(diǎn)擊 Generate report 就會(huì)開始分析打開的網(wǎng)站

分析中

分析結(jié)束后得出性能分析報(bào)告

指標(biāo)

以下是具體的指標(biāo)蕾域，每個(gè)指標(biāo)下面都有優(yōu)化建議。

1. 性能

性能

2. 可訪問性

可訪問性

3. 最佳實(shí)踐

最佳實(shí)踐

4. SEO

SEO

Speedcurve

Speedcurve 可以幫助追蹤自己的性能表現(xiàn)到旦，以及競爭對手的性能表現(xiàn)旨巷。它可以用來查看某個(gè)因素在不同站點(diǎn)的速度表現(xiàn)，并且還提供了綜合監(jiān)控添忘。綜合監(jiān)控是指在受控環(huán)境中模擬網(wǎng)站采呐，在其中可以自定義選項(xiàng)，比如網(wǎng)絡(luò)速度昔汉、設(shè)備懈万、操作系統(tǒng)等等。

Speedcurve 是一個(gè)前端性能綜合監(jiān)控網(wǎng)站靶病，通過輸入被測網(wǎng)站的 url 地址会通，進(jìn)行測試。

Speedcurve 首頁

選擇訪問的設(shè)備

選擇設(shè)備

得出性能報(bào)告

性能報(bào)告

也可以查看具體的性能指標(biāo)：

• 最大的圖片的渲染時(shí)間

圖片

• 首頁加載完成全部片段

首頁加載

• 渲染時(shí)間

渲染

• 頁面加載時(shí)間

頁面加載時(shí)間

• 頁面渲染

頁面渲染

• 交互

交互

• CPU

CPU

• 請求數(shù)

請求數(shù)

• 文件大小

文件大小

總結(jié)

我們可以通過自動(dòng)化測試工具去測試網(wǎng)頁的性能娄周，并根據(jù)性能報(bào)告去優(yōu)化前端頁面涕侈，以提升用戶的體驗(yàn)。

1. Lighthouse 可以從頁面性能煤辨、可訪問性裳涛、SEO 等幾方面給出優(yōu)化建議，開發(fā)人員可以根據(jù)評估頁面的標(biāo)準(zhǔn)和優(yōu)化建議众辨，來進(jìn)行網(wǎng)站優(yōu)化和完善端三，提升用戶體驗(yàn)。

2. Speedcurve 可以用來查看某個(gè)因素在不同站點(diǎn)的速度表現(xiàn)鹃彻，并且提供了綜合監(jiān)控郊闯，可以從多個(gè)方面去監(jiān)控前端的性能，甚至可以自定義選項(xiàng)蛛株，比如網(wǎng)絡(luò)速度团赁、設(shè)備、操作系統(tǒng)等谨履。