JavaScript执行机制

本文主要介绍JavaScript执行机制。

话不投机半句多,直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13

setTimeout(function(){
console.log('定时器开始')
});

new Promise(function(resolve){
console.log('执行Promise');
resolve();
}).then(function(){
console.log('执行then函数')
});

console.log('代码执行结束');

执行结果:

1
2
3
4
5

//"执行Promise"
//"代码执行结束"
//"执行then函数啦"
//"定时器开始"

为什么结果是这样呢?原因如下:

1同步任务和异步任务

●同步和异步任务分别进入不同的执行场所,同步的进入主线程,异步的进入Event Table并注册函数。
●当指定的事情完成时,Event Table会将这个函数移入Event Queue。
●主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行。
●上述过程会不断重复,也就是常说的Event Loop(事件循环)。

2宏任务和微任务

macro-task(宏任务):包括整体代码script,setTimeout,setInterval,setImmediate,requestAnimationFrame
micro-task(微任务):Promise,Object.observe,MutationObserver,process.nextTick

js异步有一个机制,就是遇到宏任务,先执行宏任务,将宏任务放入eventqueue,然后在执行微任务,将微任务放入eventqueue,这两个queue不是一个queue。整体script作为第一个宏任务进入主线程,当宏任务执行结束之后,查看是否有可执行的微任务,如果有就执行微任务,没有就从queue中去取下一个宏任务。

扫一扫,请老师喝水