jquery:最快的DOM插入？

Question

我对如何插入大量HTML感觉不好.让我们假设我们得到:

var html="<table>..<a-lot-of-other-tags />..</table>"

我想把它放进去

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

也愿意学习替代品.

Answer 1

请尝试以下方法:

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

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

接受的答案不工作的IE 6,7,8,因为你不能设置innerHTML一个的<table>元素,由于IE浏览器中的错误:jsbin.

Answer 2

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

Answer 3

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

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