24

私は次のようなコードの書き方に混乱しています。ドキュメントにHTMLタグを挿入するための実用的で効率的な方法を知りたいです。

Javascript：

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

また

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);

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

4

1 に答える 1

24

それぞれが何をしているのかを考えてみてください。最初のものは、文字列を取得して解析し、解析された文字列からの出力に基づいて 、 など (または同様のメソッド) をdocument.createElement呼び出します。document.appendChild2 つ目は、ブラウザに何をしてもらいたいかを直接指定することで、ブラウザの作業負荷を軽減することです。

jsPerf で比較を見る

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

保守性については、オプション 1 の方がはるかに簡単に記述できますが、昔ながらの方法と言えます。オプション 2 の方がはるかに安全だと感じられるため、オプション 2 を使用することをお勧めします。

編集

いくつかの結果が出始めた後、さまざまな結果が私の好奇心を刺激しました。インストールした各ブラウザーでテストを 2 回実行しました。すべてのテスト後の jsPerf の結果のスクリーンショットを次に示します (操作/秒、高いほど良い)。

jsPerf の結果

そのため、ブラウザーは 2 つの手法を処理する方法が大きく異なるようです。Chrome と Safari ではオプション 2 が好まれる大きなギャップがあるため、平均してオプション 2 の方が速いようです。私の結論は、最も快適である、または組織の基準に最も適していると思われる方を使用するべきであり、どちらがより効率的であるかについて心配する必要はないということです。

この演習で学んだ主なことは、IE10について聞いた素晴らしいことにもかかわらず、IE10 を使用しないことです。

于 2013-03-03T04:29:17.287 に答える