如何避免jQuery的内存泄漏？

Question

jQuery在其内部缓存中保存对DOM节点的引用,直到我显式调用$ .remove().如果我使用像React这样的框架自己删除DOM节点(使用本机DOM元素API),我该如何清理jQuery的mem缓存？

我正在使用React设计一个相当大的应用程序.对于那些不熟悉的人,React将根据自己的"影子"DOM表示拆除DOM并根据需要重建.该部件工作良好,没有内存泄漏.

Flash前进,我们决定使用jQuery插件.在React运行其渲染循环并构建DOM之后,我们初始化插件,这会导致jQuery保存对相应DOM节点的引用.稍后,用户更改页面上的选项卡,React将删除这些DOM元素.不幸的是,因为React不使用jQuery的$ .remove()方法,所以jQuery维护对这些DOM元素的引用,垃圾收集器永远不会清除它们.

有没有办法告诉jQuery刷新缓存,或者更好的是,根本不缓存？我希望仍然能够利用jQuery的插件和跨浏览器的优点.

Answer 1

jQuery通过内部 API 跟踪事件和其他类型的数据,jQuery._data()但由于此方法是内部的,因此没有官方支持.

内部方法具有以下签名:

jQuery._data( DOMElement, data)

因此,例如,我们将检索附加到Element的所有事件处理程序(通过jQuery):

var allEvents = jQuery._data( document, 'events');

这将返回并Object包含事件类型作为键,并将事件处理程序数组作为值.

现在,如果您想获取特定类型的所有事件处理程序,我们可以编写如下:

var clickHandlers = (jQuery._data(document, 'events') || {}).click;

这将返回Array的"单击"事件处理程序或undefined如果指定的事件没有被绑定到的元素.

为什么我说这个方法？因为它允许我们跟踪事件委托和直接附加的事件监听器,以便我们可以找出事件处理程序是否多次绑定到同一个元素,从而导致内存泄漏.

但是如果你还想要一个没有jQuery的类似功能,你可以用这个方法实现它 getEventHandlers

看看这篇有用的文章:

• getEventHandlers
• getEventListeners - chrome
• getEventListeners - firebug

调试

我们将编写一个简单的函数来打印事件处理程序及其命名空间(如果已指定)

function writeEventHandlers (dom, event) {
    jQuery._data(dom, 'events')[event].forEach(function (item) {
        console.info(new Array(40).join("-"));
        console.log("%cnamespace: " + item.namespace, "color:orangered");
        console.log(item.handler.toString());
    });
}

使用此功能非常简单:

writeEventHandlers(window, "resize");

我写了一些实用程序,允许我们跟踪绑定到DOM Elements的事件

• 要点:获取元素的所有事件处理程序

如果您关心性能,您会发现以下链接很有用:

• 单页应用程序中的内存泄漏
• 编写快速,内存高效的JavaScript
• JavaScript内存分析

我鼓励任何读过这篇文章的人,在我们的代码中注意内存分配,因为三个重要的事情我学习了性能问题:

1. 记忆
2. 记忆
3. 是的,记忆.

事件:良好做法

创建命名函数是一个好主意,以便从DOM元素绑定和解除绑定 事件处理程序.

如果要动态创建DOM元素,例如,向某些事件添加处理程序,则可以考虑使用事件委派而不是将事件侦听器直接绑定到每个元素,这样,动态添加元素的父级将处理事件.此外,如果您使用jQuery,您可以命名事件;)

//the worse!
$(".my-elements").click(function(){});

//not good, anonymous function can not be unbinded
$(".my-element").on("click", function(){});

//better, named function can be unbinded
$(".my-element").on("click", onClickHandler);
$(".my-element").off("click", onClickHandler);

//delegate! it is bound just one time to a parent element
$("#wrapper").on("click.nsFeature", ".my-elements", onClickMyElement);

//ensure the event handler is not bound several times
$("#wrapper")
    .off(".nsFeature1 .nsFeature2") //unbind event handlers by namespace
    .on("click.nsFeature1", ".show-popup", onShowPopup)
    .on("click.nsFeature2", ".show-tooltip", onShowTooltip);

