我在使用Firefox时遇到了一些小问题:当dom上有大型模糊元素显示时,一切都会变得非常缓慢。
我注意到了几件事:
- 在某些简略配置上,回流事件甚至会冻结标签页
- 在高端GPU上,FPS稍微好一些,所以我猜测这个滤镜是GPU激活的
- Chrome和Safari运行非常顺畅
- 即使没有动画,CPU使用率也非常高,任何交互都很卡顿
好的,请展示代码
确保点击扩展窗口,以便所有图像都能显示出来,否则动画将保持平稳。
我正在创建一个带有填充动画的回流事件,以故意加剧浏览器的压力,但整体交互会变得很卡顿。
在像CodePen这样更复杂的网页上,FPS要差得多:https://codepen.io/creaforge/pen/mLPqNg,即使不触发变换编辑,这支笔也显示了一些性能问题(尝试选择代码块)。
div {
background-color: #eaeaea;
transition: all .5s;
padding: 20px;
}
div:hover {
padding-bottom: 100px;
}
img {
filter: blur(40px);
}
<div>Hover me --> slow animation</div><br/>
<img src="http://www.placecage.com/c/200/600">
<img src="http://www.placecage.com/c/200/610">
<img src="http://www.placecage.com/c/200/620">
<img src="http://www.placecage.com/c/200/630">
<img src="http://www.placecage.com/c/200/640">