zxdfe / FE-Interview

Every step counts
34 stars 1 forks source link

第17题:宏任务有哪些?微任务有哪些?Node中的事件循环和浏览器中的区别? #17

Open zxdfe opened 1 year ago

Wise-m commented 1 year ago

浏览器中 宏任务: ● script(整体代码) ● setTimeout ● setInterval ● setImmediate ● I/O ● UI render 微任务: ● process.nextTick ● Promise ● Async/Await(实际就是promise) ● MutationObserver(html5新特性) node中 宏任务: ● script(整体代码) ● setTimeout ● setInterval ● setImmediate ● I/O 操作等。 微任务: ● process.nextTick(与普通微任务有区别,在微任务队列执行之前执行) ● new Promise().then(回调)等。 浏览器事件循环与node事件循环的区别: 两者最主要的区别在于浏览器中的微任务是在每个相应的宏任务中执行的,而nodejs中的微任务是在不同阶段之间执行的。

Lsunlight commented 1 year ago

宏任务有: script、setTimeout、setInterval、setImmediate、I/O、UI Rendering 微任务有: Process.nextTick(node)、Promise、MutationObserver

执行过程中遇到的问题:

如果遇到宏任务: 将其给浏览器进行处理,处理完毕放入消息队列中排队。

如果遇到微任务:将其放到微任务队列中,依次执行,不用去排队。也就是微任务是可以"插队"的。等到微任务队列中的所有微任务全部执行完毕。才会开启下一轮事件循环。

整个的这种运行机制又称为Event Loop(事件循环)

1 浏览器中,先执行当前栈,执行完主执行线程中的任务。

2 取出Microtask微任务队列中任务执行直到清空。

3 取出Macrotask宏任务中 一个 任务执行。

4 检查Microtask微任务中有没有任务,如果有任务执行直到清空。

同一个上下文下,MicroTask微任务会比MacroTask宏任务先运行。

浏览器是先取出一个MacroTask宏任务执行,再执行MicroTask微任务中的所有任务。

Node是按照六个阶段执行,每个阶段切换时,再执行MicroTask微任务队列同个MicroTask队列下process.tick()会优于PromisesetImmdieate()和setTimeout(),如果他们在异步i/o callback之外调用(在i/o内调用因为下一阶段为check阶段),其执行先后顺序是不确定的,需要看loop的执行前的耗时情况。

YangYi-Mo commented 1 year ago

● 宏任务: ● scrtip标签 ● setTimeout/setIntever ● setImmediate (Node.js环境) ● postMessage ● MessageChannel ● 微任务: ● Promise.then.catch ● Object.observe ● MutationObserver ● process.nextTick (Node.js环境) Node中的事件循环和浏览器中的区别:

Node.js中,microtask会在事件循环的各个阶段之间执行,也就是一个阶段执行完毕,就会去执行microtask队列的任务。 ● Node端,microtask 在事件循环的各个阶段之间执行 ● 浏览器端,microtask 在事件循环的 macrotask 执行完之后执行****