ブラウザレイアウトのパフォーマンスを測定する方法

Question

大規模なWebアプリケーションでパフォーマンスの回帰をトラブルシューティングしています。私は最近、IFRAMEを削除して内容を直接元のDOMに入れて、パフォーマンスを改善しました。確かに、最初の読み込み時間は良いですが、私は奇妙な問題を発見しました。

このiframeを削除すると、さまざまなレイアウト（アニメーションやスクロール）の変更が大幅に遅くなるようです。私はそれがjavascriptではないことを知るために絞り込んだ。

タイマーとイベントで実行されていたすべてのJavaScriptを削除しました。

1秒のCSSトランジションを持つ要素にクラス名を設定するだけで、style.topとstyle.leftを変更するとパフォーマンスが低下することがあります。 （それはすでに絶対的に位置づけられている）。この要素は非常にゆっくりと新しい場所に移動します。IFRAMEでは40 + FPSでしたが、約5-10 FPSのように見えます。

実際のブラウザレイアウトのパフォーマンスを測定する方法があるかどうかは疑問です。私はこの問題をSafari、IE、Firefox、Chrome上で全面的に見ています。これらのいずれもうまく使えます（ただし、Firefoxが問題であると思われます）。

Answer 1

開始するには良い場所 - Speed TracerとPage Speedです。レイアウトがパフォーマンスにどのように影響するか、そして改善のために何ができるかについての多くの有益な情報が表示されます。 Speed TracerはChromeの拡張機能ですが、そのデータも他のブラウザのパフォーマンスを反映します。ここで

Answer 2

は、ブラウザ自体のために本当に面白いテストです：ウェブ上の

Maze Solver: CSS3 Layout Performance Test

パフォーマンスが多次元です。このテストでは、ブラウザのレイアウトエンジンに焦点を当てて、CSS 2.1およびCSS 3のレイアウト構成をブラウザが処理するようにしました。これらの構成はHTMLのスタイルに使用され、レイアウトエンジンはWebブラウザ全体のパフォーマンスの重要な要素です。

また、このテストはコード自体ではなく、ブラウザ自体を対象としています。私が正しく理解すれば、あなたが探しているものです。