Javascript中的宏任务与微任务

事件循环

JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为,防止主线程的不阻塞,Event Loop 的方案应用而生。Event Loop 包含两类:一类是基于 Browsing Context,一种是基于 Worker。二者的运行是独立的,也就是说,每一个 JavaScript 运行的"线程环境"都有一个独立的 Event Loop,每一个 Web Worker 也有一个独立的 Event Loop。

本文所涉及到的事件循环是基于 Browsing Context。

任务队列

根据规范,事件循环是通过任务队列的机制来进行协调的。一个 Event Loop 中,可以有一个或者多个任务队列(task queue),一个任务队列便是一系列有序任务(task)的集合;每个任务都有一个任务源(task source),源自同一个任务源的 task 必须放到同一个任务队列,从不同源来的则被添加到不同队列。setTimeout/Promise 等API便是任务源,而进入任务队列的是他们指定的具体执行任务。

在事件循环中,每进行一次循环操作称为 tick,每一次 tick 的任务处理模型是比较复杂的,但关键步骤如下:

在此次 tick 中选择最先进入队列的任务(oldest task),如果有则执行(一次)
检查是否存在 Microtasks,如果存在则不停地执行,直至清空 Microtasks Queue
更新 render
主线程重复执行上述步骤

在上诉tick的基础上需要了解几点:

JS分为同步任务和异步任务
同步任务都在主线程上执行,形成一个执行栈
主线程之外,事件触发线程管理着一个任务队列,只要异步任务有了运行结果,就在任务队列之中放置一个事件。
一旦执行栈中的所有同步任务执行完毕(此时JS引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行。

宏任务

(macro)task,可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行)。

浏览器为了能够使得JS内部(macro)task与DOM任务能够有序的执行,会在一个(macro)task执行结束后,在下一个(macro)task 执行开始前,对页面进行重新渲染,流程如下:

(macro)task->渲染->(macro)task->…
宏任务包含:

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)
微任务

microtask,可以理解是在当前 task 执行结束后立即执行的任务。也就是说,在当前task任务后,下一个task之前,在渲染之前。

所以它的响应速度相比setTimeout(setTimeout是task)会更快,因为无需等渲染。也就是说,在某一个macrotask执行完后,就会将在它执行期间产生的所有microtask都执行完毕(在渲染前)。

微任务包含:

Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)
运行机制

在事件循环中,每进行一次循环操作称为 tick,每一次 tick 的任务处理模型是比较复杂的,但关键步骤如下:

执行一个宏任务(栈中没有就从事件队列中获取)
执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)

如图:
jstask.png

实例讲解
实例1
setTimeout(function(){
     console.log('定时器开始啦')
 });
 
 new Promise(function(resolve){
     console.log('马上执行for循环啦');
     for(var i = 0; i < 10000; i++){
         i == 99 && resolve();
     }
 }).then(function(){
     console.log('执行then函数啦')
 });
 
 console.log('代码执行结束');
 //马上执行for循环啦 
 //代码执行结束 
 //执行then函数啦 
 //定时器开始啦

首先执行script下的宏任务,遇到setTimeout,将其放到宏任务的【队列】里

遇到 new Promise直接执行,打印"马上执行for循环啦"

遇到then方法,是微任务,将其放到微任务的【队列里】

打印 “代码执行结束”

本轮宏任务执行完毕,查看本轮的微任务,发现有一个then方法里的函数, 打印"执行then函数啦"

到此,本轮的event loop 全部完成。

下一轮的循环里,先执行一个宏任务,发现宏任务的【队列】里有一个 setTimeout里的函数,执行打印"定时器开始啦"

实例2
async function async1() {
    console.log( 'async1 start' )
    await async2()
    console.log( 'async1 end' )
}
async function async2() {
    console.log( 'async2' )
}
async1()
console.log( 'script start' )

//async1 start
//async2
//script start
//async1 end

一旦遇到 await 就立刻让出线程,阻塞后面的代码

等候之后,对于 await 来说分两种情况

不是 promise 对象
如果不是 promise,await会阻塞后面的代码,先执行async外面的同步代码,同步代码执行完毕后,在回到async内部,把promise的东西,作为await表达式的结果

是promise对象
如果它等到的是一个 promise 对象,await 也会暂停async后面的代码,先执行async外面的同步代码,等着 Promise 对象 fulfilled,然后把 resolve 的参数作为 await 表达式的运算结果。

如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。

