Производительный рендеринг в браузере, Глеб Михеев

Мы поговорим о конвейере, как он рендерит, как вносятся изменения на страницу, что такое Reflow, Forced Reflow, как его избегать, как управлять слоями, как оптимизировать рендеринг через вынесение в отдельные слои, и какие еще причины могут вызвать лаги при отрисовке.
Это позволит понять, как браузер все это делает, и начать более осознанно подходит при поиске причин плохой производительности, а также не допускать их в дальнейшем.
Каждый разработчик должен знать, как работает его инструменты, чтобы не заниматься оккультизмом и танцев с бубнами вокруг проблем. Особенно с производительностью.

На практике, не смотря на то, что это не является исключительно тайным знанием, очень мало ребят знают как это работает. И этим докладом я хочу дать разборчивости и показать, что там все просто и доступно, а самое главное - знать это очень полезно.

00:00 - Введение
00:40 - Про рендеринг
04:28 - Reflow
08:04 - Про изменения: FPS и Time Budget
10:28 - Forced Reflow
14:31 - Менеджмент слоев
17:14 - Что еще может испортить нам производительность?
24:20 - Полезные и вредные советы
27:59 - Выводы

[rettimo]

Высота, отступы, все дела... Доклад величайшего уровня

[ПавелСвенин-ъв]

Спасибо большое. Все больше понимаешь как работает браузер.

[arseniy_viktorovich]

Проблема с интегрированными видюхами очень актуальна была на маках много лет, но кажется наконец то пофиксили начиная с MacOS 14, наконец то нормально работают анимации свайпа внутри самой ОС, да и в браузерах тоже небо и земля. Раньше приходилось принудительно включать дискретку чтобы просто не лагало.

[radislaw]

Как то все сумбурно. Вчера я вышел... три ходки ибать... поехал на арену... ибаааать... в казино поехали 250 штук подняли... СЕРЬЕЗНО? Да, серьезно. Ты не верил? 😂

[АлибекЖулмурзин]

Хм, а вкладки layers в новом Хроме нет...