Comments 8
нужно анимировать только определенные CSS-свойства: transform, opacity, filter, backdrop-filter
Добавлю еще такой момент, что не все фильтры одинаковые. И помимо самого факта использования GPU есть еще вопрос алгоритма рендеринга. Алгоритмы для blur или drop-shadow с большим радиусом - очень затратные. С ними можно убить производительность на корню и все остальное станет не важно.
Вообще никак, отключить к чертовой бабушке!
Важная тема к слову)) Но было время до того как трансформ появился и все такое)) Приходилось и на офсетах анимировать)
Круто. Спасибо!
А еще ругаются что DOM тяжелый и на нем нельзя делать оптимизированные интерфейсы: оказывается можно, просто нужно вникать как оно работает.
По возможности нужно анимировать только определенные CSS-свойства: transform, opacity, filter, backdrop-filter.
Хмм, а у меня отпечаталось в памяти что всё-что связано не с позицией и не с размерами - анимировать дорого, т.е. всякие прозрачности, тени, фильтры, заливки, градиенты.
Спасибо автору за материал! Многие анимации, действительно, можно сейчас реализовать на CSS, и продумывая их заранее, оптимизировать. Но когда в проекте их много или они более комплексные, есть ли смысл переложить оптимизацию на специализированные JS библиотеки, например GreenSock?
Насколько я знаю, GreenShock/GSAP это больше про разные сложные анимации, а не про оптимизации. Статья в первую очередь о том, что даже за простой CSS-анимацией скрывается сложный механизм, который может привести к проблемам. И понимание того, как это работает, поможет этих проблем избежать: банально поднять анимацию по z-index или перенести в другое место страницы, чтобы не создавались отдельные слои
Фигасе какие люди. Как сейчас помню оптимизацию микроволновки через Lab.
Анимация в браузерах и как с ней работать