如何使用Firefox性能工具測試網站性能

2021-01-05 三牛講Java

尋找站點性能問題的Web開發人員應在Firefox Web開發人員工具包中使用此工具,那麼如何使用Firefox性能工具測試網站性能?下面講一一介紹。

Firefox是用戶的絕佳網絡瀏覽器。它也是開發人員最好的瀏覽器之一。為什麼?因為開源應用程式包含許多專門為開發人員設計的工具。這些工具包括Page Inspector(用於檢查和修改頁面的HTML和CSS),Web Console(用於記錄與網頁關聯的信息)和JavaScript Debugger。

Firefox

「 Web開發人員」菜單中的另一個工具是「性能」工具,它使您能夠深入了解站點的響應能力,JavaScript和布局性能。該工具還允許您隨時間創建網站的記錄或配置文件。停止錄製後,將向您提供瀏覽器中呈現網站的所有操作的概述。

性能帶有四個將要使用的子工具:

瀑布: 顯示瀏覽器在您使用被測試網站時執行的不同操作。調用樹: 顯示JavaScript函數。火焰圖: 顯示JavaScript調用堆棧。分配視圖: 顯示您的代碼進行的堆分配。如何啟動Firefox性能工具

您必須做的第一件事是啟動性能工具。為此,請打開Firefox,然後單擊右上角的菜單按鈕。單擊Web開發人員| 性能。這將在瀏覽器窗口的底部打開一個新窗格。

接下來,瀏覽到相關站點,然後單擊「開始錄製性能」按鈕。錄製開始後,請在要測試的站點內採取措施。然後,性能工具將開始收集數據。

性能緩衝區將很快填滿。一旦填滿,它將開始覆蓋較早的數據,因此應確定是否要保留第一個數據,以觀察緩衝區百分比並在達到100%之前停止記錄。

Performance停止錄製後,它將顯示發現的內容。然後,您可以滾動瀏覽每條記錄並選擇一個對象,這將在右窗格中打開詳細信息(圖C)。

圖C

您將在詳細信息內看到一個連結(在上面的實例中,該連結為osd.js:1)。單擊該連結以打開調試器,該調試器將顯示與所選對象關聯的代碼(圖D)。

圖D

然後,您可以返回到「性能」選項卡,以繼續梳理已記錄配置文件中的每條記錄。單擊「調用樹」(圖E)或「火焰圖」,以進一步了解代碼的性能。

圖E

如果要保存此配置文件,請單擊左側邊欄中的「保存」。這會將配置文件作為JSON文件下載到本地驅動器。您可以通過單擊左側邊欄中的導入按鈕(時鐘右側的圖標)來查看保存的配置文件。打開保存的JSON文件,您可以瀏覽以前記錄的配置文件。

Firefox

Firefox Performance Tool是每個Web開發人員都應使用的工具,可以幫助您解決網站未達到您的標準的原因。它易於使用,免費,並且為您的調試需求提供了足夠多的信息。

