CSS3动画与JS动画的优缺点?
JS动画:
缺点:1.JS在浏览器的主线程中运行,而主线程还有其他的js脚本,样式布局,绘制任务等,对其干扰可能导致线程出现阻塞,从而造成丢帧的情况。
2.JS动画代码复杂度高于CSS3动画。
优点:1.JS动画控制能力很强,可以在动画播放过程中对动画进行控制,使其开始或停止。
2.动画效果比CSS3动画丰富,有些动画只有JS动画才能实现,比如曲线运动,冲击闪烁等。
3.CSS3有兼容性问题,而JS大多时候没有兼容性问题。
CSS3动画:
缺点:
1.运行过程较弱,无法附加绑定回调函数,CSS3动画只能暂停,不能在动画中寻找一个特定的事件点,不能在半路反转动画,不能变换事件尺度,不能在特定的位置添加回调函数或是绑定回放事件,无进度报告。
2.代码冗长。想用CSS3实现稍微复杂一点的动画,最后CSS代码都会变得特别笨重。
优点:
1.浏览器可以对动画进行优化。
结论:
如果动画只是简单的状态切换,不需要中间过程控制,在这种情况下,CSS3动画是优先选择方案。它可以让你将动画逻辑放在样式文件里面,而不会让你的页面充斥JS库。然而如果你在设计很复杂的富客户端界面或者开发一个有着复杂UI状态的APP,那么你应该使用JS动画,这样你的动画可以保持高效,并且你的工作流也更可控。所以,在实现一些小的交互动效的时候,就多多考虑CSS3动画,对于一些复杂控制的动画,使用JS动画比较可靠。
CSS3动画与JS动画的优缺点?的更多相关文章
- css3动画与js动画的区别
css与 js动画 优缺点比较 我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其 ...
- CSS3动画和JS动画的比较
前言 之前有被问到一个问题,css3动画和js动画性能谁更好,为什么.据我的经验,当然觉得css3动画性能更好,至于为什么一时还真答不上来,所以特意查了一下资料总结一波. JS动画 优点: js动画控 ...
- css3 动画 vs js 动画
之前被问到过,css3 动画与 js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的.先来看看二者实现动画的原理吧. ...
- 使用jquery封装的动画脚本(无动画、css3动画、js动画)
自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
- Web高性能动画及渲染原理(1)CSS动画和JS动画
目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dash ...
- 高性能Web动画和渲染原理系列(1)——CSS动画和JS动画
[摘要] 介绍CSS动画和JS动画的基本特点,以及轻量级动画库velocity.js的基本用法. 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园 ...
- css3动画与js动画的一些理解
http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- css动画和js动画的差异
代码复杂度,js 动画代码相对复杂一些 动画运行时,对动画的控制程度上,js 能够让动画,暂停,取消,终止,css动画不能添加事件 动画性能看,js 动画多了一个js 解析的过程,性能不如 css 动 ...
随机推荐
- Java包装类介绍与类型之间相互转换
1.包装类存在的意义 通俗解释就是由于Java是面对对象的语言,而基本类型不具有面对对象的概念,为了弥补不足,引入了包装类方便使用面对对象的变成思想操作基本类型. 2.基本类型和包装类对应关系 byt ...
- codeforce 337D Book of Evil ----树形DP&bfs&树的直径
比较经典的老题 题目意思:给你一颗节点数为n的树,然后其中m个特殊点,再给你一个值d,问你在树中有多少个点到这m个点的距离都不大于d. 这题的写法有点像树的直径求法,先随便选择一个点(姑且设为点1)来 ...
- 【python 3】 函数 进阶
函数进阶 1.函数命名空间和作用域 命名空间一共分为三种: 全局命名空间 局部命名空间 内置命名空间 *内置命名空间中存放了python解释器为我们提供的名字:input , print , str ...
- Python玩转Arduino——简单介绍
关于Python语言的介绍安装请参考廖雪峰的Python教程 Python是一门解释型语言,虽然不能够像c语言一样编译上传到Arduino--什么你说MicroPython,我们再说Arduino呢- ...
- HDU - 3652
#include<stdio.h> #include<string.h> #include<math.h> #include<time.h> #incl ...
- vue中前端处理token过期的方法与axios请求拦截处理
在处理token过期的这个问题上困扰了我很久,现在终于解决的了,所以分享出来给大家,希望能够对大家有所帮助. 首先,当然是路由进行拦截,路由拦截当然是在beforeEach中了: router.bef ...
- 禁止root登陆sshd/并修改默认端口号
1,新建一个用户: #useradd xxx 2,为新用户设置密码: #passwd xxx 3,修改sshd配置文件 #vi /etc/ssh/sshd_config 查找“#PermitRootL ...
- git上传
#1.Git 全局设置: git config --global user.name "skbarcode" git config --global user.email &quo ...
- Apache 如何设置默认首页文档?
在你安装后的Apache目录下,有一个conf目录,在这个目录里,有一个"httpd.conf"文件.我们要做的,就是修改这个文件. 在这个文件里,凡是以"#" ...
- git设置用户名和邮箱
用git config --global user.name "your name"命令来设置你的用户名 用git config --global user.email " ...