Dvorak
Dvorak

Dvorak Chen

Event Loop


浅谈 Javascript 事件循环

JavaScript的单线程执行机制通过事件循环处理任务,所有代码执行和异步回调均在主线程按顺序进行。事件循环包含宏任务队列和微任务队列,宏任务包括整体代码、setTimeout/setInterval回调等,微任务包括Promise.then/catch/finally等,每次循环优先清空微任务队列再执行宏任务。setTimeout的第二个参数表示回调进入宏任务队列的延迟时间而非立即执行时间,实际执行时机取决于事件循环状态。当执行耗时操作时(如一次性创建5万个DOM元素),会阻塞后续任务和浏览器渲染,导致页面卡顿。通过将任务拆分为多个小块(如每次创建250个元素),利用setTimeout将每个小块作为独立宏任务依次放入队列,可让浏览器在每次宏任务后清空微任务队列并触发页面渲染,实现平滑的渐进式更新。错误的优化方式如一次性用循环注册大量setTimeout宏任务,会导致队列被占满,反而延迟其他关键任务的执行。正确实现需通过递归注册setTimeout,在每次宏任务执行完毕后触发下一个任务,确保每次任务执行后浏览器获得渲染机会。这种分片处理方式能有效平衡任务执行与渲染频率,避免长时间阻塞主线程。--Qwen3

Javascript DOM Manipulation Event Loop Macrotask Queue Browser Rendering Performance Optimization

  • 1