相關焦點

  • 性能測試:Firefox 73 vs Chrome 80
    本周 Firefox 73 穩定版已經發布,同時 Firefox 74 開始進入測試版狀態,Phoronix 網站的創始人和主要作者 Michael Larabel 第一時間使用 Phoronix
  • 性能測試:Firefox 73 vs Chrome 80 - OSCHINA - 中文開源技術交流...
    本周 Firefox 73 穩定版已經發布,同時 Firefox 74 開始進入測試版狀態,Phoronix 網站的創始人和主要作者 Michael Larabel 第一時間使用 Phoronix
  • 12 個最好的免費網站速度和性能測試工具
    而且,很慢的加載速度會對網站訪問者產生消極的影響。如果你的網站加載速度很慢,需要等待一段時間才能加載,那麼用戶很有可能不會再次訪問 這個網站。所以,為了解決以上說到的問題,我們收集整理了一個最好的免費網站速度測試和分析工具列表。接下來介紹的工具都是免費,而且會提供非常詳細的數據報告給用戶,幫助用戶做些必要的補救措施。
  • 12 個免費在線的 Web 網站性能測試工具
    從世界各地多個地點,使用真正的瀏覽器(IE和Chrome),並在真正的消費者連接速度,對你的網站進行速度測試。您可以運行簡單的測試,或執行多步交易,視頻採集,內容封鎖和更先進的測試,包括。FreeSpeedTest.com 是最棒的網站速度測試工具之一,用於測試網站訪問速度和加載時間,可模擬來自全球各地的請求。
  • 如何使用Furmark測試顯卡(GPU)的性能
    Furmark是Zone3D開發的一款基準測試工具,它主要通過皮毛渲染算法來測試顯卡的性能。下面給大家介紹下如何使用Furmark來測試顯卡功能。首先,請到百度下載Furmark這個測試工具,推薦從官方網站直接下載最新的版本。
  • 實訓及課程設計指導——如何應用開源Apache JMeter性能測試工具
    軟體項目實訓及課程設計指導——如何應用開源Apache JMeter性能測試工具1、軟體應用系統的性能不僅需要優化、也需要度量和監控提高軟體應用系統的整體性能是一個「系統工程」,需要設計和開發人員從各個不同的層次和方面對軟體應用系統實施性能優化的各種措施。
  • 12款在線網站速度和性能測試工具
    網站的訪問速度對於一個網站非常重要,沒有一個人會喜歡速度慢的網站。下面是12款在線測試網站的訪問速度和性能的工具,在優化網站的時候很有用。Pingdom測試網站每個元素的加載速度,比如html、圖片、JS文件等等。
  • 幾種性能測試工具的總結
    我們經常會談論性能、並發等問題,但是衡量性能不是說寫段代碼循環幾百次這麼簡單。最近從項目上的同事了解到了代碼化的測試性能測試工具 k6,以及結合之前用過的Java 微基準測試 (JMH)、AB (Apache Benchmark) 測試、Jmeter 做一下總結。
  • 手機性能測試工具
    手機性能測試工具 系統安全 大小: 6.41M 版本: 1.0
  • 開發者最愛的6種實用型性能測試工具
    無論是開發者,還是企業,擁有一款實用、且操作起來順手的性能測試工具,是再好不過的一件事情,這樣,不僅在使用上節省時間,在效能上也能充分發揮作用。而在選擇這類性能測試工具時,我們需要考慮的問題也有很多,如成本、實時性、便利性等。下面,給大家介紹幾款目前使用較廣泛的性能測試工具:商業性能測試工具:LoadrunnerLoadRunner是原Mercury公司開發的產品, 2006 年被HP收購。它是一種高規模適應性的自動負載測試工具,它能預測系統行為,優化性能。
  • ContiPerf性能測試工具
    ContiPerf 是一個輕量級的測試工具能輕鬆地利用的JUnit 4的性能測試,測試案例,例如連續性能測試。它的靈感來自JUnit 4中與注釋簡單測試配置,以及用JUnitPerf的包裝性能測試單元測試的想法,但更強大和更容易使用。它使用定義測試執行的特點和性能要求的Java註解。您可以標記一個測試運行一定次數,或將不斷提出一定的時間執行。示例測試代碼:  import org.junit.*;   import org.databene.contiperf.
  • 10大主流壓力/負載/性能測試工具推薦
    性能測試還有另一個目標就是建立一組被測系統的基準數據。應用在網絡上的性能測試重點是利用成熟先進的自動化技術進行網絡應用性能監控、網絡應用性能分析和網絡預測。雖然三種測試的目的截然不同,但其測試操作的環節都是基本一致的,因此一次測試過程中完全可以包含性能測試、負載測試、壓力測試三個方面的內容,所使用的測試工具往往大同小異。
  • 這 5 個前端性能測試工具,高薪大佬們都在用
    使用方法● 瀏覽器 F12 功能在最新的谷歌瀏覽器 或 Edge 瀏覽器 訪問一個被測試網站,按 F12 ,打開開發者工具,看到最後一個項就是 Lighthouse可以通過 docker 鏡像或 npm 方式來使用。這個工具,並不是單一的,而是一組工具集合,可以根據自己需要,選擇適合自己的工具。
  • 熱門的網站測試工具
    用來分析網站速度與性能。這款工具安裝起來非常方便,另外值得一提的是,它也是測試行動裝置的最佳性能測試工具。2.PingdomLoad Impact是一款非常方便、免費的網站性能測試工具,它不僅可以測出網站在同時刻有多少不同的用戶訪問,還可以測出網站在不同伺服器上的加載時間、還可在同一時間從不同的地點發起50個並發請求,然後分析出你的網頁加載的速度
  • 網站優化加速監測診斷工具GTmetrix|GTmetrix如何去使用!
    GTmetrix可讓您深入了解網站的加載情況,並就如何優化網站提供可操作的建議一款網站加速監測工具。設置受監控的警報:如果您的網頁觸發某個條件,請收到提醒!根據PageSpeed / YSlow得分,頁面加載時間,總頁面大小等設置多個條件,並在觸發任何內容時收到電子郵件通知。從多個區域進行測試:分析來自世界各地的網站加載情況,了解該地區的用戶將如何看到它。
  • Web必備性能壓力測試工具WebBench與ApcheBench(ab)詳解
    壓力測試是一項很重要的工作。比如在一個網站上線之前,能承受多大訪問量、在大訪問量情況下性能怎樣,這些數據指標好壞將會直接影響用戶體驗。但是,在壓力測試中存在一個共性,那就是壓力測試的結果與實際負載結果不會完全相同,就算壓力測試工作做的再好,也不能保證100%和線上性能指標相同。面對這些問題,我們只能儘量去想方設法去模擬。
  • Google 出品網站性能質量及錯誤分析工具
    今天給大家推薦一款由 Google 出品的 Chrome 插件:Lighthouse,它能夠分析網站的性能、質量及錯誤等。市面上類似工具很少,可以看出越大的公司對性能和質量越看重。這款工具通過 Chrome 安裝後使用也非常的簡單,點擊 Generate report 即可。
  • 移動端性能測試必備工具PerfDog性能狗
    致移動遊戲&應用性能測試分析的夥伴們:你是否會因移動遊戲&APP性能問題,而備受煎熬?你又是否因尋找性能測試分析工具,而彷徨迷茫?你是否因工具需要,而嘗試各種ROOT/越獄?你是否因工具準確性,而被逼各類花式複測驗證?
  • 火狐插件火狐黑客插件將Firefox變成黑客工具的七個插件
    一些插件對於滲透測試人員和安全分析人員來說是相當有用的。這些滲透測試插件幫助我們執行不同類型的攻擊,並能直接從瀏覽器中更改請求頭部。對於滲透測試中涉及到的相關工作,使用插件方式可以減少我們對獨立工具的使用。在這篇簡明的文章中,我們列舉了一些流行的和有趣的Firefox插件,這些插件對滲透測試人員來說是非常有用的。這些插件是多樣的,有信息收集工具,也有攻擊攻擊。
  • Firefox 60 正式發布:提升性能並更注重用戶隱私的保護
    下載地址:https://www.mozilla.org/zh-CN/firefox/all/官方的發布說明顯示,該版本包含的更改為用戶提供了更多內容和更多方法來定製自己的 New Tab/Firefox Home,還引入了對 Web Authentication API 的支持,這意味著你可以使用 YubiKey