JavaScript 动画和CSS3动画有什么区别? (前端面试题！必会)

1、CSS动画

优点:

1.1)浏览器可以对动画进行优化。

1.1.1 )浏览器使用requestAnimationFrame 比起setTimeout, setInterval 设置动画的优势主要是:

1) requestAnimationFrame 会把每- -帧中的所有DOM操作集中起来,在一-次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般来说，这个频率为每秒60帧.

2)在隐藏或不可见的元素中requestAnimationFrame不会进行重绘或回流,这当然就意味着更少的的cpu, gpu 和内存使用量。

1.1.2)强制使用硬件加速(通过 GPU来提高动画性能)

1.2)代码相对简单，性能调优方向固定

1.3)对于帧速表现不好的低版本浏览器，CSS3 可以做到自然降级，而JS则需要撰写额外代码

缺点:

1.1)运行过程控制较弱,无法附加事件绑定回调函数. CSS 动画只能暂停,不能在动画中寻找一个特定的时间点，不能在半路反转动画，不能变换时间尺度，不能在特定的位置添加回调函数或是绑定回放事件,无进度报告.

1.2)代码冗长。想用CSS实现稍微复杂一点动画，最后CSS代码都会变得非常笨重.

2、JS动画

优点:

2.1) JavaScript 动画控制能力很强,可以在动画播放过程中对动画进行控制:开始、暂停、回放、终止、取消都是可以做到的。

2.2)动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成。

2.3) CSS3 有兼容性问题，而JS大多时候没有兼容性问题。

缺点:

2.1) JavaScript 在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况.

2.2)代码的复杂度高于CSS动画

3、css 动画和js动画的差异

3.1)代码复杂度，js 动画代码相对复杂- - 些.

3.2)动画运行时，对动画的控制程度上，js 能够让动画，暂停,取消，终止，css 动画不能添加事件.

3.3)动画性能看，js 动画多了一个js解析的过程，性能不如css 动画好。

总结:

简单的状态切换，不需要中间过程控制，css 动画是优选方案。

复杂的状态的APP.应该使用js动画

JavaScript 动画和CSS3动画有什么区别? (前端面试题！必会)相关推荐

js动画与css3动画的区别
欢迎学习交流!!! 持续更新中- 文章目录 JS动画(逐帧动画) css3(补间动画) 总结 JS动画(逐帧动画) 首先,在js动画是逐帧动画,是在时间帧上逐帧绘制帧内容,由于是一帧一帧的话,所以其可 ...
css+动画优化,css3动画性能优化--针对移动端卡顿问题
一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...
前端面试题集锦——JavaScript
前端面试题集锦--JavaScript 1.请你谈谈 Cookie 的优缺点 cookie是存储于访问者计算机中的变量 cookie是浏览器提供的一种机制可以由JavaScript对其进行控制(设置 ...
前端面试题汇总（JavaScript面试纯干货）
前端面试题汇总(JavaScript面试纯干货) 1 闭包闭包就是能够读取其他函数内部变量的函数闭包是指有权访问另⼀个函数作⽤域中变量的函数,创建闭包的最常⻅的⽅式就是在⼀个函数内创建另⼀个函数, ...
详细前端面试题javascript篇--持续更新
最新前端面试题汇总大全(超详细含vue,react,css,js,webpack,性能优化等)–持续更新点击查看前端HTML篇前端CSS篇前端面试题js篇--持续更新 1. JS 数据类型 ?存 ...
2021最新最全前端面试题（包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等）
整理了一些前端面试题,希望对正在找前端工作的伙伴有用.本篇文章内容篇幅较大,主要针对初中级前端开发工程师. 篇幅过长,大家可以先点赞收藏以后慢慢看. 关于HTML 的title和alt属性有什么区别 ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
2023年最全前端面试题考点HTML5+CSS3+JS
合集:2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客本章内容为一面基础面为了简洁,相关文章参考链接在标题里 ...
「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪类与伪元素的区别及实战如何实现一个圣杯布局? ...

JavaScript 动画和CSS3动画有什么区别? (前端面试题！必会)

JavaScript 动画和CSS3动画有什么区别? (前端面试题！必会)相关推荐

最新文章

热门文章