js 任务

前言

先看一段代码

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

new Promise((resolve, reject) => {
    console.log('promise');
    resolve();
}).then(function() {
    console.log('then');
});

console.log('global');

输出: promise 、global、 then、timeout

macrotasks 和 microtasks

在 V8 实现中包含两种任务:

macrotasks

script ,setTimeout, setInterval, setImmediate, I/O, UI rendering

microtasks

process.nextTick, Promises, Object.observe, MutationObserver

执行过程如下:

js 任务

  1. JavaScript 引擎首先从 macrotask queue 中取出第一个任务
  2. 执行完毕后,将microtask queue中的所有任务取出,按顺序全部执行
  3. 浏览器进行渲染视图然后再从 macrotask queue 中取下一个
  4. 执行完毕后,再次将 microtask queue 中的全部取出;
  5. 循环往复,直到两个 queue 中的任务都取完。

注意:

  1. 从上面可以看到,microtask 会执行完毕才进行渲染,如果 microtask 执行时间教长,会导致卡顿
  2. 上面执行过程只是 chrome 的,safri 又不太一样

执行过程的示例 :
https://jakearchibald.com/201...

如何模拟 Promise.then

new MutationObserver(function() {
    console.log('mutate');
}).observe(document.body, {
    attributes: true
});
document.body.setAttribute('data-random', Math.random());


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


new Promise((resolve, reject) => {
    console.log('promise');
    resolve();
}).then(function() {
    console.log('then');
});
console.log('global');

输出: promise 、global、mutate、 then、timeout

参考文章:

相关推荐