9

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

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

  • 通过编写 html 字符串并插入到持有元素的 .innerHTML 属性中
  • 通过对我需要的每个元素使用 createElment() 并直接附加到 DOM

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

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

在某些情况下可能会更快

有人可以建立一个基本案例，说明 createElement() 方法何时更快，为什么？

这样，人们就可以根据他们的环境对使用哪个做出有根据的猜测。

就我而言，我不担心保留现有的 DOM 结构或事件侦听器。只是效率（速度）。

我没有使用关于我提供的第二个链接的库。但它是为那些可能的人准备的。

研究/链接

createElement 相对于 innerHTML 的优势？

JavaScript：使用 innerHTML 或（大量）createElement 调用来添加复杂的 div 结构会更好吗？

4

2 回答 2

5

向 DOM 添加n次所花费的时间比向 DOM 添加一次要多n倍。(:P)

这是我个人遵循的逻辑。

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

这有点像将 BATCH 操作与“一对一”进行比较……只要您可以分解，就应该这样做！

编辑：阅读评论我知道有一个特性（DOM DocumentFragment）可以让我们节省这样的开销，同时利用 DOM 封装。在这种情况下，如果性能真的有可比性，我绝对不会怀疑并选择了 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 回答