複雑なHTMLページが遅い

Question

ネットワークのインターンの目的のために、私は約5000のDivで構成された、非常に複雑なHTMLページを持っています。

ページのソースコードは約1Mbで、スクロールするのが非常に遅いという点を除いて、期待どおりに動作します。

パフォーマンスを向上させるためにできることはありますか？表示されているものやそのようなものだけを見直すようブラウザに指示しますか？

免責事項：私は5000 divのページが最適ではないことを知っていますが、それは余分なソフトウェアなしでネットワーク上の誰でもこのテーブルにアクセスでき、これを作成するのに十分な柔軟性を与えた唯一のソリューションでした。

Answer 1

以下の内容は、単に症状を抑えているだけで、実際にHTMLを再構成しようとするべきです。 5000個の絶対配置された要素の位置を再計算する必要がある場合は特に、ブラウザの最適化はほとんどありません。

本当にの場合は、ローカルブラウザの配列に関して何か改善されているかどうかを確認するには、次の各テクニックをテストする必要があります。 this HTML5Rocks tutorialを通じて

• 作業（チャンスは。これらのヒントのいくつかは、あなたの特別なセット・アップに逆効果になること、あり）、何があなたのセットアップに適用されるかどうかを確認します。
• Disable pointer events on scrollです。そのため、ブラウザはスクロールバイエレメントのホバー状態をチェックする必要はありません。
• switch on hardware-accelerated renderingを試してください。
• lazy image loading libraryを試してください。これは任意の要素を読み込むためにも使用できます。
• 新しいブラウザでは、will-change CSS propertyを適用してみてください。しかし、イントラネットのレガシーブラウザでは役に立ちません。

Answer 2

divsが絶対位置を持つため、javascriptで表示できるdivを計算できると思います。ブラウザは、高さを計算しますので、どれも、その後、表示を設定します：

あなたはディスプレイを有する最初の列に含まれていないすべてのセルを起動しようとすることができる唯一の「可視」なものにをブロックします。

ユーザーがスクロールすると、javascriptを使用して表示属性を制御するため、ブラウザはビュー内のセルと最初の列にあるセルのみを計算してペイントします。

複雑な音ですが、古いブラウザでも速くなります。