31

Вопрос по jquery, google-chrome-devtools, javascript – Утечки памяти в JavaScript: отдельное дерево DOM

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

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

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

Будем очень благодарны любой помощи.

Есть лиэтот другой вопрос / ответ помочь тебе?

от msung

Не могли бы вы уточнитьmemory of the browser starts increasing whilst I am in a form с каким-то кодом? Это помогает найти утечку памяти.

от Ikrom
2 ответа
25

При написании кода

который ссылается на элементы 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 следует использовать только после взвешивания плюсов и минусов. (Это помогло значительно в моем случае)

ОБНОВИТЬ

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

Помните также о любых прослушивателях событий, которые присоединены к элементу DOM и не удалены, когда элемент DOM отсоединен

от fadomire

@aug: Спасибо за указание на это. Исправили мой фрагмент.

от Robin Maben

Я должен был не согласиться с (c), единственный случай, когда это вызвало бы проблему, - это если бы последующий вызов функции возвратил закрытие или выполнил операцию, которая сохранила ссылку на переданный элемент dom (или обернутый элемент jQuery) - - например, сохранение элемента в статическом списке или создание какой-либо циклической ссылки. У вас есть пример, когда простая передача элемента в метод может вызвать проблемы?

от Pebbl

Я нене согласен с этими советами. (а) не является необходимым; всякий раз, когда область остается (например, когда выоставляя локальную функцию), пока нет ссылок на ссылку, она будет очищена. (б) хорошо, если выОтвечайте, сколько ссылок выповторное хранение; это неНеважно, где вы храните их. (в) тоже самое. Просто будьте ответственны за то, сколько ссылок вы храните. Использование переменных из более широкой области видимости хорошо и может иметь улучшения производительности. Большая проблема в том, что выскорее всего, создайте элементы и отсоедините их, вместо того, чтобы фактически удалить их.

от ZachB
2

Похоже

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

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

Похожие вопросы