【问题标题】:What sort of memory leaks should I watch for with jQuery's data()?使用 jQuery 的 data() 应该注意什么样的内存泄漏?
【发布时间】:2010-11-06 13:35:08
【问题描述】:

我应该将每个 data() 调用与以后的 removeData() 调用配对吗?

我的假设:jQuery 的 remove() 将从 DOM 中删除元素,如果我没有任何其他要删除的引用,我不必再做任何清理工作。

但是,如果我有一些 javascript 变量或对象引用其中一个被删除的元素,我需要清理它,并且我假设 这也适用于 jQuery 的数据函数, 因为它以某种方式引用元素。

因此,如果我确实需要在删除之前调用 removeData,是否有删除与元素关联的所有数据的快捷方式,或者我必须通过名称显式调用每个数据?

编辑:我查看了源代码并确认了 Borgar 和 roosteronacid 所说的话。 Remove 将元素从 dom 中取出并删除与它们一起存储的所有事件和数据——这很方便,但让我想知道何时使用 removeData()。可能不会经常。

【问题讨论】:

    标签: javascript jquery dom memory memory-leaks


    【解决方案1】:

    jQuery 的数据不会保留对元素的引用,因此你不必担心内存泄漏。它的预期目的是解决这个确切的问题。

    稍微简化一下它的工作原理:

    一个 id 成员被添加到每个“接触”的 DOM 节点。涉及该 DOM 元素的所有后续操作都使用该 id。

    var theNode = document.getElementById('examplenode');
    theNode[ 'jQuery' + timestamp ] = someInternalNodeID;
    

    您可以使用 jQuery 使用的相同函数访问 id:

    someInternalID = jQuery.data( document.body );
    

    当您将数据附加到节点时,它会将数据存储在 jQuery 对象中,并在节点的内部 id 下归档。您的 $(element).data(key,value) 在内部翻译为:

    jQuery.cache[ someInternalNodeID ][ theKey ] = theValue;
    

    一切都进入同一个结构,包括事件处理程序:

    jQuery.cache[ someInternalNodeID ][ 'events' ][ 'click' ] = theHandler;
    

    当一个元素被删除时,jQuery 可以通过一个简单的操作丢弃所有数据(和事件处理程序):

    delete jQuery.cache[ someInternalNodeID ];
    

    理论上,您也可以因此删除 jQuery 而不会从任何引用中发生泄漏。 jQuery 甚至支持库的多个独立实例,每个实例都拥有自己的一组数据或事件。

    您可以在 the "The DOM Is a Mess" presentation 中看到 John Resig 解释这些内容。

    【讨论】:

    • 读者应该注意,只有使用 jQuery 的 .remove() 方法才安全,这会导致存储的数据被清理。如果您自己从 DOM 中删除元素,jQuery 将不知道要清理它,并且您将在页面关闭之前发生泄漏。
    • 有没有人知道我可以用.data() 存储的MB or KB 的大小
    【解决方案2】:

    jQuery 的全部意义在于从浏览器中的糟糕 JavaScript 实现和错误中抽象出来......例如内存泄漏 :)

    .. 是的;当该元素从 DOM 中移除时,该元素的所有关联数据都将被移除。

    【讨论】:

      【解决方案3】:

      总的来说,javascript 可以很好地了解何时适合收集垃圾,除非您正在编写非常大规模或长时间运行的客户端应用程序,否则所涉及的内存大多是无关紧要的并试图事后猜测它不会给你带来很多好处。

      在某些情况下,确定 jQuery 中哪些未完成的词法闭包或其他棘手的 javascript 可能仍在访问您的给定数据可能相当复杂。

      不过,据我所知,如果您使用 jQuery 的数据函数存储对任何内容的引用,那么它将在元素被删除后继续存在,因此删除该引用将也是必要的。一些简单的测试用例会给你一个更明确的答案。

      【讨论】:

        猜你喜欢
        • 2013-02-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2015-12-19
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多