2017-08-29 28 views
3

我有一个网站,用CSS过渡/动画使用animate.css库很大程度上依赖 - >https://www.frasesparavida.com.br我应该停止CSS动画,当他们在外面视

我知道浏览器现在做大量的工作优化,主要使用GPU来CSS动画避免CPU的瓶颈。所以我想知道:我应该手动停止(使用JS)我的CSS动画时,当我检测到我的动画是在视口之外或浏览器将自动停止处理这些动画?

我的大部分动画都是在某些时间间隔内向元素添加/删除类如fadeInUp。所以我的问题是这样的:当元素位于视口之外时,添加这些类(导致动画)会导致浏览器产生任何有意义的开销?当浏览器不可见时,浏览器会自动“暂停”这些动画吗?

回答

0

从我看到的,我相信即使不可见,动画仍然运行。所以,如果你想暂停它们而不可见时,这取决于你,我可以考虑暂停它们的唯一原因是用于较慢的计算机和操作系统,但这些动画对于大多数人来说似乎并不太密集。如果你这样做只是想到,如果你这样做,它是更多的JS浏览器运行。

+0

我不认为这是完全正确的。几个星期前,我创建了一个非常沉重/密集的CSS动画,以检查当我向下滚动到一些不再显示动画的位置时,以及在CTRL + SHIFT + DEL(我的WINDOWS)中看到CPU的下降时会发生什么(从70%到55%)。如果我再次滚动,它会再次上升到70%左右。但是这只发生在Firefox上,Chrome浏览器出现了一个小小的下降,但这并不太确定。 – Samul

+0

只是一个提醒:与JS动画我没有看到任何CPU使用率的差异,如果我向下滚动动画!我认为大多数浏览器都会继续运行所有JS代码(无论它是否为动画),无论它们是否在视口中使用。但是,这种行为看起来有很大的不同。但我正在努力寻找一些有关这方面的文件...... – Samul