$(sel).html和dom.innerHTML之间的区别

Question

使用jQuery,我可以$(sel).html(html)用来生成一个html区域.

如果没有jquery,我可以做同样的事情,dom.innerHTML = html;
我也发现$(sel).html()它比较慢dom.innerHTML,但为什么呢？

$(sel).html和之间的区别是dom.innerHTML什么？
使用dom.innerHTML替换是否安全$(sel).html？

Answer 1

设置HTML时会.html()提供一些适当的内务处理,以防止在使用其他jQuery功能之前内存泄漏.innerHTML.

例如,如果您.data()在元素上使用并分配.innerHTML了您使用的对象的父级.data(),那么.html()将清除.data()与要替换的元素关联的元素.如果您使用.innerHTML,那么这些.data()元素将被孤立并且在您离开页面之前永远不会被清除(短期内存泄漏).对于与被删除对象上的事件处理程序关联的一些jQuery数据也是如此.

在jQuery中编程最安全的方法是在删除使用jQuery的元素时使用.remove()和.html()(或其他类似的jQuery函数)而不是本机DOM函数.

.html() 可能更慢,因为它做得更多(如果使用其他jQuery功能,其中一些是有利的).

实际上,如果.innerHTML直接使用已经使用其他jQuery功能的元素的父元素,则可能发生的内存泄漏通常不是问题.它们可能有意义的地方是,如果您有一个与元素关联的大型数据结构(如in .data()),或者您创建和销毁大量元素,或者您打算让您的页面运行很长时间(如单页应用).因此,如果您想要安全,那么您可以使用jQuery方法来处理任何可以删除或替换元素的方法.

这是一个简单的内存泄漏的例子:

<div id="container"><span id="whatever">foo</span></div>

$("#whatever").data("somedata", "really long string");
document.getElementById("container").innerHTML = "<span>new text</span>";

这导致.data()第一行代码中的信息集泄漏,因为jQuery永远不会有机会清理与现在已从DOM中删除的#whatever对象关联的数据,但是jQuery从未看到您删除了它.

然而,这不会以这种方式泄漏:

<div id="container"><span id="whatever">foo</span></div>

$("#whatever").data("somedata", "really long string");
$("#container").html("<span>new text</span>");