动画效果在缺少硬件加速支持的情况下反应缓慢,例如手机客户端。
- 特效应该只在确实能改善用户体验时才使用,而不应用于炫耀或者弥补功能与可用性上的缺陷。
- 至少要给用户一个选择可以禁用动画效果。
- 设置动画元素为absolute或fixed。
position: static
或position: relative
元素应用动画效果会造成频繁的reflow
。position: absolute
或position: fixed
的元素应用动画效果只需要repaint
。- 使用一个
timer
完成多个元素动画。
setInterval
和setTimeout
是两个常用的实现动画的接口,用以间隔更新元素的风格与布局。。动画效果的帧率最优化的情况是使用一个
timer
完成多个对象的动画效果,其原因在于多个timer
的调用本身就会损耗一定性能。setInterval(function() { animateFirst(''); }, 10); setInterval(function() { animateSecond(''); }, 10);使用同一个
timer
。setInterval(function() { animateFirst(''); animateSecond(''); }, 10);- 以脚本为基础的动画,由浏览器控制动画的更新频率。