jQuery 内存泄漏模式和原因 [英] jQuery memory leak patterns and causes

问题描述

jQuery 中有哪些标准问题或编码模式会导致内存泄漏?

What are some of the standard issues or coding patterns in jQuery which lead to memory leaks?

我在 StackOverflow 上看到了许多与 ajax() 调用或 jsonp 或 DOM 删除相关的问题.大多数 jQuery 内存泄漏问题都集中在特定问题或浏览器上，如果能列出 jQuery 中的标准内存泄漏模式，那就太好了.

I have seen a number of questions related to the ajax() call or jsonp or DOM removal on StackOverflow. Most of the jQuery memory leak questions are focussed on specific issues or browsers and it would be nice to have a listing of the standard memory leak patterns in jQuery.

这里有一些关于 SO 的相关问题:

Here are some related questions on SO:

• 为什么 jQuery 内存泄漏如此严重?
• 简单的 jQuery Ajax 调用会在 Internet Explorer 中泄漏内存
• 涉及 jQuery Ajax 请求的内存泄漏

网络资源:

• 如何使用 jQuery.data 将对象和数据附加到 DOM 以避免内存泄漏问题
• JavaScript 中的内存泄漏模式

推荐答案

据我所知，javascript 中的内存管理是通过引用计数来完成的 - 虽然对对象的引用仍然存在，但不会被释放.这意味着在单页应用程序中创建内存泄漏是微不足道的，并且可能会绊倒那些来自 java 背景的使用.这不是特定于 JQuery 的.以下面的代码为例:

From what I understand, memory management in javascript is accomplished by reference counting - while a reference to an object still exists, it will not be deallocated. This means that creating a memory leak in a single page application is trivial, and can trip up those of use coming from a java background. This is not specific to JQuery. Take the following code for example:

function MyObject = function(){
   var _this = this;
   this.count = 0;
   this.getAndIncrement = function(){
       _this.count++;
       return _this.count;
   }
}

for(var i = 0; i < 10000; i++){
    var obj = new MyObject();
    obj.getAndIncrement();
}

在您查看内存使用情况之前，它看起来很正常.由于_this"指针(增加 i 的最大值以更显着地看到它.)，当页面处于活动状态时，MyObject 的实例永远不会被释放.(在旧版本的 IE 中，它们在程序退出之前永远不会被释放.)由于 javascript 对象可能在帧之间共享(我不建议尝试这样做，因为它是严重的气质.)，在某些情况下，即使在现代浏览器中 javascript物体可以停留的时间比它们预期的要长得多.

It will look normal until you look at memory usage. Instances of MyObject are never deallocated while the page is active, due to the "_this" pointer (increase the max value of i to see it more dramatically.). (In older versions of IE they were never deallocated until the program exits.) Since javascript objects may be shared between frames (I don't recommend trying this as it is seriously temperamental.), there are cases where even in a modern browser javascript objects can hang around a lot longer than they are meant to.

在jquery的上下文中，经常会存储引用，以节省dom搜索的开销——例如:

In the context of jquery, references are often stored to save the overhead of dom searching - for example:

function run(){
    var domObjects = $(".myClass");
    domObjects.click(function(){
        domObjects.addClass(".myOtherClass");
    });
}

这段代码将永远持有 domObject(及其所有内容)，因为在回调函数中引用了它.

This code will hold on to domObject (and all its contents) forever, because of the reference to it in the callback function.

如果jquery的编写者在内部遗漏了这样的实例，那么库本身就会泄漏，但更多的时候是客户端代码.

If the writers of jquery have missed instances like this internally, then the library itself will leak, but more often it is the client code.

第二个例子可以通过在不再需要时显式清除指针来修复:

The second example can be fixed by explicitly clearing the pointer when it is no longer required:

function run(){
    var domObjects = $(".myClass");
    domObjects.click(function(){
        if(domObjects){
            domObjects.addClass(".myOtherClass");
            domObjects = null;
        }
    });
}

或再次查找:

function run(){
    $(".myClass").click(function(){
        $(".myClass").addClass(".myOtherClass");
    });
}

一个好的经验法则是在定义回调函数时要小心，并尽可能避免过多的嵌套.

A good rule of thumb is to be careful where you define your callback functions, and avoid too much nesting where possible.

正如 Erik 在评论中指出的那样，您还可以使用 this 指针来避免不必要的 dom 查找:

As was pointed out in the comments by Erik, you could also use the this pointer to avoid the unnescessary dom lookup:

function run(){
    $(".myClass").click(function(){
        $(this).addClass(".myOtherClass");
    });
}

这篇关于jQuery 内存泄漏模式和原因的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！