Опиши процесс отображения страницы в браузере

1. Парсинг HTML: Браузер загружает HTML и строит DOM (Document Object Model) — древовидную структуру элементов.
2. Парсинг CSS: Загружает CSS, формирует CSSOM (CSS Object Model) — дерево стилей.
3. Создание Render Tree: Объединяет DOM и CSSOM, исключая невидимые элементы (например, display: none).
4. Layout (Reflow): Вычисляет размеры и позиции элементов на странице.
5. Paint: Отрисовывает пиксели (текст, цвета, изображения).
6. Composite: Собирает слои (если есть GPU-ускорение) и выводит на экран.

Оптимизация:

• Минимизируйте пересчеты (избегайте offsetWidth в циклах).
• Используйте transform и opacity для анимаций (они не триггерят Layout/Paint).

// Плохо: вызывает Layout при каждой итерации  
for (let i = 0; i < 100; i++) {  
  element.style.width = `${i}px`;  
}