什麼意思chrome devtool timeline框架概述矩形？

（點擊放大）什麼意思chrome devtool timeline框架概述矩形？

藍 - 裝載，黃色 - 腳本，紫色 - 渲染，綠色 - 繪畫

但也有不少概述長方形，那是什麼？

2013-02-21 leiyonglin

@leiyonglin

谷歌瀏覽器的開發者定義幀負載標準度量。它的每秒60幀，按常理與60Hz的屏幕刷新率一致。所以一幀應該約1/60秒。 16毫秒。每個垂直條代表一個框架，它應該在特定的時間限制內，您將其視爲一個水平條，以使您的頁面足夠響應。每個框架可以有多個事物從腳本，繪畫，加載進行。加載方式 - N/W請求像圖像傳輸（URL）...由此統計的矩形表示這些過程（藍色加載，黃色 - 腳本，紫色 - 渲染，綠色 - 繪畫）。矩形的無色部分表示瀏覽器（GPU/CPU）處理整個幀所花費的時間。你可以通過鏈接瞭解更多：
https://developers.google.com/events/io/sessions/gooio2012/209/

見截圖和分析一個1幀

enter image description here

在這一幀顯示，有2個油漆工作和一個JS事件跨越13.917毫秒提到的所有事件（加載，繪製等）被整理，其餘時間由瀏覽器，CPU/GPU

來源

2013-02-21 06:10:43 user1428716

非常感謝 – leiyonglin 2013-02-25 02:21:41

什麼意思chrome devtool timeline框架概述矩形？

回答

相關問題