jquery - $(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 提供了一些适当的内务处理，以防止在设置 .innerHTML 之前使用其他 jQuery 功能时发生内存泄漏。

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

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

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

实际上，如果您直接在元素的父元素上使用 .innerHTML 可能会发生内存泄漏，而您一直在这些元素上使用其他 jQuery 功能，这通常不是问题。它们可能有意义的地方是，如果您有与元素关联的大型数据结构(如 .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 永远没有机会清理与现在已被删除的 #whatever 对象关联的数据来自 DOM，但 jQuery 从未发现您删除了它。

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

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

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