动画效果卡顿的解决方案

1. JS 层面的优化

使用 requestAnimationFrame 代替 setTimeout 和 setInterval

由于 JS 是单线程的，定时器操作并不能一定保证执行的时间节点。可能会出现一帧中重复执行导致重绘或在一帧结束时执行导致掉帧。

使用window.requestAnimationFrame，其接受的参数为下一次重绘前要执行的动画效果函数。特点：

• 执行次数会和浏览器屏幕刷新率相匹配
• 当页面隐藏或最小化时，不会执行

将 DOM 无关的操作放到 web worker 中

Web Worker 为 JS 创建了多线程环境，worker 线程在后台运行，受主线程控制，两者互不干扰。

将和 UI 无关的任务交给 web worker，可提高主线程的执行效率。如数据获取、数据处理、数据上报等。

2. CSS 层面

1. 降低选择器的复杂度
2. 使用 GPU 加速（transform、opacity）

3. 其他

1. 避免频繁触发重绘
2. 使用 flex 布局代替浮动布局（浮动元素之间相互影响，布局所用时间较长）、绝对定位（每个元素需要唯一的定位坐标）
3. 避免强制同步布局（对 DOM 属性的先写后读，连续读写操作）