2

HTML DOM を JavaScript で操作して UI を動的に構築する Web アプリケーションに取り組んでいます。

ビルド中のドキュメントのサイズが大きくなりすぎた場合 (任意の数値を想定)、古い情報を消去するなどのアクションを実行したいと思います。

プログラムで DOM にクエリを実行して、DOM のサイズを確認することはできますか? 同等の HTML テキストのバイト数 (つまり、ファイル サイズ) として、または理想的には DOM が使用するメモリの量として?

4

2 に答える 2

3

私はこのようなことを試してみます:

window.document.documentElement.innerHTML.length

しかし、正直なところ、これよりもはるかに複雑です。文字数を返します。ドキュメントのサイズを取得するには、ドキュメントで使用されている文字セット/エンコーディングを実際に確認する必要があります。

UTF-8 は、ASCII 文字ごとに 1 バイトを持ちます。ascii 以外のものは、2 から 6 バイトの大きさになる可能性があります。ドキュメントのエンコーディングが異なる場合、各文字のサイズは異なります。UTF-16 は 1 文字あたり 2 バイト、UTF-32 -> 4 バイトになります。

ドキュメントのサイズを「推測」する 1 つの方法は、上記のスニペットの結果に含まれる各文字をスキャンすることです。ascii でないものはすべて、utf-8 に対して少なくとも 2 バイトを持ちます (ドキュメントに中国語や非常に特殊な言語が含まれていない限り、2 バイトを超えることはほとんどありません)。それでも、テキストが DOM オブジェクトよりも多くのスペースを必要とする可能性があるため、メモリ内でどれだけのスペースが必要かはわかりません。ツリー全体を文字列として解析すると、メモリ 2 が使用されますが、正しく実行され、ドキュメントがどれだけ大きいかによって、それほど重くなることはありません。

ページが DOM の「メモリ」でどのくらいのスペースを占めているかを知りたい場合、各 DOM 要素は依存固有であり、内部的にアクセスできる API がないため、それは不可能です。

なんらかの理由がある場合、これは大したことです。XPCOM を見て、DOM で使用されているメモリの量を返す独自の API を構築することができます。

しかし、あなたは箱から出して考える必要があります

ページが大きいため、問題が発生する可能性は低いです。しかし、一部の JS は大量の dom オブジェクトを作成しているためです。プロファイラーを使用して、ページがどのように構築されているかを確認すると、次のことを考慮することができます: ドキュメントに添付されたすべてのオブジェクトを保持する必要があるか? ページがどこかで大きくなっている場合は、ブロックに表示される要素の量を制限し、データをメモリに保持できます。必要に応じて DOM オブジェクトを再構築します。js コードにデータを保持します。一部のデータが使用されなくなった場合、それを忘れるか、indexeddb 内に保存することができます。必要に応じてそこからリロードします。

「display: none」を使用して dom オブジェクトを非表示にしないでください。DOM オブジェクトは、必要な場合にのみ構築してください。いたるところに DOM オブジェクトを隠している場合。

于 2013-10-08T10:18:05.760 に答える