0

asp.net mvc、javascript、jQuery (ローカル マシンでホスト) を使用してアプリケーションを作成しました。基本設計は、ユーザーがあるページから別のページに移動するときに HTML ページを非表示にして表示することにより、破棄するのではなく、すべての HMTL 要素を DOM オブジェクト (ブラウザー) に保持することです。

私たちのアプリケーションは日々成長しています。以前は、プロジェクトでパフォーマンスの問題は見られませんでした。しかし、最近では、あるページから別のページに移動するのに時間がかかります。今日、自分のページで DOM 要素を確認したところ、20,000 を超えています。

質問:

HTMLページを非表示/表示することは、破棄して再作成するよりも優れた設計ですか?

20,000 DOM オブジェクトを使用した JavaScript からの DOM 操作、リフローと再印刷に関してパフォーマンスへの影響は何ですか?

4

1 に答える 1

2

参考までに、この記事の執筆時点では、単一ページの HTML5 仕様自体に 109,000 の DOM 要素 (およびさらに多くの DOM ノード) があります。

HTML ページを非表示/表示するのは、破棄して再作成するのではなく、良い設計ですか?

これは、それが必要かどうか(たとえば、削除されたセクションを再作成すると時間がかかるため) および/または可能性が高いかどうか(ユーザーの操作により、非表示のセクションが再表示されることが多い)に大きく依存します。

あなたを遅くすることができるいくつかのことがあります

a) ガベージ コレクション。more nodes = ガベージ コレクターがトラバースするモード オブジェクト。原則として、最新のガベージ コレクターは、多くの寿命の長いオブジェクトを古い領域に詰め込むことで処理できるはずですが、すべてのブラウザーが最先端の GC を備えているわけではありません。

b) リフロー イベント/dom クエリ/トラバーサル操作など。

c) ドキュメントのサイズに合わせてスケーリングがうまくいかない JavaScript コード。一部の O(n²) アルゴリズムは、複雑なアプリケーションに忍び込む可能性があります。さらなるコールバックなどをトリガーするコールバック。

DOM ツリーを削減したくない場合、a) についてできることはあまりありません。ただし、b) と c) はいくつかの方法で最適化できます。

  • サブツリーをドキュメントから切り離し、javascript/ドキュメント フラグメントに保持します。この方法では、ドキュメント ツリーをトラバースするものはそれらを処理する必要がありません。
  • アクションをインターリーブしないでください
    1. レイアウトの状態を読み取ります (計算された CSS プロパティ、境界矩形、オフセットなどの取得など)。
    2. 任意の方法で DOM に書き込むか、イベントをトリガーする

      リフローの数を最小限に抑えるために、読み取りと書き込みを個別に一括で実行する
  • JavaScript でホットスポットを最適化する

ただし、これらは一般的なガイドラインにすぎません。アプリケーションのプロファイリングを行って、GC、JavaScript の実行、ペイント イベントのいずれが支配的であるかに関係なく、何が CPU 時間を消費しているのかを把握する必要があります。

于 2015-01-27T17:55:57.207 に答える