如何使用JQuery有效地附加内容
我正在使用JQuery在标记中附加大量文本。 我发现标签中当前的文本越多，附加速度越慢，而对于大量文本，它太慢。
是否有更有效的方法来追加文字？ 例如创建虚拟子标签并设置它们的内容而不是附加到父级？
查看此演示文稿和此演示文稿 ： jQuery Anti-Patterns
总的来说：
- 不要在循环中使用.append（）
- 不要直接附加到DOM中
- 构建一个字符串，然后附加它或使用DocumentFragment
- 不要直接附加到DOM中
使用DOM DocumentFragments附加一个节点，并在slidehare“writing-efficient-javascript”中查看Nicholas Zakas演示文稿
正如我一直在测试我的网站，我注意到.innerHTML比jQuery的追加方法快得多。 这已被弃用，支持可能会在未来的浏览器中减少和消亡。 那说bgcolor属性仍然有效，我记得被告知大约十年前被弃用了。 不要使用html片段附加脚本，因为它们需要eval’ing（jQuery似乎自动执行此操作导致慢速时间，而使用innerHTML您必须在需要时手动执行此操作）。 如果可能的话，Eval会慢慢使用它。 再次如前所述，加入数组比字符串连接更有效。 使用变量指向DOM节点（即var this = document.getElementById("YourDomNode")然后在需要的地方使用它而不是重复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更改可见。 这不是multithreading，但要小心使用它。 更好地使用事件处理程序的属性（onclick，onchange等）
最后，在操作dom中的元素之前，设置要显示的样式：none，操纵它然后将样式设置回显示：inline（内联是某些常见元素的默认值）或之前的wahtever。
这只是我用过的一些策略的快速精神转储，因此欢迎任何不良做法的输入/嘲笑。
不是多次追加，而是将每个字符串存储在数组中，并在追加数组时加入数组。