Question

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

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

Answer 1

同时检查此presentation和此jQuery Anti-Patterns 总的来说：

不要在循环中使用.append（）
不要直接附加到DOM
构建一个字符串，然后将其附加或使用DocumentFragment
不要直接附加到DOM

Answer 2

使用DOM DocumentFragments附加一个节点，然后看看幻灯片中的Nicholas Zakas演示文稿“writing-efficient-javascript”

Answer 3

由于我一直在测试我的网站，我注意到.innerHTML比jQuery的追加方法快得多。这已被弃用，支持可能会在未来的浏览器中减少和消亡。那说bgcolor属性仍然有效，我记得被告知大约十年前被弃用了。不要使用html片段附加脚本，因为它们需要eval'ing（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更改可见。这不是多线程，但要小心使用它。最好使用事件处理程序的属性（onclick，onchange等）

最后在操作dom中的元素之前设置要显示的样式：none，操作它然后将样式设置回显示：inline（内联是某些常见元素的默认值）或以前的wahtever。

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

Answer 4

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

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

4 个答案: