Я'вэ создал очень простой тестовый случай, который создает костяк вид, присоединяет обработчик к событию, и создает экземпляр пользовательского класса. Я считаю, что, нажав и"Удалить и" кнопка в этом образце, все будет почищено и не должно быть никаких утечек памяти.
В jsfiddle кода-это здесь:
// scope everything to a function
function main() {
function MyWrapper() {
this.element = null;
}
MyWrapper.prototype.set = function(elem) {
this.element = elem;
}
MyWrapper.prototype.get = function() {
return this.element;
}
var MyView = Backbone.View.extend({
tagName : "div",
id : "view",
events : {
"click #button" : "onButton",
},
initialize : function(options) {
// done for demo purposes only, should be using templates
this.html_text = "<input type='text' id='textbox' /><button id='button'>Remove</button>";
this.listenTo(this,"all",function(){console.log("Event: "+arguments[0]);});
},
render : function() {
this.$el.html(this.html_text);
this.wrapper = new MyWrapper();
this.wrapper.set(this.$("#textbox"));
this.wrapper.get().val("placeholder");
return this;
},
onButton : function() {
// assume this gets .remove() called on subviews (if they existed)
this.trigger("cleanup");
this.remove();
}
});
var view = new MyView();
$("#content").append(view.render().el);
}
main();
Однако, мне непонятно, как использовать Гугл Хром'ы профайлер, чтобы проверить, что это, собственно, дело. Есть миллион вещей, которые появляются на снимок профилировщика кучи, и я понятия не имею, как расшифровать то, что's Хороший/плохой. Учебники я'вэ видел на нем до сих пор либо просто скажи мне, чтобы "использовать профилировщик снимка" или дать мне очень подробный манифест о том, как всю профилировщик работает. Можно ли просто использовать профилировщик в качестве инструмента, или мне действительно нужно понять, как все это было сделано?
Редактировать: учебники, такие как эти:
Представитель некоторым из более прочного материала там, от того, что я'вэ видел. Однако, помимо внедрения концепции 3 методика моментального снимка, я считаю, они предлагают очень мало с точки зрения практических знаний (для новичка вроде меня). В 'через инструменты разработчика' учебник не't работа через реальный пример, поэтому его расплывчатым и общим концептуальным описанием вещи'т слишком полезно. Что касается 'в Gmail' пример:
Итак, вы обнаружили утечку. Что теперь?
изучить пути сохранения потерянных объектов в нижней половине профили панель
если место размещения не может быть легко выведено (т. е. событие слушателей):
инструмент конструктора сохраняя объект через JS консоли, чтобы сохранить трассировку стека для выделения
с помощью закрытия? Включите соответствующую существующий флаг (т. е. аналоги.событий.Слушателя.ENABLE_MONITORING) установить свойство creationStack во время строительства
Меня гораздо больше смущает после прочтения, что не меньше. И, опять же, это's просто говорит мне не, не как делать их. С моей точки зрения, вся информация там либо слишком расплывчато, либо будет иметь смысл только тому, кто уже понял суть процесса.
Некоторые из этих более конкретные вопросы были подняты в @Джонатан Naguin'ы ответ ниже.
Хороший рабочий процесс, чтобы найти утечки памяти три снимка метод, впервые использован Лореена Ли и в Gmail команды, чтобы решить некоторые из своих проблем с памятью. Действия, в общем:
На вашем примере, я адаптировал код, чтобы показать этот процесс (его можно найти [здесь][1]), задерживающие создание Магистральной до события click от кнопки "Пуск". Сейчас:
Теперь вы готовы, чтобы найти утечки памяти!
Вы заметите узлов несколько разных цветов. Красные узлы не имеют прямых ссылок с помощью JavaScript, но живы, потому что они являются частью отдельно стоящего дерева DOM. Там может быть узел в дереве ссылки из JavaScript (возможно, как закрытие или переменная), но это, кстати, предупреждение всем дереве дом от мусора.
Однако желтый узлы имеют прямые ссылки с помощью JavaScript. Посмотрите на желтый узлов в одной отдельно стоящее дерево DOM, чтобы найти ссылки из кода JavaScript. Там должна быть цепочка свойств, ведущими из окна дом на элемент.
В частности, вы можете увидеть HTML-элемента div помечены как красные. Если вы разверните элемент вы увидите, что ссылается на "кэш" и функция.
Выберите строку и в консоли типа $0, вы будете видеть актуальные функции и место:
>$0
function cache( key, value ) {
// Use (key + " ") to avoid collision with native prototype properties (see Issue #157)
if ( keys.push( key += " " ) > Expr.cacheLength ) {
// Only keep the most recent entries
delete cache[ keys.shift() ];
}
return (cache[ key ] = value);
} jquery-2.0.2.js:1166
Это где ваш элемент, на который осуществляется ссылка. К сожалению, существует не так много вы можете сделать, это внутренний механизм из jQuery. Но, только в целях тестирования, зайдите в функции и изменения способа:
function cache( key, value ) {
return value;
}
Теперь, если вы повторите процесс, вы не увидите Красный Узел :)
Документация:
Здесь'с наконечником на память профилирования jsfiddle: используйте следующий URL-адрес, чтобы изолировать ваш jsfiddle результате, он удаляет все jsfiddle базы и загружает только ваш результат.
Я никогда не был в состоянии выяснить, как использовать таймлайн и профилировщик для отслеживания утечек памяти, пока не прочитал следующую документацию. После прочтения раздела, озаглавленного 'выделение объекта трекер' я был в состоянии использовать 'рекорд кучи выделений' инструмент, а также отслеживать некоторые отдельно стоящее дом узлов.
Я решил проблему путем переключения с jQuery привязки события, используя основу делегирования событий. Это's в моем понимании, что новые версии Магистральная будет автоматически отменить привязку событий для вас, если вы называете вид.удалить()`. Выполнить некоторые Демы сами, они настроены с утечками памяти для вас, чтобы определить. Не стесняйтесь задавать здесь вопросы, если вы до сих пор не'т получить его после изучения этой документации.
https://developers.google.com/chrome-developer-tools/docs/javascript-memory-profiling
В основном нужно смотреть на количество объектов внутри вашего снимка кучи. Если число объектов возрастает между двумя снимками, и вы'вэ выбрасывать предметы, то у вас есть утечка памяти. Мой совет-искать обработчиков событий в коде, которые не отрываются.
Вы также можете посмотреть на вкладке временная шкала в инструменты разработчика. Запишите использования вашего приложения и сохранить глаз на узел DOM и событий считать слушателя.
Если диаграмма памяти действительно может указывать на утечку памяти, то вы можете использовать профайлер, чтобы выяснить, что течет.
Вы также можете прочитать :
http://addyosmani.com/blog/taming-the-unicorn-easing-javascript-memory-profiling-in-devtools/
Это объясняет использование инструментов разработчика Chrome и дает пошаговые советы о том, как подтвердить и найти утечку памяти с помощью сравнения снимков куча и разных представлений снимков гепатит доступен.
Я советую сделать снимок кучи, они'вновь отлично подходит для обнаружения утечек памяти, хром отлично работает, снимки.
В моем исследовательском проекте для моей степени я был создание интерактивного веб-приложения, которые должны генерировать много данных в 'слоев', многие из этих слоев будет 'удаленные' в пользовательском интерфейсе, но почему-то в памяти было'т быть освобождена, используя моментальный инструмент, который я смог определить, что jQuery был держать ссылку на объект (источник был, когда я пытался вызвать .нагрузки()
событие, которое сохранил ссылку, несмотря на выход из контекста). Имея эту информацию под рукой в одиночку спас мой проект, это'ы очень полезный инструмент, когда вы're, используя других людей'ы и библиотеки, и у вас есть эта проблема устаревших ссылок мешает сборщику мусора делать свою работу.
Редактировать: Это's также полезно заранее планировать, какие действия вы'ре собирается выполнять, чтобы свести к минимуму время, проведенное снимки, предполагают, что может быть причиной проблемы и испытания в каждом случае, делая снимки до и после.