8 種用於前端性能分析工具

做者：Mahdhi Rezvi
譯者：前端小智
來源：blog.bitsrc

點贊再看，微信搜索 【大遷世界】,B站關注 【前端小智】這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

最近開源了一個 Vue 組件，還不夠完善，歡迎你們來一塊兒完善它，也但願你們能給個 star 支持一下，謝謝各位了。

github 地址：https://github.com/qq44924588...

咱們能夠編寫一些漂亮，且吸引人的網站，但若是該網站沒法快速加載到瀏覽器中，人們每每會跳過它。 儘管有許多性能規則，但歸根結底，這全都取決於加載時間。

根據 Jakob Nielson說法，在網建的網站時，須要注意如下幾點：

• 小於100毫秒加載速度纔是爽的
• 100ms到300ms 感受良好
• 一秒鐘大概是用戶思路不被打斷的極限。用戶會感受到延遲，但還能夠接受
• 47%的用戶但願網頁能在兩秒或更短的時間內加載
• 40% 的用戶若是網頁加載超過 3 秒，表示會放棄該網站
• 10秒左右是用戶注意力的極限。 大多數用戶會在10秒後離開你的網站

如上所述，即便在最差的網絡帶寬上，也須要確保頁面儘快加載。 但這個提及來容易作起來難。

爲了能幫助更好的實現這一目標，這裏推薦了幾個性能分析工具。

1. PageSpeed Insights

這是一個免費的服務，分析網頁的內容，而後提出建議，使該網頁更快。它爲您提供了關鍵指標，如第一個內容繪製，總阻塞時間和更多。度量標準被分類爲Field Data、Origin Summary,Lab Data,Opportunities、Diagnostics 和Passed Audits。它還爲咱們提供了進一步改進的建議。

2. Lighthouse

Lighthouse 是一個開源的自動化工具，用於改進網絡應用的質量。 你能夠將其做爲一個 Chrome 擴展程序運行，或從命令行運行。 你爲 Lighthouse 提供一個您要審查的網址，它將針對此頁面運行一連串的測試，而後生成一個有關頁面性能的報告。

今後處，您能夠失敗的測試爲指示器，看看能夠採起哪些措施來改進您的應用。

注意: Lighthouse 目前很是關注 Progressive Web App (PWA) 功能，如「添加到主屏幕」和離線支持。不過，此項目的首要目標是針對網絡應用質量的各個方面提供端到端審查。

運行 Lighthouse 的方式有兩種：做爲 Chrome 擴展程序運行，或做爲命令行工具運行。 Chrome 擴展程序提供了一個對用戶更友好的界面，方便讀取報告。 命令行工具容許您將 Lighthouse 集成到持續集成系統。

3. WebPageTest

WebPageTest是一個在線的免費性能評測網站，支持IE，Chrome，使用真正的瀏覽器(IE和Chrome)和真實的消費者鏈接速度，從全球多個地點運行免費網站速度測試。能夠運行簡單的測試或執行高級測試，包括多步驟事務、視頻捕獲、內容阻塞等等。還將依據測試結果提供豐富的診斷信息，包括資源加載瀑布圖，頁面速度優化檢查和改進建議，會給每一項內容一個最終的評級。

WebpageTest 主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四個功能，咱們主要關注Advanced Testing。

如何使用WebPageTest

• 填寫須要測試的URL
• 填寫Test Location，下拉選擇便可，可選移動端設備（包括Android、IOS），可選PC端（分地區，每一個地區可支持的瀏覽器不一樣）
• 可選支持的瀏覽器
• 點擊右側START TEST

4. Pingdom

我最喜歡的功能是分析後的的摘要，其中會爲咱們提供有關網站內容和請求的摘要。 我發現這對於瞭解網頁上提供的內容有很大幫助。

5. Sitespeed.io

Sitespeed.io 是一款開源的Web性能測試工具，用來衡量Web網站的綜合性能，幫助開發和測試人員分析網頁的加載速度和渲染性能。

Sitespeed.io經過驅動瀏覽器（如：Chrome、Firefox）進行測試，而後從開發者的站點收集多個頁面的數據，並根據最佳實踐等規則來分析這些網頁，而後將結果以HTML報告的形式輸出。

Sitespeed.io 知足了一個完整的Web性能測試工具所需的3個關鍵功能：

1. 使用真實的瀏覽器測試Web站點，模擬真實的用戶進行請求鏈接，收集以用戶爲中心的重要指標，如：響應速度指標、第一視覺呈現
2. 可分析頁面的組成，並給出相應性能反饋，增長終端用戶的使用體驗友好性
3. 經過收集和保存頁面組成的數據，便於跟蹤定位

6. Calibre

Caliber 是一款多功能的性能監控套件，可幫助你監控和審覈網站的性能。 它還容許你經過指定測試服務器的位置，管理模擬的廣告首選項甚至模擬移動設備來模擬現實條件。 它還容許你設置預算，並經過爲你提供性能降低來幫助你將預算保持在預算以內。

7. SpeedCurve

SpeedCurve 既可讓你追蹤競爭對手的性能表現，也能夠追蹤本身的性能表現。

使用 SpeedCurve 時，你能夠查看某個因素在不一樣站點的速度表現。對於移動用戶來講，他們但願網站在手機上加載起來要快於電腦，若是感到加載遲緩，每每會迅速關上網頁，因此，網站的響應速度對他們很重要。

SpeedCurve 還提供了綜合監控。綜合監控是在受控環境中模擬你的網站。你能夠自定義選項，好比網絡速度、設備、操做系統等等。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

8. SpeedTracker

SpeedTracker是一個運行在WebPageTest之上的工具，可在你的網站上進行按期的性能測試，並直觀顯示各類性能指標隨時間變化的方式。 這使你能夠不斷評估網站，並查看新功能如何影響網站的性能。 你還能夠定義預算並經過電子郵件和Slack獲取警報。

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：https://blog.bitsrc.io/perfor...

交流

文章每週持續更新，能夠微信搜索「 大遷世界 」第一時間閱讀和催更（比博客早一到兩篇喲），本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，整理了不少個人文檔，歡迎Star和完善，你們面試能夠參照考點複習，另外關注公衆號，後臺回覆福利，便可看到福利，你懂的。