⚠️ Reflow и Repaint убивают fps. Что делать?

Reflow и Repaint — главные враги плавной анимации. Reflow пересчитывает геометрию элементов и происходит при изменении ширины, высоты, паддингов, display none. Repaint перерисовывает пиксели: цвет, фон, тени, visibility hidden. Оба процесса грузят главный поток браузера и убивают 60 fps. Правильная анимация работает на GPU через композитинг — это transform (translate, scale, rotate) и opacity. Они не вызывают Reflow и Repaint, анимация идёт на видеокарте. На собеседовании Middle и Senior важно знать разницу. Полный разбор производительности — в большом видео по ссылке под этим шортсом. #reflow #repaint #cssanimation #gpu #frontend #frontendinterview #middle #senior #techinterview #codinginterview

Иконка канала PurpleSchool
466 подписчиков
12+
6 просмотров
2 месяца назад
12+
6 просмотров
2 месяца назад

Reflow и Repaint — главные враги плавной анимации. Reflow пересчитывает геометрию элементов и происходит при изменении ширины, высоты, паддингов, display none. Repaint перерисовывает пиксели: цвет, фон, тени, visibility hidden. Оба процесса грузят главный поток браузера и убивают 60 fps. Правильная анимация работает на GPU через композитинг — это transform (translate, scale, rotate) и opacity. Они не вызывают Reflow и Repaint, анимация идёт на видеокарте. На собеседовании Middle и Senior важно знать разницу. Полный разбор производительности — в большом видео по ссылке под этим шортсом. #reflow #repaint #cssanimation #gpu #frontend #frontendinterview #middle #senior #techinterview #codinginterview

, чтобы оставлять комментарии