实例3
       new Promise( ( resolve, reject ) => {
                console.log( "promise1" )
                resolve()
            } )
            .then( () => {
                console.log( 1 )
            } )
            .then( () => {
                console.log( 2 )
            } )
            .then( () => {
                console.log( 3 )
            } )
        new Promise( ( resolve, reject ) => {
                console.log( "promise2" )
                resolve()
            } )
            .then( () => {
                console.log( 4 )
            } )
            .then( () => {
                console.log( 5 )
            } )
            .then( () => {
                console.log( 6 )
            } )
        //1-4-2-5-3-6

先执行同步代码 promise1, promise2,此时微任务有两个任务 log(1)和log(4)

执行完log(1)和log(4)此时任务中有log(2)和log(5)两个微任务

执行log(2)和log(5)此时任务中有log(3)和log(6)两个微任务

连续的几个then()回调,并不是连续的创建了一系列的微任务并推入微任务队列,因为then()的返回值必然是一个Promise,而后续的then()是上一步then()返回的Promise的回调

实例4
setTimeout(() => console.log('setTimeout1'), 0);  //1宏任务
setTimeout(() => {								//2宏任务
    console.log('setTimeout2');
    Promise.resolve().then(() => {
        console.log('promise3');
        Promise.resolve().then(() => {
            console.log('promise4');
        })
        console.log(5)
    })
    setTimeout(() => console.log('setTimeout4'), 0);  //4宏任务
}, 0);
setTimeout(() => console.log('setTimeout3'), 0);  //3宏任务
Promise.resolve().then(() => {//1微任务
    console.log('promise1');
})

//promise1
//setTimeout1
//setTimeout2
//promise3
//5
//promise4
//setTimeout3
//setTimeout4

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/180238.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[Linux 基础] Linux使用git上传gitee三板斧

文章目录 1、使用git1.1 安装git1.2 在Gitee上创建项目1.2.1 使用Gitee创建项目1.2.2 上传本地代码到远端仓库 1.3 git上传三板斧1.3.1 三板斧第一招&#xff1a;git add1.3.2 三板斧第二招&#xff1a;git commit1.3.3 三板斧第三招&#xff1a;git push 1、使用git 1.1 安装…

01 第一个C++程序:Hello, World!

系列文章目录 01 第一个C程序&#xff1a;Hello, World! 目录 系列文章目录 文章目录 前言 二、创建项目 三、书写代码 代码逐行解释 其它细节 总结 前言 这是c入门的第一个程序。 一、配置c环境 我们要使用visual studio创建一个新的项目时&#xff0c;需要安装c, 这里我没…

大数据分析仓库Kylin

一、Kylin 定义 Apache Kylin 是一个开源的分布式分析引擎&#xff0c;提供 Hadoop/Spark 之上的 SQL 查询接口及多维分析能力以支持超大规模数据&#xff0c;最初由 eBay 开发并贡献至开源社区。它能在亚秒内查询巨大的 Hive 表。 二、Kylin 架构 A、REST Server 是应用程序…

透过一台电视,看到万家星闪

此前我们说过&#xff0c;实现万物互联的梦想&#xff0c;不仅要关注光纤、5G所打通的智能联接&#xff0c;更要关注短距传输所支撑的最后一段距离。 在咫尺之间&#xff0c;方寸之地&#xff0c;数据的传输与设备的协同依旧会遇到大量挑战。反过来说&#xff0c;一旦出现稳定、…

为企业解决设备全生命周期需求,凌雄科技凸显DaaS增长价值

企业成长离不开投资&#xff0c;但毫无疑问的是&#xff0c;投资最有价值的部分在业务。相比之下&#xff0c;诸如办公设备之类的固定资产投资&#xff0c;很容易变成企业现金流的吞噬者。从购买、运维到保养、折旧、回收&#xff0c;现代企业在越来越大的办公设备规模面前&…

利用GenericMenu创建上下文菜单或下拉菜单

使用GenericMenu 创建自定义上下文菜单和下拉菜单丰富自己的编辑器功能。 GenericMenu 介绍 变量 allowDuplicateNames 允许菜单具有多个同名的菜单项。 公共函数 AddDisabledItem 向菜单添加已禁用的项。 AddItem 向菜单添加一个项。 AddSeparator 向菜单添加一个分隔符项…

优化器的选择

优化器使用SDG和Adam的loss也不同 每个文件夹大概包含的图片&#xff1a; 在这种数量级下的图像分类优先选择SDG。

使用原生js通过ajax实现服务器渲染的简单代码和个人改进

