現(xiàn)在幫人做網(wǎng)站賺錢嗎,啊樹 wordpress,仿站軟件,做app的網(wǎng)站有哪些事件循環(huán)#xff08;Event Loop#xff09;是 JavaScript 運(yùn)行時(shí)處理異步操作的核心機(jī)制。 瀏覽器和 Node.js 都實(shí)現(xiàn)了事件循環(huán)#xff0c;但兩者的實(shí)現(xiàn)方式和執(zhí)行順序存在差異。 瀏覽器事件循環(huán) 瀏覽器事件循環(huán)基于 Message Pump 實(shí)現(xiàn)#xff0c;有宏任務(wù)和微任務(wù)兩個(gè)概…事件循環(huán)Event Loop是 JavaScript 運(yùn)行時(shí)處理異步操作的核心機(jī)制。瀏覽器和 Node.js 都實(shí)現(xiàn)了事件循環(huán)但兩者的實(shí)現(xiàn)方式和執(zhí)行順序存在差異。瀏覽器事件循環(huán)瀏覽器事件循環(huán)基于 Message Pump 實(shí)現(xiàn)有宏任務(wù)和微任務(wù)兩個(gè)概念。任務(wù)類型宏任務(wù)setTimeoutsetIntervalDOM 事件微任務(wù)PromiseMutationObserverasync/await在執(zhí)行時(shí)同步任務(wù)優(yōu)先執(zhí)行微任務(wù)在單個(gè)循環(huán)周期里遇到就會(huì)執(zhí)行宏任務(wù)每個(gè)周期只執(zhí)行一次。這么設(shè)計(jì)主要是為了避免優(yōu)先級(jí)高的任務(wù)被長時(shí)間阻塞。注意RAFrequestAnimationFrame不是宏任務(wù)不是 Event Loop 的任意一環(huán)是 Render Loop 驅(qū)動(dòng)。執(zhí)行順序?yàn)g覽器事件循環(huán)的基本流程是執(zhí)行一個(gè)宏任務(wù) → 清空所有微任務(wù) → 渲染可選→ 重復(fù)執(zhí)行一個(gè)宏任務(wù)從宏任務(wù)隊(duì)列取出一個(gè)宏任務(wù)執(zhí)行首次執(zhí)行時(shí)全局 script 腳本就是一個(gè)宏任務(wù)宏任務(wù)中包含同步代碼同步代碼會(huì)立即執(zhí)行執(zhí)行過程中遇到新的宏任務(wù)如 setTimeout放入宏任務(wù)隊(duì)列執(zhí)行過程中遇到微任務(wù)如 Promise.then放入微任務(wù)隊(duì)列清空微任務(wù)隊(duì)列當(dāng)前宏任務(wù)執(zhí)行完畢后依次執(zhí)行所有微任務(wù)執(zhí)行微任務(wù)過程中產(chǎn)生的新的微任務(wù)也會(huì)在當(dāng)前周期執(zhí)行直到微任務(wù)隊(duì)列完全清空瀏覽器渲染可選根據(jù)需求進(jìn)行渲染執(zhí)行布局重排即元素寬高、位置調(diào)整執(zhí)行繪制重繪即對(duì)元素進(jìn)行上色處理文字顏色、背景顏色繪制執(zhí)行合成根據(jù)元素的層疊順序執(zhí)行合成操作進(jìn)入下個(gè)事件周期重復(fù)步驟1取下一個(gè)宏任務(wù)執(zhí)行瀏覽器渲染條件無渲染條件不會(huì)渲染無 DOM 變化不會(huì)執(zhí)行渲染同個(gè)事件循環(huán)多次修改DOM合并成一次渲染約 60 FPS(16.6ms)后臺(tái)標(biāo)簽暫停渲染執(zhí)行不會(huì)同步屏幕直到切回前臺(tái)密集型 JS 執(zhí)行阻塞渲染步驟導(dǎo)致出現(xiàn)卡頓超過 16.6ms執(zhí)行優(yōu)先級(jí)宏任務(wù) 微任務(wù) 渲染可選 下個(gè)周期執(zhí)行示例console.log(1. 同步代碼);setTimeout((){console.log(2. 宏任務(wù) - setTimeout);},0);Promise.resolve().then((){console.log(3. 微任務(wù) - Promise);});console.log(4. 同步代碼);// 輸出順序1 → 4 → 3 → 2// 同步代碼先執(zhí)行 → 微任務(wù)執(zhí)行 → 宏任務(wù)執(zhí)行注意事項(xiàng)過多微任務(wù)會(huì)阻塞渲染操作獲取瀏覽器元素寬高位置信息等會(huì)引起瀏覽器立刻執(zhí)行渲染重排 reflow全局 script 腳本本質(zhì)就是一個(gè)宏任務(wù)站在全局角度考慮一個(gè)宏任務(wù)觸發(fā)后再執(zhí)行微任務(wù)站在代碼角度考慮微任務(wù)隊(duì)列清空后再執(zhí)行宏任務(wù)的內(nèi)容。Node.js 事件循環(huán)Node.js 事件循環(huán)基于 libuv 實(shí)現(xiàn)。timers階段這個(gè)階段執(zhí)行timersetTimeout、setInterval的回調(diào)I/O事件回調(diào)階段(I/O callbacks/pending callback)執(zhí)行延遲到下一個(gè)循環(huán)迭代的 I/O 回調(diào)即上一輪循環(huán)中未被執(zhí)行的一些I/O回調(diào)閑置階段(idle, prepare)僅系統(tǒng)內(nèi)部使用輪詢階段(poll)檢索新的 I/O 事件執(zhí)行與 I/O 相關(guān)的回調(diào)幾乎所有情況下除了關(guān)閉的回調(diào)函數(shù)那些由計(jì)時(shí)器和 setImmediate() 調(diào)度的之外其余情況 node 將在適當(dāng)?shù)臅r(shí)候在此阻塞檢查階段(check)setImmediate() 回調(diào)函數(shù)在這里執(zhí)行關(guān)閉事件回調(diào)階段(close callback)一些關(guān)閉的回調(diào)函數(shù)如socket.on(‘close’, …)任務(wù)類型在 Node.js 中同樣存在宏任務(wù)和微任務(wù)與瀏覽器中的事件循環(huán)相似。微任務(wù)對(duì)應(yīng)有next tick queueprocess.nextTickother queuePromise 的 then 回調(diào)、queueMicrotask宏任務(wù)對(duì)應(yīng)有timer queuesetTimeout、setIntervalI/O Callbacks Queue延遲的 IO 事件回調(diào)poll queueIO事件回調(diào)check queuesetImmediateclose queueclose事件執(zhí)行順序Node.js 事件循環(huán)的執(zhí)行順序?yàn)閳?zhí)行一個(gè)宏任務(wù)/階段 → 清空微任務(wù)隊(duì)列nextTick 優(yōu)先→ 進(jìn)入下一個(gè)宏任務(wù)/階段全局代碼屬于宏任務(wù)的一種只有首次執(zhí)行清空微任務(wù)隊(duì)列next tick microtask queueprocess.nextTick 的微任務(wù)優(yōu)先級(jí)最高other microtask queuePromise 的 then 回調(diào)、queueMicrotasktimer queue執(zhí)行 setTimeout、setInterval 的回調(diào)執(zhí)行完畢后清空微任務(wù)隊(duì)列I/O callbacks queuepending queue執(zhí)行延遲的 I/O 回調(diào)執(zhí)行完畢后清空微任務(wù)隊(duì)列poll queue檢索新的 I/O 事件執(zhí)行 I/O 相關(guān)回調(diào)執(zhí)行完畢后清空微任務(wù)隊(duì)列check queue執(zhí)行 setImmediate 的回調(diào)執(zhí)行完畢后清空微任務(wù)隊(duì)列close queue執(zhí)行關(guān)閉事件的回調(diào)執(zhí)行完畢后清空微任務(wù)隊(duì)列重復(fù)步驟3進(jìn)入下一個(gè)事件循環(huán)思考1. 為什么微任務(wù)要在宏任務(wù)之后執(zhí)行微任務(wù)的設(shè)計(jì)目的是為了在宏任務(wù)執(zhí)行完畢后立即執(zhí)行一些高優(yōu)先級(jí)的任務(wù)避免被其他宏任務(wù)阻塞保證及時(shí)響應(yīng)宏微任務(wù)的設(shè)計(jì)本身就是為任務(wù)優(yōu)先級(jí)考慮。2. 過多微任務(wù)會(huì)導(dǎo)致什么問題如果微任務(wù)隊(duì)列中有大量任務(wù)會(huì)阻塞后續(xù)的宏任務(wù)執(zhí)行和瀏覽器渲染導(dǎo)致頁面卡頓。總結(jié)瀏覽器事件循環(huán)基于 messagepump 實(shí)現(xiàn)執(zhí)行順序?yàn)楹耆蝿?wù) → 微任務(wù) → 渲染可選→ 下個(gè)周期。同步代碼在宏任務(wù)內(nèi)部執(zhí)行微任務(wù)在單個(gè)循環(huán)周期內(nèi)會(huì)全部執(zhí)行完畢宏任務(wù)每個(gè)周期只執(zhí)行一個(gè)。Node.js 事件循環(huán)基于 libuv 實(shí)現(xiàn)分為多個(gè)階段timers、I/O callbacks、poll、check、close callbacks每個(gè)階段執(zhí)行完畢后會(huì)執(zhí)行微任務(wù)隊(duì)列nextTick 優(yōu)先級(jí)最高然后進(jìn)入下一個(gè)階段。關(guān)鍵區(qū)別瀏覽器的事件循環(huán)更簡單直接而 Node.js 的事件循環(huán)有明確的階段劃分更適合處理 I/O 密集型任務(wù)。參考內(nèi)容Event Loop - MDNThe Node.js Event Loop - Node.js 官方文檔