javascript的微任务和宏任务,以及其执行顺序

一、JS是单线程的,但是为什么会有同步异步的存在呢?因为JS中有非常关键的一块,Event Loop。

Event Loop是一个程序结构,用于等待和发送消息和事件。

简单的说,就是在程序中(不一定是浏览器)中跑两个线程,一个负责程序本身的运行,作为主线程; 另一个负责主线程与其他线程的的通信,被称为"Event Loop 线程" 。 每当遇到异步的 setTimeOut ,setInterval 这些异步任务,交给 EventLoop 线程,然后自己往后运行,等到主线程运行完后,再去 Event Loop 线程拿结果。

二、JS的异步分为:宏任务和微任务

在JavaScript中,任务可以分为宏任务和微任务两种类型。宏任务是指需要在任务队列中排队执行的任务,而微任务是指在当前任务执行结束后立即执行的任务。

2.1 常见的宏任务

script(整体代码)、setTimeout、setInterval、setImmediate(Node.js独有)、I/O操作、UI渲染等。

2.2 常见的微任务

Promise.then()、MutationObserver、process.nextTick(Node.js独有)等。

2.3 简单的例子

javascript 复制代码
console.log('1');


setTimeout(() => {

    console.log('2');

    Promise.resolve().then(() => {
        console.log('3')
    });

});


Promise.resolve().then(() => {
    console.log('4')
});


console.log('5');

输出结果为:1 5 4 2 3

三、JS执行流程

  1. 主线程读取JS代码,此时为同步环境,形容对应的堆和执行栈

  2. 主线程遇到异步任务,会推给异步线程进行处理

  3. 异步进程处理完毕,将对应的异步任务推入任务队列

  4. 主线程查询任务队列,执行微任务,将其按照顺序执行,全部执行完毕

  5. 主线程查询任务队列,执行宏任务,取的第一个宏任务,执行完毕

  6. 重复以上4,5步骤

四、看你学会了没

javascript 复制代码
Promise.resolve().then(() => {
    console.log("1");

    setTimeout(() => {
        console.log("2")
    }, 0)
})


setTimeout(() => {
    console.log("3")

    Promise.resolve().then(() => {
        console.log("4")
    })
}, 0)


console.log("5")

答案在下方☺

五、看看你做对了没

输出结果为:5 1 3 4 2

相关推荐
太阳的后裔2 小时前
随笔一些用C#封装的控件
开发语言·c#
tianyuanwo2 小时前
Rust语言组件RPM包编译原理与Cargo工具详解
开发语言·网络·rust·rpm
dy17174 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
CodeCraft Studio7 小时前
PDF处理控件Aspose.PDF教程:使用 Python 将 PDF 转换为 Base64
开发语言·python·pdf·base64·aspose·aspose.pdf
零点零一7 小时前
VS+QT的编程开发工作:关于QT VS tools的使用 qt的官方帮助
开发语言·qt
2501_915918418 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂8 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技8 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip8 小时前
JavaScript二叉树相关概念
前端
lingchen19069 小时前
MATLAB的数值计算(三)曲线拟合与插值
开发语言·matlab