浏览器和nodejs事件循环（Event Loop）区别

Posted 2022-05-23 沿着路走到底

单线程和异步

JS是单线程的（无论在浏览器还是 nodejs）

浏览器中 JS 执行和 DOM 渲染共用一个线程

JS 是单线程，这种场景就只能使用“异步”

宏任务和微任务

宏任务：如 setTimeout setInterval 网络请求 requestIdleCallback  requestAnimationFrame

微任务：如 promise async / await

微任务在下一轮 DOM 渲染之前执行，宏任务在之后执行

两者表面的区别：

第一，微任务比宏任务更快执行

console.log(\'start\')
setTimeout(() => 
    console.log(\'timeout\')
)
Promise.resolve().then(() => 
    console.log(\'promise.then\')
)
console.log(\'end\')

// start  end   promise.then    timeout

第二，微任务在 DOM 渲染前执行，而宏任务在 DOM 显示后（即真正显示到页面上，肉眼可见）执行

const p = document.createElement(\'p\')
p.innerhtml = \'new paragraph\'
document.body.appendChild(p)
console.log(\'length----\', list.length)

console.log(\'start\')

// 渲染之后
setTimeout(() =