☰

JavaScript: 複雑な div 構造を追加するには、innerHTML を使用するか、(多数の) createElement 呼び出しを使用する方がよいでしょうか? [重複] 質問する

tag-icon • tag-icon javascript dom
JavaScript: 複雑な div 構造を追加するには、innerHTML を使用するか、(多数の) createElement 呼び出しを使用する方がよいでしょうか? [重複] 質問する

私は、約 100 個の要素のセット内の各要素に対して、複雑な div ブロックを 1 回作成する必要がある問題を検討しています。

個々の要素はコンテンツを除いて同一であり、(HTML では) 次のようになります。

<div class="class0 class1 class3">
<div class="spacer"></div>
<div id="content">content</div>
<div class="spacer"></div>
<div id="content2">content2</div>
<div class="class4">content3</div>
<div class="spacer"></div>
<div id="footer">content3</div>
</div>

次のいずれかが可能です:

1) 文字列連結を使用してすべての要素を作成し、innerHTMLコンテンツを追加します。

2) createElement、、を使用しsetAttributeてappendChild各 div を作成して追加します。

オプション 1 ではダウンロードするファイルが若干小さくなりますが、オプション 2 ではレンダリングが若干速くなるようです。

パフォーマンス以外に、どちらかのルートを選択する正当な理由はありますか? テストすべきクロスブラウザの問題やパフォーマンスの問題はありますか?

...それとも、テンプレートとクローンのアプローチを試すべきでしょうか?

どうもありがとう。

ベストアンサー1

あなたにとって何が「良い」かによります。

パフォーマンス

パフォーマンスの観点から見ると、createElement+appendChildの方がはるかに優れています。このjsPerf両方を比較して、その結果が目の前に現れたときに作成しました。

innerHTML: ~120 ops/sec
createElement+appendChild: ~145000 ops/sec

(Chrome 21 搭載の Mac の場合)

また、innerHTML はページのリフローをトリガーします。

UbuntuでChrome 39を使用する場合テスト同様の結果が得られる

innerHTML: 120000 ops/sec
createElement: 124000 ops/sec

おそらく何らかの最適化が行われている。UbuntuでQtWebkitベースのブラウザArora（wkhtmlもQtWebkit）を使用すると、結果は

innerHTML: 71000 ops/sec
createElement: 282000 ops/sec

平均的にはcreateElementの方が速いようです

維持可能性

保守性の観点から、文字列テンプレートは非常に役立つと思います。私はどちらかを使用しますハンドルバー（私は大好きです）またはティム(最小のフットプリントを必要とするプロジェクト用)。テンプレートを「コンパイル」(準備) して、DOM に追加する準備ができたら、innerHTML を使用してテンプレート文字列を DOM に追加します。リフローを回避するために私が行っているトリックは、ラッパーの createElement を作成し、そのラッパー要素に innerHTML を使用してテンプレートを配置することです。innerHTML を完全に回避する良い方法をまだ探しています。

互換性

心配する必要はありません。どちらの方法も、幅広いブラウザで完全にサポートされています（altCognitoが言っているのとは異なります）。互換性チャートをチェックして、要素を作成するそして子の追加。

おすすめ記事