【问题标题】:does manual garbage collection of DOM elements in jquery improve browser performance at all?jquery 中 DOM 元素的手动垃圾收集是否会提高浏览器性能?
【发布时间】:2012-02-27 13:22:31
【问题描述】:

在性能范围内,删除不再需要的元素是否有意义?还是浏览器会对代码中没有进一步引用的 dom 元素执行自动垃圾回收?

$('some_element').fadeOut(1000, function(el){
   $(el).remove(); // <-- does this make sense at all?
});

【问题讨论】:

  • 垃圾回收的主要目的是让程序员不用担心他们创建和使用的对象的内存管理 stackoverflow.com/questions/864516/…
  • 我同意,但垃圾收集通常在严格的语法语言(如 Objective-c)上更有效,而在更简单的语言上效率较低。
  • 随着javascript的提前编译似乎越来越流行……提前编译会对这个问题的答案产生影响吗?

标签: javascript jquery ajax dom browser


【解决方案1】:

这段代码:

$('some_element').remove();

告诉浏览器你已经完成了该元素并且在 DOM 中不再需要它。如果您的 javascript 中没有对该元素的任何其他引用,那么垃圾收集器将释放它使用的内存。

如果您不删除它,那么只要显示该网页,该 DOM 元素就会一直保留在您的网页中。它永远不会被垃圾回收,因为浏览器无法知道您是否打算让它留在页面中。

最好手动删除不再需要的 DOM 元素。

但是,在 99% 的情况下,这并不重要,因为与网页使用的总内存相比,一个 DOM 元素使用的内存微不足道。无论如何,当用户转到另一个网页时,网页中的所有内容都会被释放。

释放这样的东西确实会产生重大影响的主要时间是当您一遍又一遍地执行相同的操作时(在一个大循环中,在一个计时器上,等等......)。在这种情况下,您不希望对象堆积起来并在使用页面时消耗越来越多的内存。

【讨论】:

  • 所以这适用于单页应用程序,对吗? (在一页中做所有事情)假设程序员使用 jQuery 通过类名查找元素。这些元素太多会导致开销吗?因此,有必要删除不需要的元素,而不是仅仅将其隐藏起来。
  • @Joseph - 如果您的页面中真的不再需要它,请将其删除。这是最佳做法。
【解决方案2】:

是的,这是有道理的。

GC 应该只在没有对 DOM 元素的引用时启动。虽然它仍然是 DOM 的一部分(display: none 实际上并没有删除它),但它会消耗内存,从 DOM 部分到事件处理程序等。

如果您的意图是淡出元素删除元素(可能不再需要或删除 DOM 混乱),请使用示例中的代码。

【讨论】:

    【解决方案3】:

    fadeOut 确实删除该元素。有趣的是,它所做的只是淡出它。它做了一个动画,将opacity 样式减少到0。浏览器不显示元素,但它仍然存在于内存中。所以是的,执行remove 可能会节省一点内存,因为未附加的、未引用的 DOM 元素将被垃圾回收清理掉。

    话虽如此,您可能不需要费心,除非您在页面上有大量元素,或者如果您的页面将打开很长时间而无需重新加载页面(例如 AJAXy webapp )。

    与往常一样,在您真正需要之前不要花大力气进行优化。


    另请注意,如果您真的非常想优化,您也可以在回调中执行此操作:

    $(this).remove();
    

    使用 DOM 元素而不是选择器字符串构造 jQuery 对象要快很多倍。

    【讨论】:

    • 谢谢。当然,您在回调中的引用是正确的。在原始问题中包含您的评论,以将重点放在垃圾收集的主要问题上。
    【解决方案4】:

    是的,这是有道理的,因为remove 方法负责删除附加在元素上的所有事件,它肯定会释放元素使用的内存。

    但是浏览器会负责释放未使用的资源,因为它超出了范围,就像您导航到另一个页面或刷新页面一样。

    【讨论】:

    • 我认为你不能说it definitely releases the memory utilized by the elements。您可以这样说的唯一方法是您知道垃圾收集器在每个浏览器中的工作原理。垃圾收集完全取决于浏览器,您只能说它可能在页面卸载时运行,并且可能在页面仍然加载时不时运行。各种浏览器都有内存泄漏,在某些情况下,直到重新启动浏览器才会释放内存。
    猜你喜欢
    • 2017-11-16
    • 2015-02-07
    • 2011-12-29
    • 1970-01-01
    • 2019-11-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多