文章目录
- 页面绘制流程
- CSS3动画
- 优点
- 缺点
- JS动画
- 优点
- 缺点
- 总结
本人不是专门写前端的,所以可能有不合理的地方,建议您多搜几篇博客看一下。
页面绘制流程
渲染流程主要有4个步骤
- 解析 HTML 生成DOM 树
- 解析 CSS 样式生成 CSSOM 树,CSSOM 树与 DOM 树结合生成 Render tree
- 布局 Render Tree 对每个节点进行布局处理,确定在屏幕上的位置
- 绘制 Render Tree,遍历渲染树将每个节点绘制出来
为了优化用户体验,渲染引擎不会等到 HTML 解析完才创建布局渲染树
CSS3动画
CSS3 动画也被称为补间动画,原因是只需要添加关键帧的位置,其他的未定义的帧会被自动生成
优点
浏览器可以对动画进行优化
帧速不好的浏览器,CSS3 可以自然降级兼容
代码简单,调优方向固定
缺点
无法精准的控制动画,无法实现一些复杂的动画
JS动画
JS 动画是逐帧动画,在时间帧上绘制内容,一帧一帧的,所以他的可再造性很高,几乎可以完成任何你想要的动画形式。
但是由于逐帧动画的内容不一样,会增加制作的负担,占用比较大的资源空间。
优点
可控性高,可以实现炫酷高级的动画
缺点
逐帧动画占用比较大的资源空间
总结
因为我同事写的页面属于比较简单的静态页面,动画简单,所以我推荐他听上级的,改成CSS实现。
如果是高级的动画效果,可能还是js来的好一点。