Как браузер собирает страницу

от текста к пикселям

Что это

Браузер получает текст и превращает его в картинку. Между этими двумя состояниями — четыре шага, и знать их нужно по практической причине: ошибки на каждом шаге выглядят по-разному, и по виду поломки сразу понятно, где искать.

Как выглядит в коде

Четыре шага

1. Разбор. Текст HTML превращается в дерево элементов — DOM. Именно это дерево видно во вкладке «Элементы» и именно его меняет JavaScript. Важно: браузер чинит сломанную разметку сам, по своим правилам, — поэтому незакрытый тег не даёт ошибки, а даёт неожиданное дерево.

2. Стили. Для каждого элемента собираются все подходящие правила CSS и вычисляется итоговое значение каждого свойства (статья 8.3).

3. Раскладка. Браузер считает, где и какого размера будет каждый элемент. Здесь появляются все эффекты вида «почему блок на всю ширину» и «почему элементы налезли».

4. Отрисовка. Готовые прямоугольники превращаются в пиксели.

Где какая ошибка

Первая строка — самая коварная. Браузер не ругается на сломанный HTML, он молча достраивает дерево по-своему. Поэтому «не работает селектор» часто означает «элемент оказался не там, где ты думаешь».

Страница рисуется не один раз

Шаги 2–4 повторяются каждый раз, когда что-то меняется: JavaScript изменил текст, пользователь открыл меню, пришли новые данные. Отсюда два слова, которые встречаются в разговорах про скорость:

• reflow (перерасчёт раскладки) — дорого, затрагивает соседей;
• repaint (перерисовка) — дешевле, меняются только пиксели.

Для чтения кода достаточно знать: изменение размеров и позиций дороже изменения цвета.

Как сказать ИИ

Элемент с классом .card не видно на странице. Он есть в DOM
или его там нет? Как это проверить, не угадывая?

Вопрос поставлен правильно: он разделяет «не создался» и «создался, но невидим» — две совершенно разные причины.

Вот HTML и CSS. На каком шаге — разбор, стили или раскладка —
происходит то, что я вижу: блоки идут друг под другом,
хотя я ожидал в ряд?

Проверь этот HTML на незакрытые и неправильно вложенные теги.
Только список проблем, без исправлений.

На что смотреть

Элемент есть в коде, но не в DOM. Значит, разметка сломана и браузер перестроил дерево. Частая причина — <div> внутри <p> или незакрытый тег.

Стиль не применился. Три причины по убыванию частоты: селектор не совпадает, правило перебито другим (статья 8.3), опечатка в свойстве. Четвёртая, редкая: файл стилей вообще не загрузился — это видно во вкладке «Сеть» (статья 8.4).

Всё поехало от одного изменения. Признак того, что раскладка держалась на случайности — например, на точной ширине в пикселях.

Страница дёргается. Что-то меняет размеры на каждом кадре. Искать JavaScript, который пишет в стили в цикле или в обработчике прокрутки.

Шпаргалка