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在后台做一些额外的昂贵的东西？

也愿意学习替代品.

1> gblazex..：

---

请尝试以下方法:

$("#mydiv").append(html);

其他答案,包括接受的答案,慢了2-10倍:jsperf.

接受的答案不工作的IE 6,7,8,因为你不能设置innerHTML一个的

元素,由于IE浏览器中的错误:jsbin.

---

@galambalazs,我在你的jsperf [test](http://jsperf.com/jquery-append-html/10)中添加了一个新的测试用例.它手动构建dom,这是附加html字符串的唯一真正替代方法.解析显然是瓶颈,虽然最初的问题可能没有找到这个,但我认为还有其他人会有兴趣知道如果你愿意手动构建它会有多快.(它确实回答了标题的问题)

2> Prestaul..：

---

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);

3> Jim..：

---

你想避免什么？"一种不好的感觉"令人难以置信的模糊.如果您听说"DOM很慢"并决定"避免使用DOM",那么这是不可能的.将代码插入到页面中的每种方法(包括innerHTML)都将导致创建DOM对象.DOM是浏览器内存中文档的表示.您希望创建DOM对象.

人们说"DOM很慢"的原因是因为创建元素(document.createElement()用于创建元素的官方DOM接口)比在某些浏览器中使用非标准innerHTML属性要慢.这并不意味着创建DOM对象很糟糕,有必要创建DOM对象,否则您的代码根本不会做任何事情.