Chrome開發工具中的大型「空閒」欄框架時間軸

我正在使用繪製一些形狀（圓弧，lineTo等）。沒有太花哨，但我注意到一些偶爾的生澀的動畫。我在Chrome開發工具中使用時間軸檢查器進行了輪廓分析，並且每幀看到大量空閒時間，其中一些會將FPS降至60以下（請參見截圖）。有沒有已知的原因或解決方案？Chrome開發工具中的大型「空閒」欄框架時間軸

frames with lots of idle time

來源

2014-04-19 endemic

類似問題：[one]（http://stackoverflow.com/questions/12302286/what-causes-chrome-timeline-frame-to-have-so-much-empty-white-space?rq=1）， [two]（http://stackoverflow.com/questions/11423330/web-inspector-profiling-with-frames-finding-the-cause-of-performance-problems）， [three]（http：// stackoverflow.com/questions/18257206/extra-render-time-in-chrome-dev-tools-timeline-frames）。沒有有用的信息。幾個提及[Nat Duca發佈的G +帖子]（https://plus.google.com/+NatDuca/posts/BvMgvdnBvaQ?e=-RedirectToSandbox），但我沒有做任何3D轉換，所以我沒有不認爲它適用。 – endemic

從[DevTools文檔]（https://developers.google.com/chrome-developer-tools/docs/timeline#frames_mode）：「您可能會注意到框架的區域呈淺灰色或清晰（空心）。區域分別表示：1.）未由DevTools檢測的活動2.）顯示刷新週期之間的空閒時間下面記錄中的幀顯示未檢測到的活動和空閒時間。但是，這並不能解釋如何解決問題。如果幀的空白部分是空閒時間，爲什麼會導致幀跳過？ – endemic

我有同樣的問題;幀以3ms結束，但有空閒時間，有時爲200ms;是什麼賦予了？破碎的開發工具？ – AlexG

將圖形繪製到畫布上顯然計算起來很昂貴，並且必須屬於「未由DevTools檢測的活動」。首先將圖形繪製到屏幕外的畫布緩存，然後使用drawImage將其複製回主畫布，從而解決了我的性能問題。

來源

2014-08-22 11:18:50 endemic

是否有可能在改進之後發佈時間軸配置文件的外觀？ – sethro

@sethro似乎界面已經改變了一點，但[這裏有一個類似的截圖]（http://imgur.com/0WQPg8b）。注意，計算/渲染在每個〜16ms幀內都很好。 – endemic

比較那些峯到存儲器圖。根據我的經驗，大量閒置峯值似乎與垃圾收集一致。

來源

2014-06-17 15:46:04 rockinghelvetica

Chrome開發工具中的大型「空閒」欄框架時間軸

回答

相關問題