是否需要在 html() 或 innerHTML 之前调用 empty()？答案

【问题标题】：Is necessary to call empty() before html() or before innerHTML?是否需要在 html() 或 innerHTML 之前调用 empty()？
【发布时间】：2013-06-03 12:21:45
【问题描述】：

我有一个弹出插件，它使用 AJAX 调用的响应设置 <div/> 的 html 内容。

每次我打开弹出窗口时，我都会在代码中调用$("#popup").html(response)。这会用新内容覆盖现有的 html 内容。

我应该在调用$("popup").html(response) 之前调用$("popup").empty()，以便释放之前在$("popup") div 中的对象使用的浏览器内存吗？（最终防止内存泄漏）

PS：如果我打电话给$("popup")[0].innerHTML = response 怎么办？我应该调用.empty() 方法吗？

【问题讨论】：

stackoverflow.com/questions/8567957/…

标签： javascript jquery performance

【解决方案1】：

简答否。

jQuery.fn.html 在做其他几件事后使用DOMNode.innerHTML =。一种是删除节点上的所有存储数据（通过$.fn.data 存储），请参阅http://james.padolsey.com/jquery/#v=git&fn=jQuery.fn.html 了解完整的源代码概览。

.innerHTML 删除子元素并替换为新的 html。但要小心内存泄漏。我会在设置innerHTML 之前使用jQuery.fn.empty。例如。

var a = document.createElement('div'),
    b = document.createElement('div');

    b.appendChild(a);

    b.innerHTML = 'new innerHMTL'.

你会认为一切正常。但是节点替换/删除仍然在变量a 中捕获，因此不会被扔给垃圾收集器。在您调用 jQuery.removeData 等之前，我不确定 jQuery 是否会在内部存储 DOMNodes。

【讨论】：

【解决方案2】：

html方法的jQuery文档说：

当 .html() 用于设置元素的内容时，该元素中的任何内容都会被新内容完全替换。此外，jQuery 会在用新内容替换这些元素之前从子元素中删除其他结构，例如数据和事件处理程序。

所以你不需要打电话给empty()。

【讨论】：

【解决方案3】：

无需调用empty().html(response)方法ovveridesexisting content。

【讨论】：

【解决方案4】：

除了 .empty() 运行得更快并且 .html() 可以覆盖上下文的内容之外没有区别

http://jsperf.com/jquery-empty-vs-html/17

【讨论】：