网站建设公司固定ip沧州模板建站平台

网站建设公司固定ip,沧州模板建站平台,杭州施必得展示设计有限公司,外链 推网站怎么做事件循环#xff08;Event Loop#xff09;是 JavaScript 运行时处理异步操作的核心机制。 浏览器和 Node.js 都实现了事件循环#xff0c;但两者的实现方式和执行顺序存在差异。 浏览器事件循环 浏览器事件循环基于 Message Pump 实现#xff0c;有宏任务和微任务两个概…事件循环Event Loop是 JavaScript 运行时处理异步操作的核心机制。浏览器和 Node.js 都实现了事件循环但两者的实现方式和执行顺序存在差异。浏览器事件循环浏览器事件循环基于 Message Pump 实现有宏任务和微任务两个概念。任务类型宏任务setTimeoutsetIntervalDOM 事件微任务PromiseMutationObserverasync/await在执行时同步任务优先执行微任务在单个循环周期里遇到就会执行宏任务每个周期只执行一次。这么设计主要是为了避免优先级高的任务被长时间阻塞。注意RAFrequestAnimationFrame不是宏任务不是 Event Loop 的任意一环是 Render Loop 驱动。执行顺序浏览器事件循环的基本流程是执行一个宏任务 → 清空所有微任务 → 渲染可选→ 重复执行一个宏任务从宏任务队列取出一个宏任务执行首次执行时全局 script 脚本就是一个宏任务宏任务中包含同步代码同步代码会立即执行执行过程中遇到新的宏任务如 setTimeout放入宏任务队列执行过程中遇到微任务如 Promise.then放入微任务队列清空微任务队列当前宏任务执行完毕后依次执行所有微任务执行微任务过程中产生的新的微任务也会在当前周期执行直到微任务队列完全清空浏览器渲染可选根据需求进行渲染执行布局重排即元素宽高、位置调整执行绘制重绘即对元素进行上色处理文字颜色、背景颜色绘制执行合成根据元素的层叠顺序执行合成操作进入下个事件周期重复步骤1取下一个宏任务执行浏览器渲染条件无渲染条件不会渲染无 DOM 变化不会执行渲染同个事件循环多次修改DOM合并成一次渲染约 60 FPS(16.6ms)后台标签暂停渲染执行不会同步屏幕直到切回前台密集型 JS 执行阻塞渲染步骤导致出现卡顿超过 16.6ms执行优先级宏任务 微任务 渲染可选 下个周期执行示例console.log(1. 同步代码);setTimeout((){console.log(2. 宏任务 - setTimeout);},0);Promise.resolve().then((){console.log(3. 微任务 - Promise);});console.log(4. 同步代码);// 输出顺序1 → 4 → 3 → 2// 同步代码先执行 → 微任务执行 → 宏任务执行注意事项过多微任务会阻塞渲染操作获取浏览器元素宽高位置信息等会引起浏览器立刻执行渲染重排 reflow全局 script 脚本本质就是一个宏任务站在全局角度考虑一个宏任务触发后再执行微任务站在代码角度考虑微任务队列清空后再执行宏任务的内容。Node.js 事件循环Node.js 事件循环基于 libuv 实现。timers阶段这个阶段执行timersetTimeout、setInterval的回调I/O事件回调阶段(I/O callbacks/pending callback)执行延迟到下一个循环迭代的 I/O 回调即上一轮循环中未被执行的一些I/O回调闲置阶段(idle, prepare)仅系统内部使用轮询阶段(poll)检索新的 I/O 事件执行与 I/O 相关的回调几乎所有情况下除了关闭的回调函数那些由计时器和 setImmediate() 调度的之外其余情况 node 将在适当的时候在此阻塞检查阶段(check)setImmediate() 回调函数在这里执行关闭事件回调阶段(close callback)一些关闭的回调函数如socket.on(‘close’, …)任务类型在 Node.js 中同样存在宏任务和微任务与浏览器中的事件循环相似。微任务对应有next tick queueprocess.nextTickother queuePromise 的 then 回调、queueMicrotask宏任务对应有timer queuesetTimeout、setIntervalI/O Callbacks Queue延迟的 IO 事件回调poll queueIO事件回调check queuesetImmediateclose queueclose事件执行顺序Node.js 事件循环的执行顺序为执行一个宏任务/阶段 → 清空微任务队列nextTick 优先→ 进入下一个宏任务/阶段全局代码属于宏任务的一种只有首次执行清空微任务队列next tick microtask queueprocess.nextTick 的微任务优先级最高other microtask queuePromise 的 then 回调、queueMicrotasktimer queue执行 setTimeout、setInterval 的回调执行完毕后清空微任务队列I/O callbacks queuepending queue执行延迟的 I/O 回调执行完毕后清空微任务队列poll queue检索新的 I/O 事件执行 I/O 相关回调执行完毕后清空微任务队列check queue执行 setImmediate 的回调执行完毕后清空微任务队列close queue执行关闭事件的回调执行完毕后清空微任务队列重复步骤3进入下一个事件循环思考1. 为什么微任务要在宏任务之后执行微任务的设计目的是为了在宏任务执行完毕后立即执行一些高优先级的任务避免被其他宏任务阻塞保证及时响应宏微任务的设计本身就是为任务优先级考虑。2. 过多微任务会导致什么问题如果微任务队列中有大量任务会阻塞后续的宏任务执行和浏览器渲染导致页面卡顿。总结浏览器事件循环基于 messagepump 实现执行顺序为宏任务 → 微任务 → 渲染可选→ 下个周期。同步代码在宏任务内部执行微任务在单个循环周期内会全部执行完毕宏任务每个周期只执行一个。Node.js 事件循环基于 libuv 实现分为多个阶段timers、I/O callbacks、poll、check、close callbacks每个阶段执行完毕后会执行微任务队列nextTick 优先级最高然后进入下一个阶段。关键区别浏览器的事件循环更简单直接而 Node.js 的事件循环有明确的阶段划分更适合处理 I/O 密集型任务。参考内容Event Loop - MDNThe Node.js Event Loop - Node.js 官方文档