循环参考

虽然循环引用不再是那些在垃圾收集器中实现标记和扫描算法的浏览器的问题,但如果我们要交换数据,那么使用这种对象并不是一个明智的做法,因为这是不可能的(现在)序列化为JSON,但在将来的版本中,由于处理这种对象的新算法,它将成为可能.我们来看一个例子:

var o1 = {};
    o2 = {};
o1.a = o2; // o1 references o2
o2.a = o1; // o2 references o1

//now we try to serialize to JSON
var json = JSON.stringify(o1);
//we get:"Uncaught TypeError: Converting circular structure to JSON"

现在让我们尝试另一个例子

var freeman = {
    name: "Gordon Freeman",
    friends: ["Barney Calhoun"]
};

var david = {
    name: "David Rivera",
    friends: ["John Carmack"]
};

//we create a circular reference
freeman.friends.push(david); //freeman references david
david.friends.push(freeman); //david references freeman

//now we try to serialize to JSON
var json = JSON.stringify(freeman);
//we get:"Uncaught TypeError: Converting circular structure to JSON"

PD:这篇文章是关于用JavaScript克隆对象的.此要点还包含有关使用循环引用克隆对象的演示:clone.js

重用对象

让我们遵循一些编程原则,DRY (不要重复自己),而不是创建具有类似功能的新对象,我们可以用一种奇特的方式抽象它们.在这个例子中,我将重用一个事件处理程序(再次使用事件)

//the usual way
function onShowContainer(e) {
    $("#container").show();
}
function onHideContainer(e) {
    $("#container").hide();
}
$("#btn1").on("click.btn1", onShowContainer);
$("#btn2").on("click.btn2", onHideContainer);

 

//the good way, passing data to events
function onToggleContainer(e) {
    $("#container").toggle(e.data.show);
}
$("#btn1").on("click.btn1", { show: true }, onToggleContainer);
$("#btn2").on("click.btn2", { show: false }, onToggleContainer);

并且有很多方法可以改进我们的代码,对性能产生影响并防止内存泄漏.在这篇文章中,我主要讨论了事件,但还有其他方法可以产生内存泄漏.我建议阅读之前发布的文章.

快乐阅读和快乐编码!

Answer 2

如果您的插件公开了一种方法来以编程方式销毁其实例之一（即$(element).plugin('destroy')），您应该在componentWillUnmount组件的生命周期中调用该方法。

componentWillUnmount在从 DOM 卸载组件之前调用，它是清理组件在其生命周期中可能创建的所有外部引用/事件侦听器/dom 元素的正确位置。

var MyComponent = React.createClass({
    componentDidMount() {
        $(React.findDOMNode(this.refs.jqueryPluginContainer)).plugin();
    },
    componentWillUnmount() {
        $(React.findDOMNode(this.refs.jqueryPluginContainer)).plugin('destroy');
    },
    render() {
        return <div ref="jqueryPluginContainer" />;
    },
});

如果您的插件没有公开一种自行清理的方法，本文列出了几种您可以尝试取消对考虑不周的插件的引用的方法。

但是，如果您在 React 组件中使用 jQuery创建DOM 元素，那么您就犯了严重错误：在使用 React 时您几乎不需要jQuery，因为它已经抽象了使用 DOM 的所有痛点。

我对使用 ref 也持谨慎态度。只有少数用例真正需要引用，并且这些用例通常涉及与操作/读取 DOM 的第三方库的集成。

如果您的组件有条件地呈现受 jQuery 插件影响的元素，您可以使用回调引用来侦听其挂载/卸载事件。

之前的代码将变为：

var MyComponent = React.createClass({
    handlePluginContainerLifecycle(component) {
        if (component) {
            // plugin container mounted
            this.pluginContainerNode = React.findDOMNode(component);
            $(this.pluginContainerNode).plugin();
        } else {
            // plugin container unmounted
            $(this.pluginContainerNode).plugin('destroy');
        }
    },
    render() {
        return (
            <div>
                {Math.random() > 0.5 &&
                    // conditionally render the element
                    <div ref={this.handlePluginContainerLifecycle} />
                }
            </div>
        );
    },
});