MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

效能

效能工具給你網站整體反應度、JavaScript 與版面效能的洞察資訊。你可以使用效能工具在一段時間中錄製、測試你的網站的效能。這個工具會顯示瀏覽器在繪製你的網站時的所作之事,其總覽以及對應之畫框率的圖表。

你可以在這三個子工具中,了解效能數據多方面的深入資訊:

  • Waterfall 顯示瀏覽器的各種行為,諸如組版、JavaScript、重繪、回收資源等
  • Call Tree 顯示瀏覽器花費在 JavaScript 函式上的時間
  • Flame Chart 顯示錄製全程中的 JavaScript 呼叫堆疊


由此開始

UI Tour

從這裡開始探索效能工具,對介面的快速導覽。

How to
最基本的任務:開啟工具、建立、儲存、載入與設定錄製。

效能工具的元件

Frame rate
了解你網站的整體回應速度。
Call Tree
尋找你網站中的 JavaScript 瓶頸。
Waterfall
了解當用戶與你的網站互動時,瀏覽器在做些什麼。
Flame Chart
看看錄製過程中某個 JavaScript 函式在那時執行。

應用場景

Animating CSS properties
使用 Waterfall 了解瀏覽器如何更新頁面,各種不同的 CSS 屬性動畫如何影響效能。
 
Intensive JavaScript
使用格率與 Waterfall 工具,以調查長時間執行的 JavaScript 帶來的效能問題,並了解如何使用 worker 來幫助解決問題。

文件標籤與貢獻者

標籤: 
 此頁面的貢獻者: irvinfly
 最近更新: irvinfly,