同事问我为什么上级喊他把js实现改成css

本人不是专门写前端的，所以可能有不合理的地方，建议您多搜几篇博客看一下。

页面绘制流程

渲染流程主要有4个步骤

1. 解析 HTML 生成DOM 树
2. 解析 CSS 样式生成 CSSOM 树，CSSOM 树与 DOM 树结合生成 Render tree
3. 布局 Render Tree 对每个节点进行布局处理，确定在屏幕上的位置
4. 绘制 Render Tree，遍历渲染树将每个节点绘制出来
   
   为了优化用户体验，渲染引擎不会等到 HTML 解析完才创建布局渲染树

CSS3动画

CSS3 动画也被称为补间动画，原因是只需要添加关键帧的位置，其他的未定义的帧会被自动生成

优点

浏览器可以对动画进行优化
帧速不好的浏览器，CSS3 可以自然降级兼容
代码简单，调优方向固定

缺点

无法精准的控制动画，无法实现一些复杂的动画

JS动画

JS 动画是逐帧动画，在时间帧上绘制内容，一帧一帧的，所以他的可再造性很高，几乎可以完成任何你想要的动画形式。

但是由于逐帧动画的内容不一样，会增加制作的负担，占用比较大的资源空间。

优点

可控性高，可以实现炫酷高级的动画

缺点

逐帧动画占用比较大的资源空间

总结

因为我同事写的页面属于比较简单的静态页面，动画简单，所以我推荐他听上级的，改成CSS实现。

如果是高级的动画效果，可能还是js来的好一点。