Грамота от Кузьмича

Что на картинке? Монитор центра управления полетами на Байконуре?🚀 Упс, это вкладка Performance в Chrome DevTools. По сути - история процесса построения и отрисовки страницы. Сегодня заглянем во внутрянку как браузер превращает прилетевший текст HTML, CSS, JS - в сочную картинку. Упрощенно, шаги такие: 1. сборка DOM-дерева на базе HTML - строим объекты на базе каждого узла. 2. сборка CSSOM-дерева на базе CSS - строим объекты на базе каждого правила. 3. Render Tree - сборка дерева рендеринга. По сути это применение стилей к объектам DOM, т.е. объединение DOM + CSSOM 4. Layout - расчет размеров элементов, их расположения и взаимного размещения. 5. Paint - подготовка и прорисовка моделей элементов в растровые картинки. 6. Compositing - группировка полученных картинок в слои и отображение этих слоев на экран. И еще - мы взаимодействуем со страницей, а не просто любуемся. Поэтому тык на любую кнопку может привести к перерисовке страницы и повторению всех шагов выше. Так что тыкайте кнопки экономно, берегите ваш CPU😜