9

SQLテーブルにいくつかのデータがあります。JSON経由でJavaScriptに送信します。

そこから、2つの方法のいずれかでユーザーに表示するためにHTMLに作成する必要があります。

  • html文字列を作成し、holding要素の.innerHTMLプロパティに挿入します
  • 必要な要素ごとにcreateElment（）を使用し、DOMに直接追加する

以下の質問はどちらも定量化可能な答えを提供しません。

最初のリンクの最初の回答から、3番目の理由（最初の2つの理由は私の環境には当てはまりません）

場合によってはもっと速くなるかもしれません

createElement（）メソッドが高速である場合とその理由の基本ケースを誰かが確立できますか？

そうすれば、人々は自分の環境を考慮して、どちらを使用するかについて知識に基づいた推測を行うことができます。

私の場合、既存のDOM構造やイベントリスナーを保持する必要はありません。ただの効率（速度）。

提供した2番目のリンクに関してライブラリを使用していません。しかし、それはそうするかもしれない人々のためにあります。

リサーチ/リンク

innerHTMLに対するcreateElementの利点は？

JavaScript：複雑なdiv構造を追加するには、innerHTMLまたは（多くの）createElement呼び出しを使用する方が良いですか？

4

2 に答える 2

5

DOMにn回追加すると、DOMに1回追加するよりもn倍多くの時間がかかります。（：P）

これは私が個人的に従っている論理です。

その結果、たとえばSELECT要素を作成し、それにいくつかのオプションを追加しようとしているときは、createElement呼び出しをn回使用するよりも、innerHTMLを使用してすべてのオプションを一度に追加することを好みます。

これは、BATCH操作を「1対1」と比較するのと少し同じです...因数分解できるときはいつでも、そうすべきです！

編集：コメントを読むこのようなオーバーヘッドを節約し、同時にDOMカプセル化を利用できる機能（DOM DocumentFragment）があることを理解しています。この場合、パフォーマンスが本当に同等であれば、私は間違いなくDOMオプションを選択しました。

于 2012-05-30T16:15:40.453 に答える
3

createElement と appendElement の方が速いとどこかで読んだと思いました。document.write() と innerHTML が文字列を解析し、要素も作成して追加する必要があることを考えると、それは理にかなっています。これを確認するための簡単なテストを書きました：

<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function inner() {

    var test = '';
    for (var i=0; i<10000; i++) {
        test += '<p><a href="../" target="_blank">bogus link</a> with some other <strong>stuff</strong></p>';
    }

    console.time('innerHTML');
    document.getElementById('test').innerHTML = test;
    console.timeEnd('innerHTML');
}

function jq() {
    var test = '';
    for (var i=0; i<10000; i++) {
        test += '<p><a href="../" target="_blank">bogus link</a> with some other <strong>stuff</strong></p>';
    }

    console.time('jquery');
    jQuery('#test').html(test);
    console.timeEnd('jquery');
}

function createEl() {
    var dest = document.getElementById('test');

    console.time('createel');
    //dest.innerHTML = '';//Not IE though?
    var repl = document.createElement('div');
    repl.setAttribute('id','test');
    for (var i=0; i<10000; i++) {
        var p = document.createElement('p');
        var a = document.createElement('a');
        a.setAttribute('href','../'); a.setAttribute('target','_blank');
        a.appendChild(document.createTextNode("bogus link"));
        p.appendChild(a);
        p.appendChild(document.createTextNode(" with some other "));
        var bold = document.createElement('strong');
        bold.appendChild(document.createTextNode("stuff"));
        p.appendChild(bold);
        repl.appendChild(p);
    }
    dest.parentNode.replaceChild(repl,dest);
    console.log('create-element:');
    console.timeEnd('createel');
}
</script>
<button onclick="inner()">innerhtml</button>
<button onclick="jq()">jquery html</button>
<button onclick="createEl()">Create-elements</button>
<div id="test">To replace</div>
</body>
</html>

この例では、HTML を書き出す createElement - appendChild メソッドは、innerHTML/jQuery よりも大幅に高速に動作します。

于 2013-05-31T04:33:22.570 に答える