Ответ 1
В вашем примере (addClass) это зависит от того, что находится в добавляемом вами классе. Добавление самого класса только изменяет атрибут на целевом node.
- Некоторые изменения вызовут repaint, то есть при изменении цвета, bgcolor и т.д. Только те элементы, к которым применяется новый CSS, будут повторно отображены.
- Некоторые изменения вызовут reflow, то есть когда пространство видимое, занятое элементами или их содержимым, изменит размеры или позицию. В зависимости от их собственных свойств и свойств родительских и дочерних объектов, а также свойств родительских и дочерних элементов и т.д. И т.д. Перепланирование будет влиять на большее количество элементов в дереве документов.
Браузеры достаточно умны, чтобы изменять только элементы, требующие повторной рендеринга. Метод минимизации количества повторных рендерингов состоит в том, чтобы установить элемент position: absolute или display: none, чтобы временно удалить его из потока документов, внести изменения, а затем снова вставить. Это особенно важно, если, например, вы делаете какой-то элемент скольжения вниз. Если элемент находится в потоке и в начале дерева DOM, каждый пиксель, который он растягивает, вызовет повторную визуализацию.
Ради удовольствия, сделайте простую аналогию с бумагой на столе, в этом примере с вставкой элементов. Стол - это окно вашего браузера, □= бумага, _= пустое пространство. Вы хотите поставить другой лист в верхнем левом положении. Это начальная ситуация:
□ □ □ □ □ □ □ □ _ _ _ _
После того, как вы положите новый лист на стол: (■ = новый, ▧ = перемещен)
■ □ □ □ ▧ □ □ □ ▧ _ _ _
Если вторая строка была одним длинным рулоном бумаги (= полный div), вся строка будет двигаться:
■ □ □ □ ▧ _ _ _ ▧▧▧▧▧▧▧
Если вы вставили лист в третью строку, переполнение не произойдет.
Примечание: Это теоретическое объяснение. Его эффективность будет зависеть от браузера. Источник: Высокопроизводительный Javascript, "Перепроверяет и переплачивает", стр .70.
