Javascript утечка памяти

Question

Я использую JQuery и делать что-то вроде этого

DOM:

<div id="parent"></div> 

JS:

var _doSomeThing = function() 
{ 
    //some codes 
} 

$(function() 
{ 
    // appending div and binding methods to span 
    $('#parent').append('<span>1</span>'); 
    $('#parent').append('<span>2</span>'); 
    $('#parent span').bind('click', _doSomeThing); 
}); 

function _clearDiv() 
{ 
    //clear div 
    $('#parent').html(''); 
} 

//sometime in future, call clear div 
_clearDiv(); 

Теперь мой вопрос, делать обязательные события в DOM, а позже просто удаление элементов из DOM приводит к утечке памяти?

Если да, то как решить эту проблему?

Answer 1

метод JQuery html пытается предотвратить утечку памяти путем удаления обработчиков событий для каких-либо элементов, удаляются в результате вызова .html('') объекта jQuery.

Из 1.4.2 источника

html: function(value) { 
    if (value === undefined) { 
     return this[0] && this[0].nodeType === 1 ? 
     this[0].innerHTML.replace(rinlinejQuery, "") : 
      null; 
    } 
    // See if we can take a shortcut and just use innerHTML 
    // THE RELEVANT PART 
    else if (typeof value === "string" && !rnocache.test(value) && 
     (jQuery.support.leadingWhitespace || !rleadingWhitespace.test(value)) && 
     !wrapMap[ (rtagName.exec(value) || ["", ""])[1].toLowerCase() ]) { 

     value = value.replace(rxhtmlTag, fcloseTag); 

     try { 
      for (var i = 0, l = this.length; i < l; i++) { 
       // Remove element nodes and prevent memory leaks 
       if (this[i].nodeType === 1) { 
        jQuery.cleanData(this[i].getElementsByTagName("*")); 
        this[i].innerHTML = value; 
       } 
      } 

     // If using innerHTML throws an exception, use the fallback method 
     } 
     catch(e) { 
      this.empty().append(value); 
     } 
    } 
    else if (jQuery.isFunction(value)) { 
     this.each(function(i){ 
      var self = jQuery(this), old = self.html(); 
      self.empty().append(function(){ 
       return value.call(this, i, old); 
      }); 
     }); 

    } 
    else { 
     this.empty().append(value); 
    } 
    return this; 
} 

Мы можем видеть, что функция jQuery.cleanData() называется. Вот источник для этого

cleanData: function(elems) { 
    var data, id, cache = jQuery.cache, 
     special = jQuery.event.special, 
     deleteExpando = jQuery.support.deleteExpando; 

    for (var i = 0, elem; (elem = elems[i]) != null; i++) { 
     id = elem[ jQuery.expando ]; 

     if (id) { 
      data = cache[ id ]; 

      if (data.events) { 
       for (var type in data.events) { 
        if (special[ type ]) { 
         jQuery.event.remove(elem, type); 

        } else { 
         removeEvent(elem, type, data.handle); 
        } 
       } 
      } 

      if (deleteExpando) { 
       delete elem[ jQuery.expando ]; 

      } else if (elem.removeAttribute) { 
       elem.removeAttribute(jQuery.expando); 
      } 

      delete cache[ id ]; 
     } 
    } 
} 

Это выглядит в jQuery.cache объект для каких-либо свойств типа событий на события объект свойство объекта данных, относящихся к каждому элементу, которые будут удалены при вызове .html('') и удаляет их.

Чтобы объяснить, как работает стандартное связывание событий, когда функция привязана как обработчик события, созданного на элементе с помощью jQuery, объект данных добавляется как свойство объекта jQuery.cache. Этот объект данных содержит объект свойств событий, который будет иметь свойство, созданное на нем, с именем, соответствующим типу события, к которому вы хотите привязать функцию обработчика события. это свойство будет содержать массив функций, который должен вызываться, когда событие возникает на элементе, поэтому функция обработчика события добавляется в этот массив.Если это первая функция обработчика событий для типа события и элемента, о котором идет речь, функция jQuery.event.handle с вызовом применить (используя этот элемент в качестве контекста, так что this в контексте выполнения функции будет ссылаться на элемент) зарегистрирован в браузер с использованием addEventListener/attachEvent.

При возникновении события функция jQuery.event.handle вызовет все функции в массиве в свойстве объекта свойств событий объекта данных, соответствующего типу события и элементу, на котором было создано событие.

Таким образом, html('') не должно вызывать утечки памяти, поскольку для предотвращения их существует ряд защитных мер.

Answer 2

Не прокомментируйте проблему утечки, но вы можете просто использовать .empty() вместо .html(''). Таким образом, вы очистите innerHTML и удалите все обработчики связанных событий.

Answer 3

Вы всегда можете использовать $('#parent span').unbind(); просто чтобы быть уверенным

Answer 4

Да, потому что JQuery поддерживает список прилагаемых обработчиков событий, чтобы сделать отсоединив их проще, и для того, чтобы явно отцепить их для вас, когда страница выгружается (который работает над более серьезной утечкой памяти в IE). (Так что Prototype, не может говорить для других libs.) Решение состоит в том, чтобы отцепить их перед удалением элементов (либо напрямую, либо через empty).

Answer 5

Поскольку вы постоянно ссылаетесь на $ ('# parent'), вы должны создать ссылку на этот объект в глобальной области, чтобы jQuery не постоянно искал объект для каждого запроса. Выполняя это, вы в основном кэшируете ссылку на объект, который значительно сократит использование памяти.

_parent = $('#parent'); 

...

function(){ _parent.append('<span>1</span>'); } 

Редактировать: Я взял этот наконечник из этой статьи на jQuery Performance Rules