为什么开发中选择JS实现动画效果（涉及浏览器解析以及回流与重绘）

1.问题引入：

在写电商项目中，需要用到原生JS以及vue封装的动画实现动画效果，例如组件渲染时的过度动画等等，但是在刚入门CSS3时，也可以使用原生CSS实现动画效果，这其中除了代码量的复杂程度区别外，还有什么区别呢？

2.

JS实现：

毫无疑问，JS在实现较为复杂的动画行为时比CSS要高效的多，如果选择CSS将大幅度提高代码的书写量以及逻辑，而JS能够通过控制行为，实现比CSS更加高级的动画效果，另外它还可以控制动画的每一帧行为，这是CSS无法实现的。此外，JS语言的兼容性比CSS好，在低版本浏览器中运行不会出现画面丢失问题

CSS实现：

性能是CSS实现的最大优势，在大型项目中这点体现得尤为明显，由于JS操作的是DOM节点，所以JS动画将引起回流，回流又将导致重绘，所以JS动画将大量占用内存，导致性能降低。而且JS是单线程的，它在浏览器的主线程中运行，同一时间运行内容较多可能导致从而动画掉帧，这也是性能问题的一个体现，而CSS动画不会导致回流与重绘

3.结论：

相同的动画，CSS实现比JS实现要好，但是JS实现动画效率较高，且我写的项目较小，故我自己选择JS实现过度动画。