JQuery DOM манипуляции - сравнение производительности?

Question

Я изучаю манипуляции с DOM с помощью jQuery и хочу понять лучшие рекомендации по производительности браузера.

Допустим, у меня есть два элемента DOM (div, p, ol и т. Д.), И я хочу, чтобы пользователь видел только первыйэлемент, а затем только увидеть второй элемент.

Я мог бы:

1. Использовать replace ()
2. remove () первый элемент и добавить () второй элемент
3. hide ()первый элемент и show () второй элемент

Какая разница в производительности между:

• 1 против 2
• 2 против 3
• 1 против 3

Существуют ли дополнительные соображения относительно производительности, если элементы имеют разные типы?Или если элементы являются кнопками или полями формы?

Answer 1

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

Замена - это, по сути, удаление, а не добавление, поэтому вышеизложенное применимо.

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

Тип элементов, к которым вы применяете эти методы, также не должен приводить к изменениям в приведенном выше.

В заключение используйте .show() и .hide() для лучшей производительности.

Answer 2

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