🐛 Типичные ошибки в понимании браузерного пайплайна

⚡ Топ-3 ошибки

  • Думать, что DOM = картинка на экране (это дерево узлов).
  • Путать reflow (геометрия) и repaint (только вид).
  • Считать, что браузер всегда перерисовывает страницу с нуля.

❌ Ошибка 1: DOM = страница

DOM - это внутренняя модель документа, а не то, что вы видите на экране. Например, элемент с display:none есть в DOM, но в render tree и на экране его нет.

DOM (есть все 3 узла): A, B, C
A C
На экране (B с display:none не отрисован)
<div>A</div>
<div class="b">B</div>  <!-- в DOM есть, на экране нет -->
<div>C</div>
.b { display: none; }

✅ Как лучше

Представляйте DOM как дерево узлов, из которого браузер потом строит render tree и визуальный результат. DOM может содержать узлы, которых на экране нет.

❌ Ошибка 2: repaint и reflow - одно и то же

Reflow пересчитывает геометрию (дорого), repaint перерисовывает пиксели (дёшево). Это разные шаги. Сравни:

меняем width → сдвигаются соседи → reflow
меняем color → ничего не двигается → repaint
.box { width: 400px; }   /* reflow */
.box { color: crimson; } /* repaint */

✅ Как лучше

Проверяйте, меняется ли размер/положение элемента или только его внешний вид.

❌ Ошибка 3: браузер всегда рисует страницу «с нуля»

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

✅ Как лучше

Думайте о шаге изменения: текст, цвет, размер или видимость - от этого зависит внутренний процесс.