Chrome DevToolsフレームイベントタイミング

私はChromeを使用してアプリのアニメーションでボトルネックを分離しています。Chrome DevToolsフレームイベントタイミング

これは、フレームが遅すぎる約20 + msを奪っていることを示しています。しかし、フレームを拡大して何が入っているのかを見ると、20 + msのjQueryコールが表示されますが、実際のRecalculate Styleイベントは5msを少し超えます。

遅延を引き起こす原因を確認するにはどうすればよいですか？私は他の15msのが何であるかを見ることができない

総イベント時間：

Chrome DevTools showing total time of jQuery function call

jQueryの関数内で "再計算スタイル" イベント

Chrome DevTools showing split of timing for Recalculate Style event

スタック」の前にスタイルを再計算する」

Chrome DevTools showing stack for Recalculate Style event

出典

2013-12-09 Willshaw Media

合計22.93msを構成する他のネストされたイベントは、再計算スタイルイベントの直後に表示されます。たとえば、合計9msの関数呼び出しがあることがわかります。紫色の数字はレンダリング時間を示し、黄色の数字はスクリプティング時間を示します。

Parent event

ポップアップを閉じた場合は、そのコール構成するすべてのイベントがその下に詳述されていることがわかります。

nested events

出典

2013-12-10 20:01:53

私はあなたの答えにコメントしたと思いました。拡張イベントを表示するためのスクリーンショットを追加し、関数呼び出しの側に表示される唯一のものは再計算スタイルイベントです –

最初のスクリーンショットを参照していますか？それが当てはまる場合、それ以上の詳細はありません。問題のコードは、5行目のjquery-2.0.3-min.jsにあります。しかし、これはあまり役に立たない縮小バージョンです。デバッグを容易にするために、開発中に非圧縮バージョンに切り替えることができます。 –

ああ、それは良い点です。多分それが助けになるでしょう。 jQuery関数呼び出し自体にはそれほど時間がかかりますか？私はその機能が何であるかを見るために圧縮されていないバージョンを使用します –

Chrome DevToolsフレームイベントタイミング

答えて

関連する問題