javascript - 使用Javascript创建元素或纯文本时浏览器性能是否有差异

Question

我的研究并没有被证明非常成功，因为如果没有例子，我真的不知道如何解释它。

考虑以下因素:

您有一个网页。网页的一个 div 将是动态的，这意味着它将加载不同的内容，例如表格、段落等。

为了方便起见，我们将 div 的 id 设置为“main”:

var main = document.getElementById("main");

现在，这是棘手的部分:当你想改变它的 child 时，你有两个选择:

1) 删除所有子项；在 javascript 中为每个新元素创建一个变量；设计风格；设置内部 html；附加。示例:

//Consider that the children have already be cleared
     var p = document.createElement("p");
        p.innerHTML = "Hello World";
        p.className = "style";
        main.appendChild(p);

    var p2 = document.createElement("p");
    p2.innerHTML = "Goodbye world!";
    p2.className = "byeStyle";
    main.appendChild(p);

2) 将变量的内部 html 设置为基本上您想要的内容。示例2:

 main.innerHTML = '<p class="style">Hello world!</p>' +
                    '<p class="byeStyle">Goodbye world!</p>';

两者都可以正常工作。哪个是首选，哪个性能更好？

Answer 1

一般来说，除非您在紧密的循环中一遍又一遍地执行此操作，否则这并不重要。

人们普遍认为使用 .innerHTML 速度更快，但在现代浏览器上情况不一定如此。

参见例如http://jsperf.com/node-creation-html-vs-dom/2 ，其中在 Chrome 版本 28 上使用原始 DOM 访问比使用 .innerHTML 快 5 倍。