web-dev-qa-db-ja.com

javascript document.createElementまたはHTMLタグ

私は次のスタイルのコードを書くことで混乱しています。ドキュメントにHTMLタグを挿入するpracticalとefficientのどちらの方法かを知りたい。

Javascript：

document.getElementById('demoId').innerHTML='<div>hello world and <a>click me</a> also</div>';

OR

var itd=document.createElement('div'),
    ita=document.createElement('a'),
    idt=document.createTextNode('hello world');
    iat=document.createTextNode('click me');
    idn=document.createTextNode('also');

    ita.appendChild(iat);
    itd.appendChild(idt);
    itd.appendChild(ita);
    itd.appendChild(idn)

    docuemtn.getElementById('demoId').appendChild(itd);

最速で最良の方法はどれですか？

javascripthtmloptimizationcreateelement
22
blue ghhgdtt

まあ、それぞれが何をしているのか考えてみてください。 1つ目は、文字列を取得して解析し、解析された文字列からの出力に基づいてdocument.createElement、document.appendChildなど（または同様のメソッド）を呼び出すことです。 2つ目は、ブラウザで何をしたいのかを直接述べるので、ブラウザの作業負荷を減らすことです。

jsPerfの比較を参照

JsPerfによると、オプション1はオプション2よりも約3倍遅くなります。

保守性オプション1のトピックでは、書くのがはるかに簡単ですが、昔ながらの方法と呼んでいますが、オプション2を使用したほうがはるかに安全だと感じています。

編集

いくつかの結果が出始めた後、異なる結果が私の好奇心をそそりました。各ブラウザーをインストールした状態でテストを2回実行しました。すべてのテストの後のjsPerfからの結果のスクリーンショットです（操作/秒、高いほど良い）。

jsPerf results

そのため、ブラウザは2つのテクニックの処理方法が大きく異なるようです。オプション2は、Chromeとオプション2を支持するSafariの大きなギャップにより、より高速であるように思われます。どちらがより効率的か心配する必要はありません。

この演習で学んだ主なことは、IE10を使用しないことです。それについて聞いた。

24
Daniel Imms