一、JS单线程
众所周知,JavaScript语言的一大特点单线程。JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?
所以,为了避免复杂性,单线程成了这门语言的核心特征 !!
二、JS事件循环机制(event loop)
JavaScript 引擎创建了执行上下文栈来管理执行上下文。可以把执行上下文栈(call stack)认为是一个存储函数调用的栈结构,遵循先进后出的原则。
上图为事件循环机制图,流程如下:
- 所有同步任务排队在主线程上执行,形成相应的堆和执行栈(call stack)
- 如果遇到异步操作,交给浏览器模块异步进程进行处理(WEB API)
- 异步进程处理完毕(DOM事件触发、Ajax返回、Timer出发等),将相应的异步回调事件任务推入任务队列(callback queue)
- ”执行栈”中的所有同步任务执行完毕,系统就会读取”任务队列”,按队列顺序进入执行栈,开始执行
- 重复执行前面的步骤,称为事件循环(event loop)
三、任务队列
上图的任务队列属于同一类型任务,根据队列顺序依次在“执行栈”中执行。如果存在不同类型,执行顺序会按照优先级依次执行。
任务类型:
macrotasks(宏任务): setTimeout, setInterval, setImmediate, I/O, UI rendering
microtasks(微任务): process.nextTick, Promise, MutationObserver
上述我们知道,setTimeout是’宏任务’,Promise是‘微任务’
通过上图我们可以看出:宏任务的优先级高于微任务,每一个宏任务执行完毕都必须将当前的微任务队列清空,如果队列中还存在宏任务,依次执行
四、案例
<script>
console.log(1)
setTimeout(() => {
console.log(2)
},0)
new Promise((resolve,reject) => {
console.log(3)
resolve()
}).then(res => {
console.log(4)
})
console.log(5)
</script>
以上代码会输出:1 3 5 4 2
为什么不应该是:1 3 5 2 4
分析:
- script 执行第一次宏任务
- 首先同步执行,输出1
- 遇到setTimeout 回调 扔到队列 macrotasks(宏任务)第二次宏任务中
- 同步执行Promise,输出3,回调 then 扔到队列 microtasks(微任务)中
- 最后同步执行,输出5
- 第一次宏任务执行完毕,执行微任务 Promise then 回调,输出4
- 最后执行第二次宏任务,setTimeout 回调 输出2