devtoolsのタイムラインを正しく理解するには？

私の質問はChrome DevToolsについてですが、具体的にはタイムラインタブについて質問があります。私は何度も読んだことがあるので、ブラウザは60fpsの速度でピクセルをレンダリングする必要があります。ときには、実行中の重いJSがあり、60fpsが起きないようにしています。また、DOMツリー（一部または全部のツリー）の再計算と再描画を引き起こすCSSとJSがある場合、1つのフレームに対して〜16ms以上かかる場合もあります。ここで我々のアプリから、このような長いフレームの画像は、次のとおりです。devtoolsのタイムラインを正しく理解するには？

[OK]を、ここで私は2つの要求がそんなに時間（192ms +約14msを消費し）を取ることを、はっきりと見ることができ、そのブラウザは、60fpsのをペイントすることはできませんそれは近くにも得られません。

ここものの、別の画像です：

だから、今、多くの方が良いでしょう。これは〜42fpsです。しかし今、私は理由を理解できません。

私は "更新レイヤーツリー"と "ペイント"機会をいくつか持っています。いくつかのマウスイベントですが、それらのすべては< = 1msです。

このフレームには、このような「イベント」が12個あります。そのうち10個は0.30msよりも少ないので、それらを合計すると16ms（正確には3.57）になりますが、Chromeはこのフレームが23.9msだと言います。

なぜ私はここにジャンクがあるとタイムラインが言っているのですか？どのようにそれを取り除くために私は何をすべきか、ボトルネックがどこにあるかを知る方法は？

タイムラインを調べる際に何かが間違っているので、私はここで少し混乱しています。そのような "ジャンク"を取り除く方法とその検出方法に関する詳細な説明や詳細なチュートリアルを教えてください。私はすでに記事のカップルを読んで、ほとんどパフォーマンスにUdemyのコースを終えたけれども、私はまだ混乱している。..

は私がいることをそのオープンスペースで実行する「ネイティブ」のコードがあると思われるあなたに

出典

2016-05-25 aprok