一、概述
JavaScript是单线程(只有一个主线程)的语言
Event Loop是JavaScript的执行机制
JavaScript的任务分为同步任务和异步任务
异步任务分为宏任务和微任务
二、几个概念:
- 同步任务(synchronous):**指在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。
- 异步任务(asynchronous):指不进入主线程、而进入"任务队列"的任务
-
宏任务(macrotask)包括:
setTimeOut 、 setInterval 、setImmediate 、 I/O 、 各种callback、UI渲染等
优先级如下:主代码块 > setImmediate >MessageChannel > setTimeOut/setInterval -
微任务(microtask):包括process.nextTick 、Promise、MutationObserver 、async(实质上也是promise)
优先级如下:
process.nextTick > Promise >MutationOberser - 任务队列(task queue/callback queue):包括1个microtask队列和1个或多个macrotask队列
三、事件循环可以简单描述为:
主代码块->微任务->宏任务->微任务->宏任务...(主代码块也是一个宏任务)
详细解释如下:
- 主代码块入栈
- 顺序执行代码块中的同步任务,遇到异步任务则交由浏览器内核的其模块处理,处理完后将异步任务的回调函数加入到任务队列中(一般不同异步任务的回调函数会放入不同的任务队列之中)
- 当函数执行栈为空时,若microtask队列中有任务则先将microtask队列中的所有微任务入栈执行,当函数执行栈为空,再从macrotask队列中取出一个宏任务入栈。
- 2~3步骤循环,直到所有任务执行完
图解如下:
四、代码实例
console.log(script start)
setTimeout(function() {
console.log('timer over')
},0)
Promise****.resolve().then(function() {
console*.log('promise1')
}).then(function() {
console.log('promise2')
})
console.log('script end')
输出结果:
// script start
// script end
// promise1
// promise2
// timer over
网友评论