如何使用 JQuery 有效地附加内容答案

【问题标题】：how to efficiently append content with JQuery如何使用 JQuery 有效地附加内容
【发布时间】：2011-01-08 23:35:13
【问题描述】：

我正在使用 JQuery 在标签内附加大量文本。我发现标签中当前的文本越多，附加的速度就越慢，而对于大量文本来说，它太慢了。

有没有更有效的方法来追加文本？例如创建虚拟子标签并设置它们的内容而不是附加到父标签？

【问题讨论】：

你确定瓶颈是实际的 DOM 操作，而不是时间来制造你要插入的内容吗？
是的 - 我测试了有和没有附加
是表格中的内容（直接在 TD 中或间接在父链上的某处），还是其他非固定大小的元素？每次操作 dom 时，都需要重新计算定位。这种效果在没有固定大小的表格和元素中更为明显。
它都是 DIV 结构的，但这是一个有趣的想法。如果正确，那么实际上没有办法解决这个延迟......

标签： javascript jquery text performance append

【解决方案1】：

不是多次追加，而是将每个字符串存储在数组中，并在追加时加入数组。

【讨论】：

我想向用户反馈正在发生的事情，因此在可用时附加内容对我来说很重要

【解决方案2】：

使用DOM DocumentFragments 附加一堆节点，并在幻灯片共享“writing-efficient-javascript”中查看 Nicholas Zakas 的演示文稿

【讨论】：

【解决方案3】：

检查这个presentation和这个：jQuery Anti-Patterns
总的来说：

不要在循环中添加 .append()
不要直接附加到 DOM 中
构建一个字符串，然后附加它或使用 DocumentFragment
不要直接附加到 DOM 中

【讨论】：

“不要直接附加到 DOM”是什么意思？在某些时候你需要将你的东西附加到 DOM 中。
那是关于使用 DocumentFragment。或者构建字符串并附加它。 TL;博士;构建一些东西并作为最后一步附加到 DOM。

【解决方案4】：

在我测试我的网站时，我注意到.innerHTML 比 jQuery 的 append 方法快得多。不过，这已被弃用，并且支持可能会在未来的浏览器中减少并消失。这就是说bgcolor 属性仍然有效，我记得有人告诉我大约十年前它已被弃用。不要使用 html 片段附加脚本，因为它们需要评估（jQuery 似乎会自动执行此操作导致时间变慢，而使用 innerHTML 如果需要，您必须手动执行此操作）。 eval 太慢了，如果可能的话，不要使用它。再次如前所述，加入数组比字符串连接更有效。使用变量指向 DOM 节点（即 var this = document.getElementById("YourDomNode") 然后在需要的地方使用 this 而不是重复 document.getElementById 语句）。在函数之外声明变量允许从任何函数访问它们。请注意，这是客户端脚本，因此变量值是每个用户的唯一参考。执行高度重复的字符串可以减少文件大小，具体取决于您的操作。如果您绝对必须将 JavaScript 内联加载为 html 片段的一部分，请尝试以下操作：

/* Call this section after appending to the dom with innerHTML */
var f = function() {runScripts(document.getElementById('newDOM_Section'));};
setTimeout(f,1);

/* Stick the following in your main .js file */
var stringScript
var f
function runScripts(element) {
    var scripts = element.getElementsByTagName("script"); 
    var intScriptsCount = scripts.length
        for (var i = 0; i < intScriptsCount; i++) { 
        stringScript = scripts[i].text
            setTimeout(stringScript, 1); 
        }

}

上面的代码将使 DOM 更改在所有脚本被 eval 之前可见。这不是多线程，所以要小心它的使用。更好地使用事件处理程序的属性（onclick、onchange 等）

最后在操作 dom 中的元素之前将样式设置为 display:none，操作它然后将样式设置回 display:inline（内联是一些常见元素的默认值）或以前的样式。

这只是我使用的一些策略的快速心理转储，因此欢迎任何输入/嘲笑不良做法。

【讨论】：