3

大規模なWebアプリでのパフォーマンス低下のトラブルシューティングを行っています。最近、パフォーマンスを向上させるために、IFRAMEを削除し、コンテンツを元のDOMに直接配置するようにいくつかの変更を加えました。確かに、初期ロード時間の方が優れていますが、奇妙な問題を発見しました。

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

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

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

つまり、実際のブラウザレイアウトのパフォーマンスを測定する方法があるかどうか疑問に思っています。この問題はSafari、IE、Firefox、Chromeで全面的に見られます。したがって、これらのいずれでも問題なく使用できます（ただし、問題が最も明確に定義されているように見えるため、Firefoxの方が好きです）。

4

2 に答える 2

2

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

于 2012-04-23T15:42:27.067 に答える
0

これは、ブラウザ自体の非常に興味深いテストです。

Maze Solver：CSS3レイアウトパフォーマンステスト

Webでのパフォーマンスは多面的です。このテストでは、ブラウザーのレイアウトエンジンに焦点を当てて、ブラウザーによるCSS2.1およびCSS3のレイアウト構成の処理を実行します。これらの構造はHTMLのスタイル設定に使用され、レイアウトエンジンはWebブラウザー全体のパフォーマンスの重要なコンポーネントです。

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

于 2012-04-23T15:48:16.973 に答える