Удаление прослушивателей событий, jquery, утечки памяти и производительности

Question

В моем веб-приложении сервлет создает динамическую страницу html в зависимости от бизнес-правил. У меня есть контейнер div, который всегда сохраняет и обновляет его содержимое в зависимости от сценария. предположим, сначала мы добавляем кнопку и связываем слушателя с ней. Впоследствии мы не нуждаемся в этой кнопке и, например, заменим содержимое контейнеров текстовым полем.

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

Плохой дизайн, настройка элементов с помощью метода html? Лучше ли генерировать элементы с помощью dom или element, создавая методы jquery?

текущая структура:

<div id="mainContent"> 
</div> 

Когда мы добавим кнопку:

$('#mainContent').html('<div id=button01></div><script>$('#button01').on('click', function() { //..; 

Затем, предположим, что мы не нужны кнопки, а затем добавьте текстовое поле, например.

В реальном приложении элементы управления генерируются путем разбора массива json и . Основное содержимое содержит необходимые элементы управления.

Что если мне не нужно, например, button01, я должен позвонить button01.off («нажмите»

Это лучше удаление слушателя и кнопки itselft вручную, например, из дома?

Ps. Я использую JQuery 2.x

Answer 1

Как насчет слушателей событий, я должен undind их ради предотвращения утечки памяти и производительности?

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

Если вы можете вызвать утечки, добавьте обработчики событий или .data() элементов с jQuery, но затем используйте регулярные прямые манипуляции с DOM для удаления или замены элементов. Это может привести к небольшим утечкам памяти, связанным с обработчиками событий, и может вызвать утечку памяти, пропорциональную размеру того, что вы использовали с .data() по этим элементам. В то время как лучше не иметь этих утечек, утечки находятся только на протяжении текущей страницы, находящейся на экране, поэтому, если вы регулярно делаете это сотни тысяч раз в течение всей жизни страницы или не храните гигантские вещи в ссылках .data(), то утечки, вероятно, достаточно малы, чтобы быть несущественными. Вы все равно должны стараться делать все правильно, чтобы избежать утечек, но об этом обычно не о чем беспокоиться. Единственные случаи, которые я обнаружил там, где вам действительно нужно беспокоиться об этих утечках, - это когда у вас действительно длинная страница (например, возможно, часы использования) с множеством повторяющихся манипуляций с DOM, такими как одностраничное приложение или длительная работа слайд-шоу.

Плохой дизайн, установка элементов с помощью метода html? Лучше ли генерировать элементы с dom или элементом, создающим методы jquery?

Это прекрасно использовать метод .html() заменить некоторый HTML, если это является самым простым и наиболее целесообразным способом определить, что вы хотите сделать, и вы хотите, чтобы изменить это все дерево.

Одно время, когда это не очень хорошая производительность для использования .html() - это когда вы хотите изменить/заменить один элемент в большом дереве HTML, вы не должны заменять все дерево .html(), но должны скорее нацелиться только на один элемент вы хотите изменить. Это связано с тем, что браузер обойдется вам бросить целую кучу элементов DOM, а затем заменить их на все новые элементы HTML, когда все, что вы пытаетесь сделать, это изменить один элемент в этом разделе иерархии.

Что если мне не нужно, например, button01, я должен позвонить button01.off («нажмите»

Это лучше удаление слушателя и кнопку itselft вручную например, из йот ?

Если вы удаляете DOM элемент, например, кнопки с методами Jquery (как JQuery-х .remove() и не сохраняя никаких ссылок на него, вам не придется вручную удалить обработчик событий. Они очищаются для вас по jQuery.