为什么 CSS 动画比 JS 动画高效？

题干

CSS 动画和 JS 动画是在网页上实现动画效果的两种常见方法，它们各有优缺点，并没有绝对的高效与否，而是取决于具体的应用场景和需求。

性能：CSS 动画和 JS 动画在性能上没有明显的差异，因为它们都是在主 UI 线程中执行的，都需要在每次重绘事件之前重新计算元素的样式。一些 JS 动画库，如 GSAP 和 Velocity.JS，甚至声称它们能够比原生的 CSS 动画实现更好的性能，这是因为它们使用了一些优化技巧，如缓存元素的引用、使用 transform 属性代替 left/top 属性等。
兼容性：CSS 动画在低版本的浏览器中可能不被支持，需要使用 polyfill 来填充；而 JS 动画则可以兼容旧版的浏览器，只要 JS 没有被禁用¹²。另外，CSS 动画可能在不同的浏览器中有不同的前缀或实现细节，需要注意统一和测试。
控制性：CSS 动画比较简单和声明式，适合实现一些简单的或者固定的动画效果，如切换 UI 元素的状态、显示提示框等；而 JS 动画则比较灵活和命令式，适合实现一些复杂的或者可变的动画效果，如弹跳、停止、暂停、倒放、减速等。
可读性：CSS 动画使用了更简洁和语义化的 API ，可以直接在样式表中定义动画效果，而不需要额外的 JS 代码；而 JS 动画则需要编写更多的 JS 代码，可能导致代码的可读性和维护性降低。

总之，CSS 动画和 JS 动画都有各自的优势和局限，没有一种方法可以完全替代另一种方法。应根据自己的项目需求和偏好来选择合适的动画方法。

isboyjc