Отдельное дерево DOM с AngularJS / jQuery

Question

Отдельное дерево DOM с AngularJS / jQuery

26

Итак, у меня есть довольно простое приложение Angular, и я пытаюсь выяснить, что вызывает отсоединенные деревья DOM, которые отображаются в профайлере хром. Например, когда вы загружаете эту страницу:

http://rztest.nodejitsu.com/dashboard

Я получаю два отдельных дерева DOM, один из которых содержит 2 записи, а другой - 3 записи. Эта страница не использует какие-либо пользовательские директивы, поэтому она должна быть чем-то с Angular или jQuery, но я просто не вижу ничего, что могло бы вызвать эти отдельные DOM-деревья.

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

Также обратите внимание, что я использую ui-router, но я пробовал эту же работу с Angular маршрутизатором по умолчанию с теми же результатами. Даже приложение todomvc Angular (http://todomvc.com/architecture-examples/angularjs/#/), которое не использует jQuery, имеет отдельные деревья DOM.

UPDATE

Я вытащил jQuery из приложения и на моей простой странице исчезло все, кроме одного отдельно взятого дерева (и это один из AngularJS, который я знаю, где он). Когда я пытаюсь создать более сложную страницу (с настраиваемой директивой, которая имеет templateUrl и делает переключение), удаление jQuery, похоже, не помогает.

Я не уверен, что jQuery - это фактически проблема (или, может быть, ее часть) или как Angular с помощью jQuery/jqLite.

Кто-нибудь знает, существует ли существующее дерево DOM, известное в jQuery 1.10.x?

ryanzec 14 окт. 2013, в 16:21

Источник

0

У меня были проблемы с отладкой памяти в Chrome несколько раз, остаются ли эти DOM-деревья здесь, если вы отключаете оптимизацию JS при запуске браузера? Используйте команду chrome --js-flags="--nocrankshaft --noopt" . Я пытался найти разумный источник для флагов, Karma Chrome Launcher - лучшее, что я мог найти.
Andyrooger 18 окт. 2013, в 00:51
0

Да, они все еще появляются
ryanzec 18 окт. 2013, в 12:04
3

Возможно ли, что отсоединенные dom-узлы по существу являются экземплярами angular.element (), прикрепленными к закрытой переменной, созданной директивой? Допустим, у вас есть директива с шаблоном. Angular собирается создать элемент angular.element и добавить его в функцию link. Этот скомпилированный шаблон кэшируется для повторного использования при следующем выполнении функции связывания. Мне кажется, что для большинства директив будет хотя бы один отдельный dom-узел. Может быть, вы могли бы включить некоторые подробности, чтобы точно показать, когда вы получите эту проблему и какие узлы вы ожидаете, чтобы быть сборщиком мусора.
Jason Aden 21 окт. 2013, в 17:49
0

Посмотрите, поможет ли эта информация Найти утечку памяти JS в инструментах Chrome Dev
Bob Tate 11 дек. 2013, в 23:18

Показать ещё 2 комментария

Теги:

jquery

angularjs

memory-leaks

2 ответа

Ещё вопросы

У меня были проблемы с отладкой памяти в Chrome несколько раз, остаются ли эти DOM-деревья здесь, если вы отключаете оптимизацию JS при запуске браузера? Используйте команду chrome --js-flags="--nocrankshaft --noopt" . Я пытался найти разумный источник для флагов, Karma Chrome Launcher - лучшее, что я мог найти.
Возможно ли, что отсоединенные dom-узлы по существу являются экземплярами angular.element (), прикрепленными к закрытой переменной, созданной директивой? Допустим, у вас есть директива с шаблоном. Angular собирается создать элемент angular.element и добавить его в функцию link. Этот скомпилированный шаблон кэшируется для повторного использования при следующем выполнении функции связывания. Мне кажется, что для большинства директив будет хотя бы один отдельный dom-узел. Может быть, вы могли бы включить некоторые подробности, чтобы точно показать, когда вы получите эту проблему и какие узлы вы ожидаете, чтобы быть сборщиком мусора.
Посмотрите, поможет ли эта информация Найти утечку памяти JS в инструментах Chrome Dev

Richard Walton · Answer 1 · 2014-07-16T01-06-00.000Z

Я потратил несколько часов на отладку DOM node утечек в ряде крупных приложений AngularJS.

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

К сожалению, я обнаружил, что вхождение в проблему быстро создает больше вопросов, чем ответов (например, я заметил, что в моем приложении открытие/закрытие представления приведет к отсоединению элементов DOM... но повторное открытие/закрытие не приведет к тому, t создать больше). В конце концов, я должен был пойти на компромисс:

When an element is destroyed, I would recursively remove that elements children from their parents.

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

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

Paxwell · Answer 2 · 2014-01-08T22-09-00.000Z

В ответ на ваш последний вопрос этот пост выглядел актуальным.

Невозможно очистить отдельные элементы DOM