🎮 Изменение свойств DOM и их влияние на Repainting и Layouting

Когда изменяется DOM, браузер перерасчитывает его внешний вид и положение на экране. Этот процесс делится на два этапа:

- Layout (или reflow) – перерасчёт геометрии элементов (размеры, положение, отступы и т.д.).
- Repainting – перерисовка внешнего вида элементов (цвет, тень, шрифт и т.д.) без изменения их размеров или положения.

➕ 1. Layout (Reflow)
Что вызывает Layout? Изменения, влияющие на размеры, положение или геометрию элементов. После Layout, браузеру необходимо заново отрисовать элемент (Repainting).

Примеры действий:

// Изменение размеров элемента:
element.style.width = "200px";
element.style.height = "100px";

// Изменение положения (например, top, left, margin, padding):
element.style.margin = "20px";
element.style.top = "50px";

// Добавление или удаление DOM-элементов:
const newDiv = document.createElement("div");
document.body.appendChild(newDiv);

// Изменение шрифта, которое изменяет размеры текста:
element.style.fontSize = "24px";

// Изменение значения display или position:
element.style.display = "block";
element.style.position = "absolute";

Оптимизация: Layout – затратный процесс, поэтому избегайте его частого вызова. Например, изменения в цикле следует группировать через requestAnimationFrame.

➕ 2. Repainting
Что вызывает Repainting? Изменения внешнего вида элемента, которые не влияют на его размеры или положение.

Примеры действий:

// Изменение цвета фона:
element.style.backgroundColor = "blue";

// Изменение цвета текста:
element.style.color = "red";

// Изменение тени:
element.style.boxShadow = "5px 5px 10px gray";

// Прозрачность:
element.style.opacity = "0.5";

Оптимизация: Хотя Repainting менее затратный, чем Layout, частые изменения могут вызывать визуальные задержки. Используйте classList для массового применения стилей.

✔️ Советы для оптимизации производительности
Избегайте частого обращения к Layout-метрикам. Методы, такие как offsetWidth, offsetHeight, getComputedStyle и подобные, вызывают синхронный Layout. Если нужно получить несколько значений, лучше сохранять их в переменные.

// Пример (неоптимально):
const width = element.offsetWidth;
const height = element.offsetHeight;

// Пример (оптимально):
const { offsetWidth, offsetHeight } = element;

Используйте классы вместо инлайн-стилей. Вместо применения стилей по одному:

element.style.color = "white";
element.style.backgroundColor = "black";

// Применяйте класс:
element.classList.add("dark-theme");

Используйте transform и opacity для анимаций. Эти свойства не вызывают Layout или Repainting. Браузер оптимизирует их через GPU:

element.style.transform = "translateX(100px)";
element.style.opacity = "0.5";

Группируйте изменения через requestAnimationFrame. Это поможет избежать промежуточных пересчётов:

requestAnimationFrame(() => {
  element.style.width = "300px";
  element.style.height = "150px";
});

#browser #repainting #reflow