我們在使用網(wǎng)站過程中，經(jīng)常會遇到慢的問題，為了找到原因，一般需要借助工具進行檢測，通過工具，可以檢測出前端站點加載資源的相關詳細情況。
今天，就給大家介紹幾款前端性能測試分析工具，結合性能測試工具，實現(xiàn)通過量化的方式測試網(wǎng)站中諸如首字節(jié)加載時間（time to first byte）或者渲染時間等表現(xiàn)。其中有些工具還會檢查資源是否被緩存，多個 CSS 或 JS 文件是否值得合并，最后自動給出前端性能優(yōu)化改進建議報告，如果對你有用的話，歡迎收藏轉發(fā)。
?因此我建立了一個軟件測試開發(fā)自學團，正在學習測試的小伙伴可以通過點擊下面的小卡片?
正在跳轉https://jq.qq.com/?_wv=1027&k=3T9tmL0t
1、 Lighthouse
Lighthouse是一個開源的自動化工具，用于幫助改進網(wǎng)絡應用的質(zhì)量?？蓪⑵渥鳛橐粋€ Chrome擴展程序運行，或從命令行運行。Lighthouse分析web應用程序和web頁面，收集關于開發(fā)人員優(yōu)秀實踐的現(xiàn)代性能指標和見解，讓開發(fā)人員根據(jù)生成的評估頁面，來進行網(wǎng)站優(yōu)化和完善，提高用戶體驗。
當為 Lighthouse 提供一個要審查的網(wǎng)址，它將針對此頁面運行一連串的測試，然后生成一個有關頁面性能的報告。可以參考失敗的測試，看看可以采取哪些措施來改進應用。
使用入門
運行 Lighthouse 的方式有兩種：作為 Chrome 擴展程序運行，或作為命令行工具運行。 Chrome 擴展程序提供了一個對用戶更友好的界面，方便讀取報告。 命令行工具允許您將 Lighthouse 集成到持續(xù)集成系統(tǒng)。
Chrome 擴展程序
下載?Google?Chrome 52 或更高版本，接著安裝 Lighthouse Chrome 擴展程序。
?命令行工具
安裝 Node，需要版本 5 或更高版本。
安裝 Lighthouse 作為一個全局節(jié)點模塊。
| npm install -g lighthouse |
針對一個頁面運行 Lighthouse 審查。
| lighthouse https://www.xxx.com/ |
傳遞 --help 標志以查看可用的輸入和輸出選項。
| lighthouse --help |
2、SpeedCurve
SpeedCurve 可以幫助追蹤自己的性能表現(xiàn)，以及競爭對手的性能表現(xiàn)。它可以用來查看某個因素在不同站點的速度表現(xiàn)，并且還提供了綜合監(jiān)控。綜合監(jiān)控是在受控環(huán)境中模擬網(wǎng)站。在其中可以自定義選項，比如網(wǎng)絡速度、設備、操作系統(tǒng)等等。
3、Pingdom
在Pingdom輸入 URL 地址，即可測試頁面加載速度，分析并找出性能瓶頸。幫助用戶找出影響網(wǎng)站速度的原因，并給出改善網(wǎng)頁性能的可行性方案，很適合做網(wǎng)站的用戶。
地址：
| https://www.pingdom.com/ https://tools.pingdom.com/ |
4、PageSpeed Insights
Google Page Speed Insight（PSI）是一款旨在優(yōu)化所有設備上的網(wǎng)頁、提高網(wǎng)頁加載速度的工具。它提供免費服務，可以分析網(wǎng)頁的內(nèi)容，提出建議，加快網(wǎng)頁的速度。它為您提供了關鍵指標，如第一個內(nèi)容繪制，總阻塞時間和更多。度量標準被分類為Field Data、Origin Summary,Lab Data,Opportunities、Diagnostics 和Passed Audits。
在線版：
| https://developers.google.com/speed/pagespeed/ |
你可以從chrome應用商店里找到PageSpeed Insights插件。
點擊open 在線分析性能，也可以測試本地的項目通過PageSpeed，點擊Start analyzing運行一會就顯示分析結果。
?分析后的效果：
5、SpeedTracker
SpeedTracker運行在WebPageTest上，可定期進行網(wǎng)站性能測試，并顯示各種性能指標隨時間的變化。這個功能可以幫助不斷評估網(wǎng)站，并查看新功能如何影響網(wǎng)站的性能，還可以定義預算并通過電子郵件和Slack獲取警報。
官網(wǎng)：
| https://speedtracker.org/ |
項目地址：
https://github.com/speedtracker
?
6、WebPageTest
WebPageTest是一個在線性能評測網(wǎng)站， 它是一個非常詳細且專業(yè)的web頁面性能分析工具，而且開源的！支持IE，Chrome，使用真正的瀏覽器(IE和Chrome)和真實的消費者連接速度，從全球多個地點運行免費網(wǎng)站速度測試。WebpageTest 主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四個功能。
項目地址：
| https://www.webpagetest.org/ |
可以運行簡單的測試或執(zhí)行高級測試，還會依據(jù)測試結果提供豐富的診斷信息，包括資源加載瀑布圖，頁面速度優(yōu)化檢查和改進建議，會給每項內(nèi)容一個最終的評級。
如果你打不開其官網(wǎng)，或者擔心安全問題，你可以自己拿源碼搭建這個平臺工具。
7、Sitespeed.io
Sitespeed.io 是開源的Web性能測試工具，用來衡量Web網(wǎng)站的綜合性能，幫助開發(fā)和測試人員分析網(wǎng)頁的加載速度和渲染性能。Sitespeed.io通過驅動瀏覽器(如：Chrome、Firefox)進行測試，然后從開發(fā)者的站點收集多個頁面的數(shù)據(jù)，并根據(jù)優(yōu)秀實踐等規(guī)則來分析這些網(wǎng)頁，然后將結果以HTML報告的形式輸出。
項目地址：
| https://github.com/sitespeedio/sitespeed.io |
安裝sitespeed.io之后，如果要分析一下百度PC首頁性能，執(zhí)行以下命令：
| sitespeed.io? -n 5 -v https://www.baidu.com |
該命令將會在chrome瀏覽器下調(diào)起URL為https://www.baidu.com 5次，產(chǎn)出了一個分析文件夾，打開index.html文件后，我們可以看到關于頁面性能的相關總結。文章來源：http://www.zghlxwxcb.cn/news/detail-752325.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-752325.html
到了這里，關于前端性能測試必備測試工具的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
