Backbone.js Управление памятью, увеличение DOM Node Count

Ответ 1

Я предположил, что после того, как прослушиватели событий были правильно удалены, DOM Node Count будет просто управлять собой, но это, похоже, не так.

Если я понял, что вы пытаетесь избавиться от Node, удалив из него слушателей, это тот случай?

Обратите внимание, что добавление прослушивателя событий в DOM Node не предотвращает сбор мусора Node, зависимость находится в противоположном направлении: пока Node жив, функция слушателя не будет собрана.

• Существует ли подходящий способ утилизации узлов DOM, чтобы они были правильно собраны мусором или это DOM Node Подсчитайте текущую сумму, которая никогда не уменьшится?

Чтобы убедиться, что DOM Node может быть собран с помощью мусора, вы должны

• Удалите Node из дерева документов.
• Очистить все ссылки от javascript до Node AND ко всем узлам в том же поддереве, что и ссылка с javascript на один из узлов в поддереве, будет содержать целые поддеревы.

Поэтому недостаточно просто удалить слушателей из Node, чтобы сделать его доступным для коллекционирования. Кроме того, не требуется для удаления слушателей из Node, если вы хотите, чтобы Node был собран.

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

• Является ли DOM Node Count даже надежной цифрой?

Да. Он должен быть надежным, так как он увеличивается, когда создается новый DOM Node и уменьшается при его уничтожении. Таким образом, реализация довольно проста, чтобы доверять ей.

Ответ 2

Это исправлено! - UPGRADE BACKBONE. (продолжить чтение)

Мы обновили с Backbone 0.9.2 до Backpone 0.9.10 и реализовали функцию listenTo и stopListening для каждого вида/модели/коллекции. Результаты OMGFANTASTIC.

После 7 минут работы с тем же стресс-тестом, это результаты:

Результаты: 7,0 минут, 6,926 узлов DOM (без записи временной шкалы) и счетчика прослушивания событий выглядит как BLUE BLADES OF GRASS. Я в шоке. Использование памяти также удивительно мало по сравнению с предыдущими тестами.

Через 18 минут: количество слушателей событий одинаково, никогда не превышая 154, а DOM Node Count остается ниже 25 000 за все время! Очевидно, что некоторые вещи ускользают (некоторые не-опорные компоненты, которые все еще используются, наиболее вероятно), но улучшение поражает.

Заключение. До этой версии Backbone мы не очень хорошо работали с прослушивателями в самой Backbone. Слушатели DOM обрабатывались отлично, но не между моделями/представлениями/коллекциями. Многие связанные обратные вызовы были привязаны к Backbone Views, которые, как я полагаю, не позволили сборщику мусора освободить узлы DOM. Многие опрокидывающие события/обратные вызовы в рамках Backbone (а не только привязка к DOM) создают множество разрывающих узлов DOM, которые не могут быть собраны в мусор.

Если это не достаточно хорошая причина для обновления Backbone, я не знаю, что это такое: o

Ответ 3

Рост числа узлов DOM является основным признаком утечки памяти (обычно в коде нашей страницы). Поэтому вам нужно бороться с этим. Стандартная методика описана в ответе на этот вопрос.

В этом снимке слишком много деталей. И эта схема 3 снимков помогает отфильтровать не интересную часть моментального снимка и показывает только кандидатов на утечку.

Пожалуйста, убедитесь, что вы используете последнюю версию хром, например, Chrome Canary. Это должен быть свежий экземпляр с одной вкладкой без расширений. Было бы неплохо иметь никаких сообщений об ошибках в консоли, без точек останова и не останавливаться на исключении, потому что все это может повлиять на страницу и, как результат, содержимое моментального снимка.

Этот пост может быть вам интересен.

Ответ 4

Я нашел другой способ избежать jank

render: function() {
  this.$el.empty();
  var container = document.createDocumentFragment();
  // render each subview, appending to our root element
  _.each(this._views, function(subview) {
     container.appendChild(subview.render().el)
  });
  this.$el.append(container);
}

см. здесь http://ozkatz.github.io/avoiding-common-backbonejs-pitfalls.html