Dyfan

JS中的宏微任务和事件循环

2021-06-28

EventLoop(事件循环)

JS引擎一直等待着任务队列中任务的到来，然后加以处理,处理完继续等…循环往复,周而复始,孜孜不倦……

同步任务和异步任务

JS单线程任务被分为同步任务和异步任务,同步任务都在主线程(这里的主线程就是JS引擎线程)上执行,会形成一个执行栈

主线程之外，事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放一个事件回调

一旦执行栈中的所有同步任务执行完毕(也就是JS引擎线程空闲了),系统就会读取任务队列,将可运行的异步任务(任务队列中的事件回调,只要任务队列中有事件回调,就说明可以执行)添加到执行栈中,开始执行

任务

任务被分为两种，一种宏任务（MacroTask）也叫Task，一种叫微任务（MicroTask）

MacroTask(宏任务)

script(外层同步代码)、postMessage、setTimeout、setInterval、setImmediate(除IE10浏览器外都不支持)、I/O操作、UI渲染

MicroTask(微任务)

Process.nextTick（Node独有）、Promise、Object.observe(废弃)、MutationObserver

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
console.log('script start')

setTimeout(function() {
    console.log('timer over')
}, 0)

Promise.resolve().then(function() {
    console.log('promise1')
}).then(function() {
    console.log('promise2')
}).then(function() {
    console.log('promise3')
})

new Promise(function (resolve) {
    console.log('promise4')
 
    for (let i = 0; i < 666; i++) {
        i == 5 && resolve()
    }
}).then(function () {
    console.log('promise5')
})

Promise.resolve().then(function() {
    console.log('promise6')
}).then(function() {
    console.log('promise7')
}).then(function() {
    console.log('promise8')
})
console.log('script end')

Tags: JS
← React Native交互管理器 JS的splice()方法在for循环中使用 →
赏
使用支付宝打赏
使用微信打赏

扫描二维码，分享此文章