Wonderjar's Blog

Javascript EventLoop

2018-12-05

macrotask与microtask

macrotask和microtask在event loop中的执行有明确差别

常见的一个问题

1
2
3
4
5
6
7
8
9
10
11
12
13
console.log('script start');

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

Promise.resolve().then(function() {
console.log('promise1');
}).then(function() {
console.log('promise2');
});

console.log('script end');

microtask 微任务例如:

process.nextTick

Promise callback

Object.observe

macrotask,宏任务,例如:

setTimeout

setInterval

setImmediate

requestAnimationFrame

I/O

UI rendering

先说一个不深究就可以理解的结论,一次event loop会从microtask queue源源不断取任务执行直到microtask queue空(包括microtask执行中产生的新的microtask),一次event loop只从macrotask queue取一个任务执行,如果macrotask queue有多个任务,要依靠多次event loop才能执行完

再说一点,就要小心了,如果microtask执行时间过长,其实就把一次event loop的时间拖长了,相当于阻塞了event loop

Event Loop整体图

requestAnimationFrame