jquery：最快的DOM插入？
我对如何插入大量HTML感觉不好。 让我们假设我们得到：
var html="
"
我想把它放进去
$("#mydiv")
以前我做过类似的事情
var html_obj = $(html); $("#mydiv").append(html_obj);
jQuery解析html创建DOM对象是否正确？ 这就是我在某处读到的内容（更新：我的意思是我已经读过，jQuery解析html手工创建整个DOM树 – 它的废话对吧？！ ） ，所以我改变了我的代码：
$("#mydiv").attr("innerHTML", $("#mydiv").attr("innerHTML") + html);
感觉更快，是吗？ 这是否正确，这相当于：
document.getElementById("mydiv").innerHTML += html ？ 或者是jquery在后台做一些额外的昂贵的东西？
也愿意学习替代品。
innerHTML速度非常快，在很多情况下，只需设置它就能得到最好的结果（我只想使用append）。
但是，如果“mydiv”中已有很多内容，那么您将强制浏览器再次解析并呈现所有内容（之前的所有内容，以及所有新内容）。 您可以通过将文档片段附加到“mydiv”来避免这种情况：
var frag = document.createDocumentFragment(); frag.innerHTML = html; $("#mydiv").append(frag);
这样，只会解析您的新内容（不可避免），而现有内容则不会。
编辑：我的坏…我发现innerHTML在文档片段上得不到很好的支持。 您可以对任何节点类型使用相同的技术。 对于您的示例，您可以创建根表节点并将innerHTML插入到：
var frag = document.createElement('table'); frag.innerHTML = tableInnerHtml; $("#mydiv").append(frag);
请尝试以下方法：
$("#mydiv").append(html);
其他答案，包括接受的答案， 慢了2-10倍 ： jsperf 。
接受的答案在IE 6,7和8中不起作用，因为IE中的错误导致无法设置
元素的innerHTML ： jsbin 。
你想避免什么？ “一种不好的感觉”令人难以置信的模糊。 如果您听说“DOM很慢”并决定“避免使用DOM”，那么这是不可能的。 将代码插入到页面中的每种方法（包括innerHTML）都将导致创建DOM对象。 DOM是浏览器内存中文档的表示。 您希望创建DOM对象。
人们说“DOM很慢”的原因是因为使用document.createElement()创建元素，这是用于创建元素的官方DOM接口，比在某些浏览器中使用非标准innerHTML属性要慢。 这并不意味着创建DOM对象很糟糕，有必要创建DOM对象，否则您的代码根本不会做任何事情。
关于使用DOM片段的答案是正确的。 如果你有一堆html对象，你不断插入DOM，那么你会看到使用片段的一些速度提升。 John Resig的这篇文章解释得非常好： http ： //ejohn.org/blog/dom-documentfragments/
对于初学者来说，编写一个脚本，用于计算每种方法执行100或1,000次所需的时间。
为了确保重复不会以某种方式被优化掉 – 我不是JavaScript引擎的专家 – 每次都会改变你插入的html，比如将’0001’然后’0002’然后’0003’放入某个桌子的细胞。
追加物品的最快方法
附加到DOM树的最快方法是将所有追加缓冲到单个DOM片段，然后将dom片段附加到dom。
这是我在游戏引擎中使用的方法。
//Returns a new Buffer object function Buffer() { //the framgment var domFragment = document.createDocumentFragment(); //Adds a node to the dom fragment function add(node) { domFragment.appendChild(node); } //Flushes the buffer to a node function flush(targetNode) { //if the target node is not given then use the body var targetNode = targetNode || document.body; //append the domFragment to the target targetNode.appendChild(domFragment); } //return the buffer return { "add": add, "flush": flush } } //to make a buffer do this var buffer = Buffer(); //to add elements to the buffer do the following buffer.add(someNode1); //continue to add elements to the buffer buffer.add(someNode2); buffer.add(someNode3); buffer.add(someNode4); buffer.add(someN...); //when you are done adding nodes flush the nodes to the containing div in the dom buffer.flush(myContainerNode);
使用这个对象我能够在屏幕上渲染~1000个项目〜在firefox 4中每秒40次。
这是一个用例。
我创建了一个巨大的字符串，然后用jquery追加这个字符串。 对我来说，工作得很好，也很快。
你提到对替代品感兴趣。 如果你看一下与DOM相关的jQuery插件的列表，你会发现一些专门用于以编程方式生成DOM树的插件 。 例如，参见SuperFlyDom或DOM Elements Creator ; 但还有其他人。