Что происходит, когда в DOM происходит установка и чтение значения

При установке значения в DOM браузер обновляет виртуальное DOM дерево, затем выполняет реконсиляцию (diffing) для определения минимальных изменений, и только после этого обновляет реальный DOM. Это оптимизирует производительность.

При чтении значения из DOM браузер вынужден синхронно вычислять текущее состояние (например, offsetHeight или getComputedStyle), что может вызвать принудительный reflow — пересчёт макета страницы. Это дорогая операция, поэтому чтение DOM стоит минимизировать.

Пример:

// Плохо: вызывает multiple reflows
element.style.width = '100px';
const width1 = element.offsetWidth;
element.style.height = '200px';
const height1 = element.offsetHeight;

// Лучше: batch чтений/записей
element.style.width = '100px';
element.style.height = '200px';
const width2 = element.offsetWidth;
const height2 = element.offsetHeight;