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、DiagnosticsPassed Audits。它還為我們提供了進一步改進的建議。

clipboard.png

2. Lighthouse

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

從此處,您可以失敗的測試為指示器,看看可以采取哪些措施來改進您的應用。

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

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

clipboard.png

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

clipboard.png

4. Pingdom

我最喜歡的功能是分析后的的摘要,其中會為我們提供有關網站內容和請求的摘要。 我發現這對于了解網頁上提供的內容有很大幫助。

clipboard.png

5. Sitespeed.io

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

Sitespeed.io通過驅動瀏覽器(如:Chrome、Firefox)進行測試,然后從開發者的站點收集多個頁面的數據,并根據最佳實踐等規則來分析這些網頁,然后將結果以HTML報告的形式輸出。

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

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

clipboard.png

6. Calibre

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

clipboard.png

7. SpeedCurve

SpeedCurve 既可以讓你追蹤競爭對手的性能表現,也可以追蹤自己的性能表現。

使用 SpeedCurve 時,你可以查看某個因素在不同站點的速度表現。對于移動用戶來說,他們希望網站在手機上加載起來要快于電腦,如果感到加載遲緩,往往會迅速關上網頁,所以,網站的響應速度對他們很重要。

SpeedCurve 還提供了綜合監控。綜合監控是在受控環境中模擬你的網站。你可以自定義選項,比如網絡速度、設備、操作系統等等。

clipboard.png

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

8. SpeedTracker

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

clipboard.png


代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

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

交流

文章每周持續更新,可以微信搜索「 大遷世界 」第一時間閱讀和催更(比博客早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了很多我的文檔,歡迎Star和完善,大家面試可以參照考點復習,另外關注公眾號,后臺回復福利,即可看到福利,你懂的。

閱讀 1.9k

終身學習者
我要先堅持分享20年,大家來一起見證吧。
avatar
前端小智
前端開發工程師

我不是什么大牛,我其實想做的就是一個傳播者。內容可能過于基礎,但對于剛入門的人來說或許是一個窗口,一個解惑之窗。我要先堅持分享20年,大家來一起見證吧。

56.8k 聲望
9.8k 粉絲
0 條評論
avatar
前端小智
前端開發工程師

我不是什么大牛,我其實想做的就是一個傳播者。內容可能過于基礎,但對于剛入門的人來說或許是一個窗口,一個解惑之窗。我要先堅持分享20年,大家來一起見證吧。

56.8k 聲望
9.8k 粉絲
宣傳欄
一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>