在操作 jQuery 元素时，`array.join` 优于字符串连接的好处？

Posted 2023-05-09

【中文标题】在操作 jQuery 元素时，`array.join` 优于字符串连接的好处？

【英文标题】：Benefits of `array.join` over string concatination while manipulating jQuery elements?

【发布时间】：2017-04-21 21:34:46

【问题描述】：

根据this

向页面添加新元素的语法很简单，所以它是 很容易忘记添加到 DOM 重复。如果您将许多元素添加到同一个 容器，您需要将所有 html 连接成一个 字符串，然后将该字符串附加到容器而不是 一次添加一个元素。使用数组收集所有 拼在一起，然后将它们连接成一个字符串以进行附加：

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

【问题讨论】：

我认为当数组连接比字符串连接更快时，这可能是一篇旧文章

【参考方案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)

【参考方案2】：

看着你链接的页面，我想你在问为什么这样做更好

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

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


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

而不是

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

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


myList.append( myItems );

在我看来，这完全是主观的，您引用的内容并不是对数组附加或字符串连接的真正建议。使用数组的主要好处实际上是相切的，因为它比使用字符串更容易操作数组并编写可维护和可读的代码。

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

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

for ( var i = 0; i < 100; i++ ) 
    myList.append( "<li>item " + i + "</li>" );

是的，那是因为一遍又一遍地调用 myList.append() 会反复修改 DOM，这会变得非常非常慢。调用一次会快得多。

【讨论】：

有一段时间（旧的 IE，我忘记了哪个版本）添加到数组，然后在最后执行 .join() 明显快于大量字符串连接，因此，如果循环数以千计的项目，则首选数组技术。 （差异是可测量的，因此不是主观的。）

【参考方案3】：

它与 DOM 操作成本有关。每次调用 DOM 来添加/删除节点时，浏览器都必须查找标记并为您创建 DOM，这样操作就完成了。

这种创建 DOM 的操作成本很高，因此为了减少它并提高性能，我们一次注入所有元素。

【讨论】：

是的，但问题在于是使用字符串连接还是数组来构建字符串（而不是结果被分配给某个 DOM 元素的部分）。