深入理解JS事件循环机制
同步任务和异步任务（微任务和宏任务）
JavaScript是一门单线程语言
分为同步任务和异步任务
同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。
异步任务指的是，不进入主线程、而进入”任务队列”的任务；只有等主线程任务全部执行完毕，”任务队列”的任务才会进入主线程执行。
异步任务分为宏任务和微任务
new promise()、console.log()属于同步任务
|
宏任务（macrotask） |
微任务（microtask） |
| 谁发起的 |
宿主（Node、浏览器） |
JS引擎 |
| 具体事件 |
1. script (可以理解为外层同步代码) 2. setTimeout/setInterval 3. UI rendering/UI事件 4. postMessage，MessageChannel 5. setImmediate，I/O（Node.js） |
1. Promise 2. MutaionObserver 3. Object.observe（已废弃；Proxy 对象替代） 4. process.nextTick（Node.js） |
| 谁先运行 |
后运行 |
先运行 |
| 会触发新一轮Tick吗 |
会 |
不会 |
执行过程: 同步任务 —> 微任务 —> 宏任务
- 先执行所有同步任务，碰到异步任务放到任务队列中
- 同步任务执行完毕，开始执行当前所有的异步任务
- 先执行任务队列里面所有的微任务
- 然后执行一个宏任务
- 然后再执行所有的微任务
- 再执行一个宏任务，再执行所有的微任务·······依次类推到执行结束。
3-6的这个循环称为事件循环Event Loop
事件循环是JavaScript实现异步的一种方法，也是JavaScript的执行机制
async/await （重点）
async/await 底层依然是 Promise，所以是微任务，只是 await 比较特殊。
async
当我们在函数前使用async的时候，使得该函数返回的是一个Promise对象
1
2
3
4
5
6
7
8
9
10
| async function test() {
return 1
}
function test() {
return new Promise(function(resolve, reject) {
resolve(1)
})
}
|
await
await表示等待，是右侧「表达式」的结果，这个表达式的计算结果可以是 Promise 对象的值或者一个函数的值（换句话说，就是没有特殊限定）。并且只能在带有async的内部使用
使用await时，会从右往左执行，当遇到await时， ★★★★★会阻塞函数内部处于它后面的代码，去执行该函数外部的同步代码，当外部同步代码执行完毕，再回到该函数内部执行剩余的代码★★★★★, 并且当await执行完毕之后，会先处理微任务队列的代码
示例
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
|
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
async function async1() {
console.log( 'async1 start' )
await async2()
console.log( 'async1 end' )
}
async function async2() {
console.log( 'async2' )
}
console.log( 'script start' )
setTimeout( function () {
console.log( 'setTimeout' )
}, 0 )
async1();
new Promise( function ( resolve ) {
console.log( 'promise1' )
resolve();
} ).then( function () {
console.log( 'promise2' )
} )
console.log( 'script end' )
console.log(1);
async function fn(){
console.log(2)
new Promise((resolve)=>{
resolve();
}).then(()=>{
console.log("XXX")
})
await console.log(3)
console.log(4)
}
fn();
new Promise((resolve)=>{
console.log(6)
resolve();
}).then(()=>{
console.log(7)
})
console.log(8)
console.log(1);
async function fn(){
console.log(2)
await console.log(3)
await console.log(4)
await console.log("await之后的：",11)
await console.log("await之后的：",22)
await console.log("await之后的：",33)
await console.log("await之后的：",44)
}
setTimeout(()=>{
console.log(5)
},0)
fn();
new Promise((resolve)=>{
console.log(6)
resolve();
}).then(()=>{
console.log(7)
})
console.log(8)
Promise.resolve().then(() => {
console.log(0);
return Promise.resolve(4)
}).then(res => console.log(res))
Promise.resolve().then(() => {
console.log(1);
}).then(() => {
console.log(2);
}).then(() => {
console.log(3);
}).then(() => {
console.log(5);
}).then(() => {
console.log(6);
}).then(() => {
console.log(7);
})
|
根据w3c的最新解释
- 每个任务都有一个任务类型 , 同一个类型的任务必须在一个队列也就是一共有多个队列 , 不同类型的任务可以分属不同的队列,在一个次事件循环中,浏览器可以根据实际情况从不同的队列中区出任务执行
- 浏览器必须准备好一个微队列 , 微队列中的任务优先所有其他任务执行他里面的东西 所有都要给我等 连绘制任务 都要等 就是最高优先级了
随着浏览器的复杂度急剧提升 W3C不再使用宏队列的说法
在目前chrome的实现中 至少包含了下面的队列
- 延时队列 : 用于存放计时器到达后的回调任务 , 优先级中
- 交互列队 : 用于存放用户操作后产生的事件处理任务 , 优先级高
- 微队列 : 用户存放需要最快执行的任务 优先级最高
添加任务到微队列的主要方式主要是使用 Promise、MutationObserver
1
2
3
| 例如：
Promise.resolve().then(函数)
|
任务有优先级吗？
- 任务没有优先级，在消息队列中先进先出
- 但消息队列是有优先级的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
promise.resolve().then(函数)
setTimeOut(()=>{
console.log(1);
},0)
promise.resolve().then(()=>{
console.log(2);
})
console.log(3);
|
面试题
1、如何理解 JS 的异步？
JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。
如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。
2、 阐述一下js的事件循环
事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。
3、JS 中的计时器能做到精确计时吗？为什么？
不行，因为：
- 计算机硬件没有原子钟，无法做到精确计时
- 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
- 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
- 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差
