Question

我在sql表中有一些数据。我通过JSON将它发送到我的JavaScript。

从那里我需要将其组合成HTML，以便通过2种方式之一向用户显示。

通过编写html字符串并插入hold元素的.innerHTML属性
通过对我需要的每个元素使用createElment（）并直接附加到DOM

以下两个问题都没有提供可量化的答案。

从第一个链接的第一个回答开始，第三个原因（前两个原因不适用于我的环境）

在某些情况下可能会更快

有人可以建立一个基础案例，当时createElement（）方法更快，为什么？

通过这种方式，人们可以根据自己的环境做出有根据的猜测。

在我的情况下，我不担心保留现有的DOM结构或事件监听器。只是效率（速度）。

我没有使用关于我提供的第二个链接的库。但对于那些可能的人来说，它就是存在的。

研究/链接

Advantages of createElement over innerHTML?

JavaScript: Is it better to use innerHTML or (lots of) createElement calls to add a complex div structure?

Answer 1

添加到DOM n 的时间比 n 次要多一次，而不是一次添加到DOM。（：P）

这是我个人追随的逻辑。

因此，当它即将创建一个SELECT元素，并添加几个选项时，我更喜欢使用innerHTML一次性添加所有选项而不是使用createElement调用 n 次。

这与将BATCH操作与“一对一”进行比较有点相同......只要你能分解，你应该这样做！

编辑：阅读评论我理解有一个功能（DOM DocumentFragment）允许我们节省这样的开销，同时利用DOM封装。在这种情况下，如果表演真的具有可比性，我绝对不会怀疑并选择DOM选项。

Answer 2

我以为我在某处读到了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快得多！

createElement（）与innerHTML何时使用？

2 个答案: