避免内存泄漏/使用Javascript

本文介绍了避免内存泄漏/使用Javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是jQuery的新手。我有点困惑它是否可以或可能导致内存泄漏？

I am newbie to jQuery. I am bit confused whether is it fine or may cause memory leak ?

这是代码：在每个新值的某些日期过滤器上调用此方法

Here is the code: This method is called on certain date filters for each new values

function preapreTooltip(chart) {
    var tickLength = chart.xAxis[0].tickPositions.length,
        ticks = chart.xAxis[0].ticks,
        tickPositions = chart.xAxis[0].tickPositions;
    for ( var iCntr = 0; iCntr < tickLength; iCntr++) {
         var tickVal = tickPositions[iCntr];

    //.label or .mark or both
    (function(tickVal) { // Is this good practice to call function like this?
        ticks[tickVal].label
        .on('mouseover', function(event) { // Is this good practice to call function like this?
            var label = '', labelCnt=0;
            $(chart.series).each(function(nCntr, series) {
                //business logic for each series
            });

           // calling method to show values in a popup
        });

        ticks[tickVal].label.on('mouseout', function(event) { // Is this good practice to call function like this?
            try {
                hideWrapper(); // hides popup
            } catch (e) {
            // do nothing
            }
        });

    })(tickVal);
  }
}

推荐答案

编写大型纯JavaScript项目时需要避免浏览器特定的问题，当使用jQuery等库时，应该假设库的设计可以帮助您避免这些问题。但是，考虑到内存泄漏很难追踪，并且特定浏览器的每个不同版本的行为可能会有所不同 - 知道如何通常避免内存泄漏比明确更好：

Whilst there are browser specific issues that need to be avoided when writing large pure JavaScript projects, when using a library such as jQuery it should be assumed that the library's design helps you avoid these problems. However, considering memory leaks are rather hard to track down, and each different version of a particular browser could behave differently - it is far better to know how to generally avoid memory leaks than being specific:

如果您的代码被多次迭代，请确保您正在使用的变量可以被垃圾收集丢弃，并且不会在闭包引用中被束缚。

如果您的代码处理大型数据结构，请确保您有办法删除或取消数据。

如果您的代码构造许多对象，函数和事件监听器 - 最好也包括一些解构性代码。

尽量避免将javascript对象或函数作为属性直接附加到元素 - 即 element.onclick = function（）{} 。

如果有疑问，请在代码完成后整理。

If your code is being iterated many times, make sure the variables you are using can be discarded by garbage collection, and are not tied up in closure references.
If your code is dealing with large data structures, make sure you have a way of removing or nullifying the data.
If your code constructs many objects, functions and event listeners - it is always best to include some deconstructive code too.
Try to avoid attaching javascript objects or functions to elements directly as an attribute - i.e. element.onclick = function(){}.
If in doubt, always tidy up when your code is finished.

你似乎相信它是cal的方式一个会对泄漏产生影响的函数，但是这些函数的内容总是更有可能导致问题。

You seem to believe that it is the way of calling a function that will have an effect on leaking, however it is always much more likely to be the content of those functions that could cause a problem.

每当使用事件监听器时，尝试找到重用函数的方法，而不是每个元素创建一个。这可以通过使用 来实现（捕获祖先/父级的事件，并将反应委托给 event.target ），或者编写一个单一的通用函数来以相对的方式处理你的元素，通常相对于此或 $（this）。

当需要创建许多事件处理程序时，通常最好将这些事件侦听器存储为命名函数，以便在完成后再次删除它们。这意味着避免使用匿名函数。但是，如果您知道只有您的代码处理DOM，您可以回退使用 $（elements）.unbind（'click'）删除所有点击处理程序使用jQuery将（匿名或非匿名）应用于所选元素。但是，如果你确实使用后一种方法，那么使用jQuery的事件命名空间能力肯定会更好 - 所以你知道你只是删除了你的事件。即 $（elements）.unbind（'click.my_app'）; 。这显然意味着你必须使用 $（elements）.bind（'click.my_app'，function（）{...}）绑定事件;

When needing to create many event handlers, it is usually best to store those event listeners as named functions so you can remove them again when you are finished. This would mean avoiding using anonymous functions as you are doing. However, if you know that it is only your code dealing with the DOM, you can fallback to using $(elements).unbind('click') to remove all click handlers (anonymous or not) applied using jQuery to the selected elements. If you do use this latter method however, it is definitely better to use jQuery's event namespacing ability - so that you know you are only removing your events. i.e. $(elements).unbind('click.my_app');. This obviously means you do have to bind the events using $(elements).bind('click.my_app', function(){...});

更具体：

自动调用匿名函数

being more specific:

auto calling an anonymous function

(function(){
  /*
   running an anonymous function this way will never cause a memory
   leak because memory leaks (at least the ones we have control over)
   require a variable reference getting caught in memory with the
   JavaScript runtime still believing that the variable is in use,
   when it isn't - meaning that it never gets garbage collected.
   This construction has nothing to reference it, and so will be
   forgotten the second it has been evaluated.
  */
})();

使用jQuery添加匿名事件监听器：

adding an anonymous event listener with jQuery:

var really_large_variable = {/*Imagine lots of data here*/};

$(element).click(function(){
  /*
   Whilst I will admit not having investigated to see how jQuery
   handles its event listeners onunload, I doubt if it is auto-
   matically unbinding them. This is because for most code they
   wont cause a problem, especially if only a few are in use. For
   larger projects though it is a good idea to create some beforeunload
   or unload handlers that delete data and unbind any event handling.
   The reason for this is not to protect against the reference of the
   function itself, but to make sure the references the function keeps
   alive are removed. This is all down to how JS scope works, if you
   have never read up on JavaScript scope... I suggest you do so.

   As an example however, this anonymous function has access to the
   `really_large_variable` above - and will prevent any garbage collection
   system from deleting the data contained in `really_large_variable`
   even if this function or any other code never makes use of it.
   When the page unloads you would hope that the browser would be able
   to know to clear the memory involved, but you can't be 100% certain
   it will *(especially the likes of IE6/7)* - so it is always best
   to either make sure you set the contents of `really_large_variable` to null
   or make sure you remove your references to your closures/event listeners.
  */
});

tearDowns and desconstruction

我是重点 - 关于我的解释 - 关于何时不再需要页面并且用户正在导航。然而，在今天的ajaxed内容和高度动态的界面世界中，上述内容变得更加重要;不断创建和删除元素的GUI。

tearDowns and deconstruction

I've focused - with regard to my explanations - on when the page is no longer required and the user is navigating away. However the above becomes even more relevant in today's world of ajaxed content and highly dynamic interfaces; GUIs that are constantly creating and trashing elements.

如果你正在创建一个动态的javascript应用程序，我不能强调使用构建器的重要性.tearDown 或 .deconstruct 不再需要代码时执行的方法。这些应该逐步执行大型自定义对象构造并使其内容无效，以及删除已动态创建且不再使用的事件侦听器和元素。在替换元素的内容之前，你还应该使用jQuery的 empty 方法 - 这可以用他们的话更好地解释：

If you are creating a dynamic javascript app, I cannot stress how important it is to have constructors with .tearDown or .deconstruct methods that are executed when the code is no longer required. These should step through large custom object constructs and nullify their content, as well as removing event listeners and elements that have been dynamically created and are no longer of use. You should also use jQuery's empty method before replacing an element's content - this can be better explained in their words:

如果要在不破坏数据或事件处理程序的情况下删除元素（以便以后可以重新添加），请改用.detach（）。

If you want to remove elements without destroying their data or event handlers (so they can be re-added later), use .detach() instead.

使用tearDown方法进行编码不仅强迫你更加整洁（即确保将相关的代码，事件和元素保持在一起），它通常意味着你构建代码以更模块化的方式;对于未来的应用程序，可读性以及可能在以后接管您的项目的任何其他人来说，这显然要好得多。

Not only does coding with tearDown methods force you to do so more tidily (i.e. making sure you to keep related code, events and elements namespaced together), it generally means you build code in a more modular fashion; which is obviously far better for future-proofing your app, for read-ability, and for anyone else who may take over your project at a later date.

这篇关于避免内存泄漏/使用Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！