Утечки памяти Javascript: отдельное дерево DOM

Я заметил, что память обозревателя начинает увеличиваться, пока я в форме (это заметно из диспетчера задач). В IE 9 это происходит с более чем 500 МБ после некоторого использования, в то время как хром является более устойчивым (идет на 200 МБ, используя тот же тест).

Я использую хром-инструменты для отладки этой проблемы. Я заметил, что существует большое количество отдельного дерева DOM:

Я предполагаю, что это может подтвердить, что есть утечка памяти. Правильно ли это? Во-вторых, мне нужно будет выяснить, как определить основную причину проблемы. Я знаю, что вы должны использовать удерживающее дерево для определения того, что останавливает восстановление этих предметов. Но я не могу узнать, как использовать удерживающее дерево. Например, что означает удерживающее дерево в приведенном выше скриншоте?

Любая помощь будет принята с благодарностью.

Ответы

Ответ 1

Есть много соображений, которые следует учитывать при написании кода, который ссылается на элементы DOM. Но все это в основном сводится к нескольким простым точкам -

а. В ваших локальных функциях всегда очищайте ссылку

var menu = $('body #menu');
// do something with menu
 .
 .
 .
 menu = null;

б. Никогда не храните ссылки как часть данных элемента .data()

с. Старайтесь не использовать ссылки DOM внутри закрытий/встроенных обработчиков, вместо этого передавайте идентификаторы

    function attachClick(){
      var someDiv = $('#someDiv');

      someDiv.click(function(){
         var a = someDiv....;
         //Wrong. Instead of doing this..
      });


      someDiv.click(function(){
         var a = $('#someDiv');
         //Pass the identifier/selector and then use it to find the element
      });       


      var myFunc = function(){
         var a = someDiv;
         //using a variable from outside scope here - big DON'T!             
      }
    }

Да, можно утверждать, что поисковые элементы могут замедлить работу страницы, но задержка очень минимальна по сравнению с производительностью, вызванной огромной причиной кучи esp. в больших одностраничных приложениях. Следовательно, № 3 следует использовать только после взвешивания плюсов и минусов. (Это действительно помогло мне в моем случае)

UPDATE

д. Избегайте анонимных функций. Именование ваших обработчиков событий и локальных функций поможет вам во время профилирования/просмотра снимков кучи.

Ответ 2

Похоже, ваш код создает много поддеревьев DOM и сохраняет ссылки на него из javascript. Вам нужно выбрать элемент из отдельного дерева. В соответствии с моментальным снимком вы должны выбрать элемент "Текст". И посмотрите на дерево хранителей.

Это дерево показывает вам все пути, которые поддерживают объект. По крайней мере один путь, обычно самый короткий, приведет вас к объекту окна. Если вы знакомы с кодом, вы можете легко найти объект в этом пути, который нужно удалить, но это не так. На пути может быть много таких объектов. Объект с наименьшим расстоянием интереснее.