之前被问到过,css3 动画与 js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的。先来看看二者实现动画的原理吧。

css3 动画原理

css3 动画本质上是一直视觉上的动画,并未去触碰 DOM,换句话说,用 css3 实现的动画,原来的 DOM 的位置是不曾被改变的。

js 动画原理

js 动画是通过控制 DOM 的位置,来达到动的效果,是 DOM 一点点位移的结果,每一次的位移都要等待上一次的位移结束,而且因为频繁的操作 DOM,会带来频繁的重绘,所以会出现卡顿的现象。

孰优孰劣?

通过上面的分析,我们知道 css3 相比 js 实现的动画,会更流畅。我们还知道,过多的 js 脚本,页面的加载速度会受到影响,所以这在一定程度上肯定会影响到页面的性能。因此,推荐使用 css3 动画,而不建议使用 js 动画。