js-事件循环机制

79 阅读2分钟

js是单线程的。

什么意思呢?

同一时间只能做一件事。如:你现在有二件事,新增dom和删除dom。它只能先新增在删除,不能同时执行二个操作。

单线程的缺点在于会阻塞渲染,然后就衍生了同步代码和异步代码

什么叫同步代码和异步代码

同步代码:如cosole.log(1)。这种立即给到js引擎执行的,原地等待结果的

异步代码:settimeout,ajax,promise里的then和catch。

给到浏览器/node,不用原地等待结果,不阻塞主线程继续往下执行。

但是es5之后有了promise,js引擎也能处理promise,发起异步任务了。

为啥会给浏览器和node呢?因为浏览器和node是多线程的,可以执行多个,不阻塞主线程。

同步代码放在执行栈中,异步代码等待时机放在任务队列中排队

事件循环:如图

执行栈执行任务完毕,会去任务队列中查看是否有异步任务,反复循环查找的过程叫事件循环

image.png

异步代码会进宏/微队列中

宏任务:settimeout,setInterval,I/O

微任务:promise.then(),Async/Await

promise相关

promise本身同步的,then/catch的回调函数是异步的。 Async/Await是异步代码,属于微任务

执行顺序:

1.先执行主线程(先执行同步代码)

2.在执行异步代码,把异步代码分为宏任务和微任务。宏任务放到宏任务消息队列中,微任务放到微任务中的消息队列中。

3.主线程执行完毕(同步代码执行完)

4.执行微任务队列,微任务执行完了

5.在执行一次宏任务,宏任务执行完了后

6.在执行宏任务中的微任务

7.一直这样循环下去。。

总结:

先执行同步代码,在执行微任务,最后在执行宏任务

如题:打印顺序?

console.log('start');

setTimeout(() => { console.log('setTimeout'); }, 0); 

Promise.resolve().then(() => { console.log('Promise'); }); 

console.log('end');

答案:

start
end
Promise 
setTimeout

相干讲解视频链接:

www.bilibili.com/video/BV1j1…

www.bilibili.com/video/BV1om…

www.bilibili.com/video/BV1G8…