事件循环机制js 事件循环机制
使用requestanimationframe替代settimeout/setinterval，改进与浏览器渲染同步，避免掉帧；2. 保持主线程轻量，避免长任务阻塞动画回调执行；3. 动画简单优先使用css过渡或@keyframes，利用gpu加速；4. 合理使用will-change提升关键元素图层，但不过度占用；5. 对scroll、resize等高频事件进行节流或防抖，减少主线程压力；6. 复杂列表采用虚拟化或离屏渲染，降低重绘需求；7. 动画尽量使用变换和不透明度，触发布局重排。这样才能实现真正丝滑的前置动画体验。
前置在开发里，要动画跑得丝滑，利用事件循环是关键。简单来说，就是想办法让浏览器在它准备好差不多下一帧的时候，才去执行的动画更新代码，而不是我们自己核心的瞎猜或者强制它。 requestAnimationFrame，它可以让你的动画更新与浏览器的渲染周期同步，避免掉帧和卡顿。
利用事件循环优化动画性能，最直接、最有效的方式就是支持 requestAnimationFrame (rAF)。它没有什么魔法，但是浏览器提供了一个 API，会告诉浏览器：“嘿，我这里有个任务，想在下一次重绘之前执行。”浏览器很聪明，它什么时候知道时机——通常是在显示器刷新率之前的那几个点。
我个人在做复杂交易时，早期也踩过setTimeout 的坑。你设置了个16ms（大约60fps），关注“这不就得了？”结果发现，一旦页面上有点其他操作，或者CPU有点忙，动画就开始抽时间，肉眼可见的卡顿。就是因为setTimeout是个宏任务，它会被推到任务队列的旁边，前面可能还有一大堆脚本执行、网络请求响应、DOM操作队列在。而requestAnimationFrame那么不同，它被设计成在浏览器准备好下一次渲染之前帧调用，优先级更高，并且它会把多个动画请求合并成一次均匀，极大减少了不必要的重绘和回流。这就像你一个经验丰富的司机说：“等红灯变绿的时候，我们再跟秒出发。”而不是自己数着喊“三、二、一，走！”为什么 requestAnimationFrame 比 setTimeout更适合动画？
这确实是个老生常谈但又不得不提的问题。我记得刚开始接触前端动画时，也曾纠结于setTimeout(...， 16)为什么效果不佳。后来才明白，requestAnimationFrame 的优势在于它能够与浏览器的渲染布局完美同步。
你仔细看看，浏览器为了显示页面，它有自己的节奏：处理JavaScript、计算样式、布局、均匀、合成。这个过程是连续走的，每一帧都得接着。setTimeout就像一个独立于这个外部节奏的计时器，你设定的16毫秒，只是一个理想值。如果浏览器当前正在忙着处理一个运行的JavaScript任务，或者在进行复杂的布局计算，你的16毫秒到了，但浏览器还没有准备好相关的新的一帧，就只能等了。这样一来，你的动画更新就错过了最佳的相关时机，导致掉帧，动画看起来就不会同步了。
而requestAnimationFrame则不然，它会告诉浏览器：“请在下一次浏览器重绘之前调用我指定的回调函数。”这意味着，你的动画更新代码会在浏览器准备好对应新帧的那一刻执行，保证每一帧的动画都是在浏览器最空闲、最适合对应的时候进行的。这不仅能保证动画的流畅度，还能在页面不可见时（比如用户切换了标签页），自动暂停动画，从而节省CPU和电池资源，这对于移动尤其设备重要。事件循环中的任务队列如何动画影响流畅度？ 深入一点看，JavaScript的事件循环机制是理解性能优化的关键。它基本上就是个永无止境的循环，不断地从任务队列中取出任务并执行。这个队列里有宏任务（macrotasks）和微任务（microtasks）之分。
宏任务包括我们常见的setTimeout、setInterval、I/O操作、UI渲染事件等等。每次事件循环迭代，都会从宏任务队列中取出一个任务来执行。微任务则包括Promise的回调、MutationObserver 的回调等，它们会在当前宏任务执行结束后，下一个宏任务开始，被清空。
动画的刷新度，取决于主线程的“空闲”程度。如果你的某个事件监听器（比如scroll事件）触发了一个同步的计算，或者你在一个循环里处理大量数据，这些都会作为宏任务阻塞主线程。当主线程被长时间占用之前，它就无法及时响应requestAnimationFrame的回调，也无法及时进行页面的重绘和合成。结果就是，动画帧率下降，出现“将卡顿”或“掉帧”。
所以，优化这么好的动画性能，不仅仅是使用 requestAnimationFrame ，更重要的是要保持避免主线程简单的“轻便”。尽量避免在事件回调中执行大量计算，或者在短时间内关闭操作DOM。如果确实有大量计算，可以考虑使用 Web Workers 其暂停后台线程执行，停止主线程。 requestAnimationFrame，还有哪些策略可以辅助优化动画性能？
虽然requestAnimationFrame 是动画的基石，但也不是万能药。还有很多辅助策略可以锦上添花，让你的动画表现更上一层：
利用CSS动画/过渡：对于简单的动画，能用CSS就用CSS。CSS动画和过渡通常在浏览器内部由合成器线程处理，它们可以利用GPU进行硬件加速，性能表现通常比JavaScript动画更好。比如简单的动画变化、位置移动，直接用transition或@keyframes
合理使用will-change属性：这个CSS属性可以提前告知浏览器哪些元素会发生变化，让浏览器提前做好优化优化准备，比如创建独立的渲染层。但要注意，它不是万能药，反而可能导致内存占用过多，得适其反。只是在确实需要优化的关键动画元素上使用它。
事件的节流（throttle）与防（debounce）：for像scroll、resize、mousemove这样会间隙触发的事件，如果不加控制，它们的回调函数可能会在短时间内被执行成百上千次，严重阻塞主线程。
通过节流（限制执行频率）或防抖（在一段时间内只执行最后一次），可以大幅减少回调的执行次数，保证主线程有足够的时间进行动画渲染。
离屏渲染与虚拟化：对于大量元素的复杂列表或图表包含，当它们滚动或缩放时，如果每次都重新渲染所有元素，性能会非常差。离屏渲染（将元素相对到屏幕外，然后作为图片批量显示）和虚拟化（只渲染当前视口可视的元素）是解决此类问题的有效方案。
图层提升与合成：了解浏览器渲染的“合成”阶段很重要。某些CSS属性（如变换、不透明度）的变化触发不会布局或高度，而是直接在合成器线程上操作。这意味着它们的变化成本非常低，可以获得极高的动画性能。因此，尝试通过这些属性来实现动画，而不是改变宽度、高度等会重排和重绘的属性。
这些策略结合 requestAnimationFrame，让你在前置动画的优化路上走得更远，让用户体验到真正丝滑的交互。
以上就是如何利用事件循环优化动画性能？的详细内容，更多请关注乐哥常识网其他文章相关！