メモリが最も少ないDOM要素

Question

Javascriptを使用して4000個以上の奇妙なDOM要素をレンダリングしたいとします。すべてのDOM要素がブラウザ内の同じメモリを消費しますか？例えば、 SPAN、DIV、Aなどの間で、それらはすべて同じメモリ賢明ですか？

Answer 1

プレーンテキストのノードが最も使用していないと思います。実際に使用するものは、データの内容と表示方法によって異なります。

Answer 2

ブラウザ/実装に依存していると思われます。

恐らく、異なるタイプの4000要素からなるページでいくつかのテストを実行し、相対的なメモリ消費量を調べるべきでしょうか？

Answer 3

DOM要素間にそれほど大きな違いはないと思います。

重要なのは、スタイルの仕方です。

入力要素には、ネイティブウィジェットが添付されているため、メモリが必要です。 リンクには、クリックイベントハンドラが接続されているため、メモリが必要になります。 テーブルセルは、そのスタイルによってサイズが自動的に変更されるため、メモリが必要になります。

必要なものを使用して動作するかどうかを確認してください。

もしそうでなければ、ページ設定は使用する正しいDOM要素を探すこと以外にも役立ちます。

Answer 4

"最も効率的な" DOM要素を使用することで得られる利点の一部ではなく、あなたが入れたいものに基づいてマークアップを作成します。 <SPAN>は、<DIV>とはまったく異なる目的を果たします。そして、あなたがそれに至ると、メモリ消費量の差は軽微になり、4,000要素はあまり多くありません（電子商取引サイトに行き、ページを解析すると、さらに多くなります）。

実際には、DOMコンストラクタではなくinnerHTMLを使用して要素を作成するほうが早いでしょう。これがユーザーにとって重要なことです。詳細については、this articleを参照してください。

Answer 5

は確かに、「TABLE」要素を使用しないでください - それはたくさん遅く、div要素またはスパン