您的位置 首页 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会有很大的提高。

文章来源:火云技术网

文章标题:css实现动画性能优化

文章地址:https://www.pyhw.net/30501_css%e5%ae%9e%e7%8e%b0%e5%8a%a8%e7%94%bb%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96-2.html

关于作者: admin

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图