Question

根据this

向页面添加新元素的语法很简单，所以就是这样很容易忘记添加的性能成本很高 DOM反复出现。如果你要添加许多元素容器，你想要将所有HTML连接成一个单独的字符串，然后将该字符串追加到容器而不是一次附加一个元素。使用数组收集所有拼凑在一起，然后将它们连接成一个字符串以便附加：

为什么我们必须使用数组？只是直接反复追加字符串有什么问题？不是string concatination suppose to be faster than array join?

Answer 1

存在性能成本，因为DOM元素上的innerHTML属性不像简单的普通对象属性更新。每次设置innerHTML的值时，浏览器都会在幕后制作魔术。它必须解决启动HTML解析器并生成这些新标记的麻烦，替换之前的任何节点树。

反模式element.innerHTML += string是最糟糕的模式之一，因为它会导致浏览器首先对目标元素中的所有HTML进行字符串化，将新字符串附加到该HTML的末尾，然后解析整个甚至在到达你添加的任何其他内容之前，节点树都会重新出现。

至少可以说这是非常辛苦的。

如果使用局部变量，则连接完全正常。关键是，永远不要在innerHTML属性上直接连接直接。

var html = '<p>stuff</p>'
html += '<p>more stuff</p>'
html += '<p>even more stuff</p>'
html += '<p>extra stuff</p>'
element.innerHTML = html

但是，如果您需要立即和/或频繁更新DOM，则更喜欢在innerHTML上创建和追加新节点。例如，

var element = document.createElement('p')
element.textContent = 'Hello World'
document.body.appendChild(element)

Answer 2

查看您关联的页面，我想您在问为什么要做得更好

而不是

r * 2

在我看来，这是完全主观的，你引用的东西实际上不是对数组追加或字符串连接的建议。使用数组的主要好处实际上是切向的，因为操作数组和编写可维护和可读的代码比使用字符串执行代码更容易。

其他答案似乎在回答为什么不好做

var myItems = [];
var myList = $( "#myList" );

for ( var i = 0; i < 100; i++ ) {
    myItems.push( "<li>item " + i + "</li>" );
}

myList.append( myItems.join( "" ) );

是的，那是因为反复调用myList.append（）会反复修改DOM，这会变得非常慢。一次调用它会快得多。

Answer 3

关于DOM操作成本。每次调用DOM来添加/删除节点时，浏览器都必须查找标记并为您创建DOM，并且操作已完成。

创建DOM的操作成本很高，因此要减少它并提高性能，我们会立即注入所有元素。

在操作jQuery元素时，`array.join`对字符串连接的好处是什么？

3 个答案: