我們?cè)谑褂镁W(wǎng)站過(guò)程中，經(jīng)常會(huì)遇到慢的問(wèn)題，為了找到原因，一般需要借助工具進(jìn)行檢測(cè)，通過(guò)工具，可以檢測(cè)出前端站點(diǎn)加載資源的相關(guān)詳細(xì)情況。

今天，就給大家介紹幾款前端性能測(cè)試分析工具，結(jié)合性能測(cè)試工具，實(shí)現(xiàn)通過(guò)量化的方式測(cè)試網(wǎng)站中諸如首字節(jié)加載時(shí)間（time to first byte）或者渲染時(shí)間等表現(xiàn)。其中有些工具還會(huì)檢查資源是否被緩存，多個(gè) CSS 或 JS 文件是否值得合并，最后自動(dòng)給出前端性能優(yōu)化改進(jìn)建議報(bào)告，如果對(duì)你有用的話，歡迎收藏轉(zhuǎn)發(fā)。

1、 Lighthouse

Lighthouse是一個(gè)開源的自動(dòng)化工具，用于幫助改進(jìn)網(wǎng)絡(luò)應(yīng)用的質(zhì)量。可將其作為一個(gè) Chrome擴(kuò)展程序運(yùn)行，或從命令行運(yùn)行。Lighthouse分析web應(yīng)用程序和web頁(yè)面，收集關(guān)于開發(fā)人員優(yōu)秀實(shí)踐的現(xiàn)代性能指標(biāo)和見解，讓開發(fā)人員根據(jù)生成的評(píng)估頁(yè)面，來(lái)進(jìn)行網(wǎng)站優(yōu)化和完善，提高用戶體驗(yàn)。

當(dāng)為 Lighthouse 提供一個(gè)要審查的網(wǎng)址，它將針對(duì)此頁(yè)面運(yùn)行一連串的測(cè)試，然后生成一個(gè)有關(guān)頁(yè)面性能的報(bào)告。可以參考失敗的測(cè)試，看看可以采取哪些措施來(lái)改進(jìn)應(yīng)用。

1.1 使用入門

運(yùn)行 Lighthouse 的方式有兩種：作為 Chrome 擴(kuò)展程序運(yùn)行，或作為命令行工具運(yùn)行。Chrome 擴(kuò)展程序提供了一個(gè)對(duì)用戶更友好的界面，方便讀取報(bào)告。命令行工具允許您將 Lighthouse 集成到持續(xù)集成系統(tǒng)。

1.2 Chrome 擴(kuò)展程序

下載 Google Chrome 52 或更高版本，接著安裝Lighthouse Chrome 擴(kuò)展程序

1.3 命令行工具

安裝 Node，需要版本 5 或更高版本。

安裝 Lighthouse 作為一個(gè)全局節(jié)點(diǎn)模塊。

npm?install?-g?lighthouse

針對(duì)一個(gè)頁(yè)面運(yùn)行 Lighthouse 審查。

lighthouse?https://www.xxx.com/

傳遞 --help 標(biāo)志以查看可用的輸入和輸出選項(xiàng)。

lighthouse?--help

2、SpeedCurve

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

3、Pingdom

在Pingdom輸入 URL 地址，即可測(cè)試頁(yè)面加載速度，分析并找出性能瓶頸。幫助用戶找出影響網(wǎng)站速度的原因，并給出改善網(wǎng)頁(yè)性能的可行性方案，很適合做網(wǎng)站的用戶。

地址：

https://www.pingdom.com/
https://tools.pingdom.com/

4、PageSpeed Insights

Google Page Speed Insight（PSI）是一款旨在優(yōu)化所有設(shè)備上的網(wǎng)頁(yè)、提高網(wǎng)頁(yè)加載速度的工具。它提供免費(fèi)服務(wù)，可以分析網(wǎng)頁(yè)的內(nèi)容，提出建議，加快網(wǎng)頁(yè)的速度。它為您提供了關(guān)鍵指標(biāo)，如第一個(gè)內(nèi)容繪制，總阻塞時(shí)間和更多。度量標(biāo)準(zhǔn)被分類為Field Data、Origin Summary,Lab Data,Opportunities、Diagnostics 和Passed Audits。

在線版：

https://developers.google.com/speed/pagespeed/

你可以從chrome應(yīng)用商店里找到PageSpeed Insights插件。點(diǎn)擊open 在線分析性能，也可以測(cè)試本地的項(xiàng)目通過(guò)PageSpeed，點(diǎn)擊Start analyzing運(yùn)行一會(huì)就顯示分析結(jié)果。

分析后的效果：

5、SpeedTracker

SpeedTracker運(yùn)行在WebPageTest上，可定期進(jìn)行網(wǎng)站性能測(cè)試，并顯示各種性能指標(biāo)隨時(shí)間的變化。這個(gè)功能可以幫助不斷評(píng)估網(wǎng)站，并查看新功能如何影響網(wǎng)站的性能，還可以定義預(yù)算并通過(guò)電子郵件和Slack獲取警報(bào)。

官網(wǎng)：

https://speedtracker.org/

項(xiàng)目地址：

https://github.com/speedtracker

6、WebPageTest

WebPageTest是一個(gè)在線性能評(píng)測(cè)網(wǎng)站，它是一個(gè)非常詳細(xì)且專業(yè)的web頁(yè)面性能分析工具，而且開源的！支持IE，Chrome，使用真正的瀏覽器(IE和Chrome)和真實(shí)的消費(fèi)者連接速度，從全球多個(gè)地點(diǎn)運(yùn)行免費(fèi)網(wǎng)站速度測(cè)試。WebpageTest 主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四個(gè)功能。

項(xiàng)目地址：

https://www.webpagetest.org/

可以運(yùn)行簡(jiǎn)單的測(cè)試或執(zhí)行高級(jí)測(cè)試，還會(huì)依據(jù)測(cè)試結(jié)果提供豐富的診斷信息，包括資源加載瀑布圖，頁(yè)面速度優(yōu)化檢查和改進(jìn)建議，會(huì)給每項(xiàng)內(nèi)容一個(gè)最終的評(píng)級(jí)。

如果你打不開其官網(wǎng)，或者擔(dān)心安全問(wèn)題，你可以自己拿源碼搭建這個(gè)平臺(tái)工具。

7、Sitespeed.io

Sitespeed.io 是開源的Web性能測(cè)試工具，用來(lái)衡量Web網(wǎng)站的綜合性能，幫助開發(fā)和測(cè)試人員分析網(wǎng)頁(yè)的加載速度和渲染性能。Sitespeed.io通過(guò)驅(qū)動(dòng)瀏覽器(如：Chrome、Firefox)進(jìn)行測(cè)試，然后從開發(fā)者的站點(diǎn)收集多個(gè)頁(yè)面的數(shù)據(jù)，并根據(jù)優(yōu)秀實(shí)踐等規(guī)則來(lái)分析這些網(wǎng)頁(yè)，然后將結(jié)果以HTML報(bào)告的形式輸出。

項(xiàng)目地址：

https://github.com/sitespeedio/sitespeed.io

安裝sitespeed.io之后，如果要分析一下百度PC首頁(yè)性能，執(zhí)行以下命令：

sitespeed.io??-n?5?-v?https://www.baidu.com

該命令將會(huì)在chrome瀏覽器下調(diào)起URL為https://www.baidu.com 5次，產(chǎn)出了一個(gè)分析文件夾，打開index.html文件后，我們可以看到關(guān)于頁(yè)面性能的相關(guān)總結(jié)。