css实现动画性能优化的优缺点

今天小编给大家分享的是css实现动画性能优化的优缺点，很多人都不太了解，今天小编为了让大家更加了解css实现动画性能优化，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。一、使用css，jquery，canvas制作动画1、Canvas优点：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形可以直接保存为 .png 或者 .jpg的图形；缺点：依赖于HTML，只能通过脚本绘制图形，没有实现动画的API（依靠事件和定时器更新）；由于在 canvas 上以编程方式显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕阅读器识别。2、css3优点：简单且与内容分离、css动画不触发layout和paint；（这些属性的修改不会触发layout和paint：backface-visibility、opacity、perspective、perspective-origin、transform）；缺点：有浏览器兼容性问题、安卓手机会出现卡顿、受排版引擎的限制，与整个页面的dom结构息息相关。3、JQuery优点：没有兼容性问题缺点：每一帧，都要进行repaint、recomposite（非常耗时）；总结：在移动端动画效果上，使用css3动免费云主机、域名画要比jquery动画效率高的多。在安卓手机上表现尤其明显！所以移动端动画以css3动画为优先，jquery只能用来简单处理应用逻辑。css3动画是用来给内容布局加上特效的通用解决方案，但是在性能堪忧的移动浏览器上很可能会受排版性能所限，达不到理想的效果。而对性能有要求的特定场景，比如游戏，用canvas会有很大的提高。二、css3在移动端出现卡顿问题css3制作的动画在ios上跑的66的，但是在安卓上有时会出现卡顿现象。不妨从下面几点找找问题。a、是否导致layout如果是，尽可能将动画元素absolute或者fixed化以避免影响文档树，以减少重排.b、是否启用硬件加速“用到了CSS3动画”和“开启了硬件加速”是两件事情，虽然前者有可能导致后者。
开启硬件加速在webkit中有神奇的万金油：opacity: 1;或者-webkit-backface-visibility: hidden;。c、是否是有高消耗的属性（css shadow、gradients、background-attachment: fixed等）有的话，图片也是一种选择。这算得上是用空间换时间的优化了。d、repaint的面积如果是，只好缩小动画面积了。这一步的优化有限;e、尽量使用 transform 生成动画，避免使用 height,width,margin,padding 等；如以下例子1和例子2。PS：使用 transform，浏览器只需要一次生成这个元素的位图，并在动画开始的时候将它提交给 GPU 去处理 。之后，浏览器不需要再做任何布局、 绘制以及提交位图的操作。从而，浏览器可以充分利用 GPU 的特长去快速地将位图绘制在不同的位置、执行旋转或缩放处理。简而言之，transform 动画由GPU控制，支持硬件加速，并不需要软件方面的渲染三、动画过程有闪烁（一般出现在动画开始）解决方法：在webkit内核的浏览器中，另一个行之有效的方法是：关于css实现动画性能优化的优缺点就分享到这里了，当然并不止以上和大家分析的办法，不过小编可以保证其准确性是绝对没问题的。希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。

相关推荐: Node的events模块怎么使用

这篇文章主要介绍了Node的events模块怎么使用的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Node的events模块怎么使用文章都会有所收获，下面我们一起来看看吧。 在 vue 的项目中，有时我们会用到全局事件总线来管理组…