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 接收消息,反之亦然。

ini 复制代码
        const channel = new MessageChannel();
        channel.port1.onmessage = callback;
        const change = function () {
            channel.port2.postMessage(0);
        };
        change();

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

requestAnimationFrame 浏览器环境

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

javascript 复制代码
console.log('start');
requestAnimationFrame(()=>{
  console.log('requestAnimationFrame')
})
Promise.resolve().then(() => {
    console.log('Promise');
});
console.log('end');

// start end Promise requestAnimationFrame

计时器 node&浏览器

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

javascript 复制代码
setTimeout(() => {
    console.log('setInterval')
}, 1000)

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

javascript 复制代码
setInterval(() => {
    console.log('setInterval')
}, 1000)

setImmediate node环境

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

javascript 复制代码
console.log('start');
setImmediate(() => {
    console.log('setImmediate');
});
Promise.resolve().then(() => {
    console.log('Promise');
});
console.log('end');

// start end Promise setImmediate

宏任务代码总结

javascript 复制代码
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源码

相关推荐
鑫宝Code9 分钟前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架
Mr_Xuhhh1 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
小曲曲3 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
EasyNTS5 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连
javascript·h.265·h.264
活宝小娜7 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点7 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript