摘要：下面我们分别对这两种情况进行测试。测试重绘写了两个，都是改变的背景色实现实现测试结果如下左，右由于中，脚本运行占据了一定的时间，而几乎全部开销在页面重绘上。这样看来具有更好的性能。
既然 CSS3 和 jquery 都可以实现动画， 那么到底哪中方式的执行效率更高呢，我们简单的来比较一下吧。
首先考虑一下，改变 DOM 样式导致浏览器重绘有两种方式，一种是单纯的重绘，页面布局没有受到影响（如改变盒子的背景色，修改字体颜色，修改透明度...）；另外一种是在重绘之前会触发 Rendering（回流），也就是页面布局受到了影响，需要重新布局，在重绘页面。下面我们分别对这两种情况进行测试。
测试重绘写了两个 DEMO，都是改变 div 的背景色：
CSS3 实现
jqeury 实现
测试结果如下（CSS3 左， jquery 右）：
由于 jquery 中，脚本运行占据了一定的CPU 时间，而 css3 几乎全部开销在页面重绘上。 这样看来 css3 具有更好的性能。
测试回流+重绘接下来这两个 DEMO 效果是移动 DIV 的位置，这会导致浏览器触发 Rendering（回流），然后再进行重绘：
CSS3 实现
jquery 实现
测试结果如下（CSS3 左， jquery 右）：
可以看到，两者没有太打的区别。
结论通过上面两个简单的测试，可以得出一个结论，CSS3 同 jquery 在处理元素几何属性发生变化的动画时，表现相当；但是在处理元素特性变换时 CSS3 的性能要好。
CSS3 动画库可以通过Animate.css 动画库获取各种动画特效，并且可以自定义需要的动画效果列表。用 CSS3 动画来代替 jquery UI 可以大大的提升网页性能，如果你不打算考虑IE9-， 呵呵。
动画库测试 DEMO：http://codepen.io/CodingMonkeyzh/pen/gpLdPW
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92323.html
摘要：童鞋已经造了个版本。这里很明显，方案和方案可应对简单场景如没有回调等，方案可编程性最大，最灵活，可以适合复杂的动画场景或者承受复杂的交互场景。主要是那上面的演示和传统的直接操作的方式对比。注释里已经写了这是优化重点。 简介 transformjs在非react领域用得风生水起，那么react技术栈的同学能用上吗？答案是可以的。junexie童鞋已经造了个react版本。 动画实现方式 ...
摘要：更别提配合一些运动或者时间的库来编程了。姿势封装了一大堆关键帧动画，开发者只需要关心添加或者移除相关的动画的便可以。 简介 在过去的两年，越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候，都使用了transformjs，所有必要介绍一下，让更多的人受益，提高编程效率，并享受编程乐趣。（当然transformjs不仅仅支持移动设备，支持CSS3 3D Transforms的...
摘要：更别提配合一些运动或者时间的库来编程了。姿势封装了一大堆关键帧动画，开发者只需要关心添加或者移除相关的动画的便可以。 简介 在过去的两年，越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候，都使用了transformjs，所有必要介绍一下，让更多的人受益，提高编程效率，并享受编程乐趣。（当然transformjs不仅仅支持移动设备，支持CSS3 3D Transforms的...
阅读 1858·2021-09-27 13:35
阅读 3409·2019-08-30 14:16
阅读 2435·2019-08-30 10:52
阅读 832·2019-08-29 16:35
阅读 1367·2019-08-29 15:22
阅读 3624·2019-08-23 18:21
阅读 3097·2019-08-23 18:00
阅读 3107·2019-08-23 16:50
