Что на картинке? Монитор центра управления полетами на Байконуре?🚀
Упс, это вкладка 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😜