JavaScript 中 requestAnimationFrame 与 setTimeout 做动画的真实差异,以及为什么你写的进度条会卡顿
做前端免不了要写动画,尤其是加载进度条、折叠面板展开、拖拽跟随这类高频交互。很多人在遇到掉帧时会下意识地把 setTimeout 的间隔改小,比如从 16 毫秒改成 8 毫秒甚至 4 毫秒,觉得刷新越勤动画越顺滑,结果反而更卡,风扇狂转,低端机上直接掉到十几帧。这个问题通常不是浏览器性能不行,而是定时器和渲染管线没有对齐:setTimeout 只是把回调塞进宏任务队列,执行时机和屏幕刷新完全无关,回调里改了样式,浏览器还要等下一次合适的时机才真正绘制,中间可能插入了多次无效的样式计算和布局。requestA...