Вручную ли сборка мусора элементов DOM в jquery вообще повышает производительность браузера?

Question

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

$('some_element').fadeOut(1000, function(el){
   $(el).remove(); // <-- does this make sense at all?
});

Answer 1

Этот код:

$('some_element').remove();

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

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

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

Но в 99% случаев это не будет иметь никакого значения, поскольку память, используемая одним элементом DOM, тривиальна по сравнению с общей памятью, используемой веб-страницей.Все, что находится на веб-странице, будет освобождено, когда пользователь все равно перейдет на другую веб-страницу.

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

Answer 2

Да, это имеет смысл.

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

Если ваше намерение состоит в исчезновенииelement и удалите элемент (возможно, больше не нужен или удалите помехи DOM), затем используйте код в вашем примере.

Answer 3

fadeOut удаляет , а не удаляет элемент. Все это, как ни странно, затухает. Это делает анимацию, которая уменьшает стиль opacity до 0. Браузер не отображает элемент, но он все еще присутствует в памяти. Так что да, выполнение remove , вероятно, сэкономит немного памяти, потому что неприкрепленные, не имеющие ссылки элементы DOM будут очищены сборщиком мусора.

С учетом вышесказанного вам, вероятно, не нужно беспокоиться, если у вас нет очень большого количества элементов на странице или если у вас есть страница, которая будет открываться долгое время без перезагрузки страницы (например, веб-приложение AJAXy) ).

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

---

Обратите внимание, что если вы действительно хотите оптимизировать, вы также можете сделать это с помощью обратного вызова:

$(this).remove();

Создание объекта jQuery с использованием элемента DOM, а не строки селектора, в раз * в 1020 * раз быстрее.

Answer 4

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

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