Как и обещал, выкладываю презенташку и кучу полезной инфы для самостоятельного изучения🧐


Дефолтные стили хрома:
https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/resources/html.css

Глубокая статья о процессе композиции от команды разработчиков Хрома:
https://sking7.github.io/articles/48074838.html

Статья из документации Хрома о работе компонента Chrome Compositor:
https://chromium.googlesource.com/chromium/src/+/master/docs/how_cc_works.md

Ооочень много информации о рендеринге в Хроме - отсюда рекомендую почитать Compositor Property Trees и Life of a Pixel:
https://www.chromium.org/developers/design-documents/chromium-graphics/

Как смотреть слои в DevTools:
https://dermeck.github.io/composite-layers/#:~:text=Show%20Layer%20Borders%20in%20Rendering,the%20layers%20on%20the%20screen.

Гайд по выделению анимации в отдельный слой:
https://web.dev/articles/animations-guide?hl=en
https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count?hl=en

Немного общих статей про CRP
https://web.dev/learn/performance/understanding-the-critical-path?hl=en
https://alistapart.com/article/from-url-to-interactive/

Этап Paint
https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/

Layout Tree
https://web.dev/articles/critical-rendering-path/render-tree-construction?hl=en

А также полная версия презентации✨

Новая рубрика на канале: буллинг React-разработчиков

Начинающий фронтенд-разработчик скучает на утреннем дейлике