Существуют ли какие-либо оптимизации в браузере для бесконечно запущенных CSS-анимаций за экраном (бесконечные анимации, которые применяются к элементам, которые присутствуют / отображаются в документе, но не отображаются на определенном экраневремя)?
Для более прямого обсуждения я буду ссылаться на CSS-анимации, которые включают только композицию: использование только преобразований и / или непрозрачности.
Если у нас есть CSS-анимация , которая имеет animation-timing-function: infinite;, , как она обрабатывается, если анимированный элемент фактически не отображается на экране / в поле зрения ?
Существует несколько известных сценариев, касающихся анимации, которые не имеют отношения к этому случаю использования:
- Анимация будет приостановлена, если вкладка браузера будет перемещена в фоновый режим. MDN
- Анимация игнорируется, если элемент удален из документа, с чем-то вроде
display: none; (не удается найти источник цитируемого источника);
Если элемент просто «за пределами прокрутки», и пользователь может получить к нему доступ в любое время, в то время как элемент находится за пределами экрана:
Анимацияработает как обычно, и имеет тот же расход, независимо от того, видим элемент или нет?
Работает ли он как обычно, но, поскольку он не окрашен, сам процесс становится менее дорогим?- имеет больше смысла.
Анимация полностью приостановлена?- предположил бы, что нет, так как браузер должен знать, каким был бы «текущий прогресс» в тот момент, когда элемент должен быть перерисован заново.
Или есть какие-либо другие в браузерепроцессы, которые оптимизируют это, когда эти условия будут выполнены?
Любой задокументированный ответ или любое перенаправление на какой-либо ресурс, который может пролить некоторый свет на этот вопрос, будет принята с благодарностью.
Это обсуждение будет иметь отношение к определению того, стоит ли учитывать ручное удаление бесконечных анимаций (для элементов, находящихся за пределами экрана), для достижения лучшей производительности.