21.js事件循环(Event Loop)和任务队列(Task Queue)

144 阅读1分钟

vue阶段暂时更新完,应该有很多遗漏掉的,我后面想起来会不定时更新,接下来进入js阶段.

事件循环 eventloop

js是单线程的,js很多操作是操作dom的,如果同一时间对一个dom进行删除和增加操作是不可能的,所以同一时间只能执行一个方法. js解析引擎在执行js代码的时候,会形成对应的执行环境(执行上下文).执行上下文是按照从上到下的顺序执行,但是碰到异步任务的时候不会立即执行该事件,而是把这个任务放在与当前执行栈不同的任务队列里面.当前执行栈中的所有任务都执行完毕, 主线程处于闲置状态时,主线程会去查找事件队列是否有任务。如果有,那么主线程会从中取出排在第一位的事件,并把这个事件对应的回调放入执行栈中,然后执行其中的同步代码…,如此反复,这样就形成了一个无限的循环。这就是这个过程被称为“事件循环”的原因。

任务队列

在事件循环中我们提到,我们将异步任务放在与当前执行栈不同的任务队列里,这个任务队列包含2类,宏任务队列(macrotask queue)微任务队列(microtask queue)

宏任务

script(全部js同步代码), setTimeout, setInterval, setImmediate, I/O,UI rendering

微任务

process.nextTick(nodejs中的),Promises, Object.observe, MutationObserver

总结

执行主线程的同步任务,异步任务放在任务队列里,执行优先级 同步->执行微任务->执行宏任务

image.png