问如何高效地使用JQuery追加内容

EN

检查这个presentation和这个：jQuery Anti-Patterns

一般情况下：

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

中

使用DOM DocumentFragments添加一堆节点，并查看slideshare中的Nicholas Zakas演示文稿“writing efficient-javascript”

当我测试我的站点时，我注意到.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更改在所有脚本求值之前可见，但这不是多线程，所以使用时要小心。最好使用事件处理程序的属性(onclick、onchange等)

最后，在操作dom中的元素之前，将样式设置为display:none，然后将样式重新设置为display:inline (对于某些常见元素，inline是默认值)或wahtever。

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