文章目录 前文提要代码实现主要参考服务器渲染实现逻辑网页呈现效果 代码分段讲解提要html的body部分css部分js部分xhr.open函数AJAX-onreadystatechange事件function函数简写方法附件功能&#xff1a;选中行 高亮 代码全文 前文提要 本文仅做个人学习记录&#xff0c;如有错误…

数字化转型过程中面临最大的问题是什么?如何借助数字化工具实现快速转型?

在科技快速发展的时代&#xff0c;数字化转型已经成为企业的重要战略。当企业努力适应数字化时代并取得成功时&#xff0c;他们可能会面临各种必须有效应对的挑战。   数字化转型不仅仅是将新技术应用到企业的运营中&#xff0c;还需要对企业的运营方式、与客户的互动方式和价…

多篇论文介绍-可变形卷积

01 具有双层路由注意力的 YOLOv8 道路场景目标检测方法 01 摘要: 随着机动车的数量不断增加&#xff0c;道路交通环境变得更复杂&#xff0c;尤其是光照变化以及复杂背景都会干扰目标检测算法的准确性和精度&#xff0c;同时道路场景下多变形态的目标也会给检测任务造成干扰&am…

计算机视觉的应用19-基于pytorch框架搭建卷积神经网络CNN的卫星地图分类问题实战应用

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下计算机视觉的应用19-基于pytorch框架搭建卷积神经网络CNN的卫星地图分类问题实战应用。随着遥感技术和卫星图像获取能力的快速发展&#xff0c;卫星图像分类任务成为了计算机视觉研究中一个重要的挑战。为了促进这一…

使用Python的turtle模块创建一幅哆啦A梦

1.1引言&#xff1a; 在Python中&#xff0c;turtle模块是一个非常有趣且强大的工具&#xff0c;它允许我们以一个可视化和互动的方式学习编程。通过调用各种命令&#xff0c;我们可以引导turtle画出一个指定的图形。在本博客中&#xff0c;我们将使用turtle模块来绘制一幅哆啦…

UML建模图文详解教程01——Enterprise Architect安装与使用

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl Enterprise Architect概述 官方网站&#xff1a;https://www.sparxsystems.cn/products/ea/&#xff1b;图示如下&#xff1a; Enterprise Architect是一个全功能的、基于…

IDEA中注释快捷键及模板

单行注释 将光标放置于要注释所在行&#xff0c;使用 Ctrl /&#xff0c; 添加行注释&#xff0c;再次使用&#xff0c;去掉行注释 若需要将多行进行单行注释&#xff0c;只需要选中要注释的多行&#xff0c;然后使用 Ctrl /&#xff0c; 添加行注释&#xff0c;再次使用&a…

【Linux】权限理解【文件权限以及目录权限详解、以及umsk程序掩码知识详解】

权限理解 一、Linux权限的概念二、su [用户名] &#xff1a; 切换用户三、Linux权限管理文件&#xff08;一&#xff09;文件访问者的分类&#xff08;人&#xff09;&#xff08;二&#xff09;文件类型和访问权限&#xff08;事物属性&#xff09;&#xff08;1&#xff09;第…

【开源】基于JAVA的在线课程教学系统

项目编号&#xff1a; S 014 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S014&#xff0c;文末获取源码。} 项目编号&#xff1a;S014&#xff0c;文末获取源码。 目录 一、摘要1.1 系统介绍1.2 项目录屏 二、研究内容2.1 课程类型管理模块2.2 课程管理模块2…

tp8 使用rabbitMQ

php8.0 使用 rabbitmq 要使用 3.6版本以上的&#xff0c; 并且还要开启 php.ini中的 socket 扩展 php think make:command SimpleMQProduce //创建一个生产者命令行 php think make:command SimpleMQConsumer //创建一个消费者命令行 生产者代码 <?php declare (strict_ty…

SpringBoot:异步任务基础与源码剖析

官网文档&#xff1a;How To Do Async in Spring | Baeldung。 Async注解 Spring框架基于Async注解提供了对异步执行流程的支持。 最简单的例子是&#xff1a;使用Async注解修饰一个方法&#xff0c;那么这个方法将在一个单独的线程中被执行&#xff0c;即&#xff1a;从同步执…

【无标题】文本超过一行隐藏,鼠标经过显示提示框

创建一个组件专门用来出来文字的 <template><div class"tooltip-wrap"><el-tooltipref"tlp":content"text"effect"dark":disabled"!tooltipFlag":placement"placement"popper-class"tooltip…

centos查看空间使用情况

查看磁盘使用空间 df -h 查看该目录下其他目录的大小 du -sh *