js三座大山之异步七实现宏任务的N种方式

异步编程

js三座大山之异步一单线程,event loope,宏任务&微任务
js三座大山之异步二异步方案
js三座大山之异步三promise本质
js三座大山之异步四-Promise的同步调用消除异步的传染性
js三座大山之异步五基于异步的js性能优化
js三座大山之异步六实现微任务的N种方式
js三座大山之异步七实现宏任务的N种方式

js中现在有两类任务

一类是天然存在的在当前执行栈中按顺序依次执行的同步任务。

一类是为了解决单线程带来的问题引入的异步任务。

宏任务和微任务主要的区别体现在执行时机上，当事件循环每次执行完一个宏任务时，它会检查是否有微任务队列。如果有，那么在下一个宏任务开始之前，事件循环会一直执行微任务队列中的所有任务。也就是说，微任务的优先级高于宏任务，微任务会在任何新的宏任务开始之前执行，并且直至微任务被清空后才会执行下一个宏任务。

宏任务和微任务根据不同的触发方式 在执行时机上有所不同 其他并无区别。并不是说微任务执行性能好于宏任务。

微任务一般由JavaScript引擎发起。

宏任务一般由宿主环境（如浏览器或Node.js）发起。

实现异步宏任务的N种方式

MessageChannel 浏览器环境

提供了一种在不同文档（例如主线程和 worker 线程，或者不同的 iframes）之间，或者在同一文档的不同部分之间进行直接通信的方式。

MessageChannel 有两个属性，port1 和 port2，它们都是 MessagePort 类型的对象。你可以在一个地方使用 port1 发送消息，然后在另一个地方使用 port2 接收消息，反之亦然。

        const channel = new MessageChannel();
        channel.port1.onmessage = callback;
        const change = function () {
            channel.port2.postMessage(0);
        };
        change();

上面的代码中channel.port2将一个消息异步地发送到prot1端口，然后channel.port1.onmessage的回调函数会加入到宏任务队列等待执行。

requestAnimationFrame 浏览器环境

由浏览器在下一次重绘之前调用传入给该方法的回调函数。由于是和渲染帧同步的 所以可以认为是天然的宏任务。

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

// start end Promise requestAnimationFrame

计时器 node&浏览器

setTimeout 指定时间后将回调函数插入到任务队列中。

setTimeout(() => {
    console.log('setInterval')
}, 1000)

setInterval 循环指定时间后将回调函数不断的插入到任务队列中

setInterval(() => {
    console.log('setInterval')
}, 1000)

setImmediate node环境

在Node.js环境中，setImmediate函数用于将一个回调函数排入事件循环队列，它将在当前事件循环（也就是当前的宏任务）完成后，下一个事件循环开始前被执行。

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

// start end Promise setImmediate

宏任务代码总结

const macros = [{
    name: 'MessageChannel',
    test: () => {
        return (
            typeof MessageChannel !== "undefined" && typeof window !== "undefined"
        );
    },
    run: (callback: Task) => {
        const channel = new MessageChannel();
        channel.port1.onmessage = callback;
        const change = function () {
            channel.port2.postMessage(0);
        };
        change();
    },
},
{
    name: 'setImmediate',
    test: () => {
        return typeof setImmediate === "function";
    },
    run: (callback: Task) => {
        setImmediate(callback);
    },
},
{
    name: 'raf',
    test: () => {
        return (
            typeof requestAnimationFrame !== "undefined" && typeof window !== "undefined"
        );
    },
    run: (callback: Task) => {
        requestAnimationFrame(() => {
            requestAnimationFrame(callback)
        })
    }
},
{
    name: 'setTimeout',
    test: () => {
        return true;
    },
    run: (callback: Task) => {
        setTimeout(callback, 0);
    },
}]

export const macroTask = (callback: Task) => {
    const runner = macros.find((item) => item.test());
    runner && runner.run(callback);
};

github源码