如何通过jquery有效地附加内容

检查这个 presentation 还有这个: jQuery Anti-Patterns
一般来说:

• 循环中不要使用.append()。
• 不要直接附加到dom中
• 构建一个字符串,然后附加它或使用documentfragment
• 不要直接附加到dom中

使用 DOM DocumentFragments 在一个节点上附加一堆,然后看一下幻灯片共享“编写高效的javascript”中的Nicholas Zakas演示。

在测试我的网站时,我注意到 .innerHTML 比jquery的append方法快得多。不过,这一点已被弃用,未来浏览器的支持可能会减少甚至消失。就是说 bgcolor 属性仍然有效,我记得有人告诉我,大约十年前,它被弃用了。也不要将脚本附加到HTML片段中,因为它们需要评估(jquery似乎会自动执行此操作,从而导致时间变慢,而with innerHTML 如果需要,您必须手动操作)。Eval非常慢,如果可能,不要使用它。正如前面提到的,加入一个数组比字符串连接更有效。使用变量指向dom节点(即 var this = document.getElementById("YourDomNode") 然后与 this 如果需要,而不是重复 document.getElementById 声明)。在函数外部声明变量允许从任何函数访问它们。请注意,这是客户端脚本,因此变量值是每个用户的唯一引用。根据所做的操作,执行高度重复的字符串可以减小文件大小。如果您必须作为HTML片段的一部分以内联方式加载JavaScript,请尝试以下操作:

/* 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'd之前都可见。这不是多线程的,但是要小心使用它。最好为事件处理程序使用属性(onclick、onchange等)。

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

这只是我使用的一些策略的一个快速的心理转储,所以任何对坏习惯的输入/嘲笑都是受欢迎的。

不要多次追加,而是将每个字符串存储在数组中,并在追加到数组时将其联接。