CSS3 Animate or JS Animate ?

MockingBird

既然 CSS3 和 jquery 都可以实现动画, 那么到底哪中方式的执行效率更高呢,我们简单的来比较一下吧。

首先考虑一下,改变 DOM 样式导致浏览器重绘有两种方式,一种是单纯的重绘,页面布局没有受到影响(如改变盒子的背景色,修改字体颜色,修改透明度...);另外一种是在重绘之前会触发 Rendering(回流),也就是页面布局受到了影响,需要重新布局,在重绘页面。下面我们分别对这两种情况进行测试。

测试重绘

写了两个 DEMO,都是改变 div 的背景色:

测试结果如下(CSS3 左, jquery 右):

clipboard.png

由于 jquery 中,脚本运行占据了一定的CPU 时间,而 css3 几乎全部开销在页面重绘上。 这样看来 css3 具有更好的性能。

测试回流+重绘

接下来这两个 DEMO 效果是移动 DIV 的位置,这会导致浏览器触发 Rendering(回流),然后再进行重绘:

测试结果如下(CSS3 左, jquery 右):

clipboard.png

可以看到,两者没有太打的区别。

结论

通过上面两个简单的测试,可以得出一个结论,CSS3 同 jquery 在处理元素几何属性发生变化的动画时,表现相当;但是在处理元素特性变换时 CSS3 的性能要好

CSS3 动画库

可以通过Animate.css 动画库获取各种动画特效,并且可以自定义需要的动画效果列表。用 CSS3 动画来代替 jquery UI 可以大大的提升网页性能,如果你不打算考虑IE9-, 呵呵。

动画库测试 DEMO:http://codepen.io/CodingMonkeyzh/pen/gpLdPW

阅读 2.6k

MockingBird 博客
用作博客,记录学习笔记,收藏有价值的文章

_

5.7k 声望
701 粉丝
0 条评论

_

5.7k 声望
701 粉丝
宣传栏