DOM要素の作成と.innerHTMLとDirectの比較

Question

動的コンテンツを生成するときは、単にHTMLを作成して.innerHTMLに挿入するか、DOMの要素を直接作成する方が良いでしょうか？

私は複雑さやその他には関心がありません。ちょうどクライアントの時間を処理する。

どちらが速いですか？

私はこれは次のようになり、効率（低処理時間）の順に推測していた場合：

1. DOM作成
2. .innerHTMLプロパティ挿入
3. 直接書き込み

これでしょうインプリメンテーションの複雑さに反比例する：

1. 直接書き込み
2. .innerHTMLプロパティ挿入
3. DOMの作成

これはvalidatinの質問ですか？複雑さとスピードを考慮すると、クライアント（つまり、javascript）を更新する方法を決定する際のトレードオフであることを誰かが検証できますか？

研究：彼らはそれは私の質問の一部のみをカバーし、これが重複していない> InnerHTML vs. DOM - Security

InnerHTML vs. DOM here-をしているよう

私はセキュリティを心配していませんよ。

Answer 1

自分の個人的なテストから、ほとんどのニーズに十分に速いです。しかし、ページに何千もの要素を作成するような奇妙なことをしているのなら、文書の断片を使うのが最も速い方法です。 John Resigはそれについての良いブログ記事を書いた。 http://ejohn.org/blog/dom-documentfragments/

Answer 2

Lots ofjsPerf benchmarks ;ウェブで「jsperf innerhtml domelement」や検索の意味のある組み合わせを検索してみてください。

Answer 3

DOM挿入がinnerHTMLより速いことは必ずしも真実ではありません。例えば、ベンチマークhttp://segdeha.com/experiments/innerhtml/とhttp://www.quirksmode.org/dom/innerhtml.htmlを参照してください。 innerHTMLソリューションを実装する方が速いかもしれませんが、XHTMLを使用する場合は利用できないことに注意してください。

Answer 4

私の経験では、基本的に性能が同等です。しかし、DOMのアプローチを使用すると、クロージャの能力が向上し、データと関数を個々のDOM要素に直接バインドすることができます。

パフォーマンスの点では、アプローチにかかわらず、主なものは、変更するDOMの部分を非表示にしたり削除したり、DOMの外ですべて変更したり、DOMに戻したりすることです。ブラウザで不要なリフロー（再ペイント）を避けてください。