(详解)js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?

news/2024/3/4 4:34:08

目录

参考资料

必看强烈建议十分钟看完视频 ,即可学会

必看参考详解宏任务微任务

笔记

宏任务与微任务

 定时器的任务编排

 promise的微任务处理逻辑

DOM渲染任务 

 任务队列共享内存

进度条的实现 

 任务拆分成多个任务

 promise复杂任务分割

img算同步还是异步? 


参考资料

1 宏任务与微任务_哔哩哔哩_bilibili

什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?_什么是宏任务和微任务_F N Janine的博客-CSDN博客

后盾人 宏任务微任务,任务调度流程课程笔记_哑山的博客-CSDN博客

必看强烈建议十分钟看完视频 ,即可学会

1 宏任务与微任务_哔哩哔哩_bilibili

必看参考详解宏任务微任务

什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?_什么是宏任务和微任务_F N Janine的博客-CSDN博客

笔记

宏任务与微任务

问:js是否分同步与异步?具体是什么样子的?
答:js是单线程语言,分为主线程与任务队列。同步的在主线程里执行,当主线程的任务执行完毕,会轮询任务队列里的任务,有的话拿到主线程去执行,没有的话,就不做。
问:什么是微任务与宏任务?
答:微任务也是异步队列,遵循上述的机制。但是他的优先级比宏任务高,会优先被轮询并执行。

 定时器的任务编排

问:定时器的时间在哪里计算的?
答:定时器模块里,在时间到的时候,把定时器任务(回调函数)放到任务队列里。
问:定时器的任务是时间到了立刻执行吗?或者是主线程任务执行完后才开始计时?
答:不是的,需要等到主线程里任务都执行干净后才会轮询任务队列,拿出任务并执行。并且,计时和执行任务是两部分。计时和主线程的任务无关。

 promise的微任务处理逻辑

问:promise是同步还是异步?
答:promise的构造代码是同步,里面的函数会立刻执行。但是promise的.then或者被await的部分是异步执行的,放在微任务队列里的。

DOM渲染任务 

问:DOM与JS互相阻塞么?
答:是的,DOM加载时会阻塞JS的内容。同理JS也会阻塞DOM。
问:那JS里的异步会在DOM加载后执行,还是中间就执行了?
答:既然只有一个主线程,肯定不能同时渲染DOM,没渲染完就再轮询个任务队列。所以DOM未渲染完的话,JS的任务队列应该会继续等待。

 任务队列共享内存

问:既然是两个任务队列,那任务从宏队列的任务怎么拿到主线程的变量呢?
答:这个问题问得好,因为宏任务执行的前提条件是主线程去轮询并拿到任务。而拿到任务这个过程,其实就把任务从宏队列挪到了主线程,也就在进入到主线程的环境里,就拿到了主线程的变量。

进度条的实现 

问:如何实现一个简易的进度条?
答:利用任务队列共享内存的机制。我们用一个有色长方形的当做进度条,当他的宽度不断增加时,就实现了进度条的效果。我们可以让一个函数不断的通过setTImeout调用它自己,时间在200ms左右,再定义一个计数器赋值为0。当计数器大于100时,就停止执行。
上代码

 <div class="progressBar"></div><style>.progressBar {height: 40px;background: rgb(64, 143, 33);width: 0px;color: #fff;}</style><script>let i = 0;function run() {if (i >= 100) {return;} else {i++;let dom = document.querySelector(".jindu");dom.style.width = i + "px";dom.innerHTML = i + "%";setTimeout(run, 50);}}run();</script>

 任务拆分成多个任务

问:为什么要拆分任务?
答:在js中,因为只有一个线程,如果某个任务过大的话,就会尝试阻塞其他任务,造成视觉的上卡顿,影响用户体验。
问:如何拆分任务?
答:很简单,将任务分块后扔到setTimeout里去执行就好。至于0块还是100块,看你的需求。多个任务的执行方法是递归。与上一个模块【进度条的实现】十分类似,都采用递归setTimeout自己的方法去做。 

 promise复杂任务分割

问:promise怎么分割?
答:思想和setTImeout一致,用promise把代码包起来,这样代码就到了微任务里,成了异步函数,从而无法阻塞后面的主线程的执行。

img算同步还是异步? 

图片处理有专门的模块,当下载完成后,会被放进任务队列(onload这个方法),等待主线程来轮询
ps:加载文件的模块,没有先后顺序,是谁先加载完谁先跑,先进队列。这个是队列的一大区别。 


http://www.ppmy.cn/news/61837.html

相关文章

Kubernetes 集群中某个节点出现 Error querying BIRD: unable to connect to BIRDv4 socket

1. 问题描述 Readiness probe failed: calico/node is not ready: BIRD is not ready: Error querying BIRD: unable to connect to BIRDv4 socket: dial unix /var/run/calico/bird.ctl: connect: connection refusedReadiness probe failed: 2023-05-04 22:13:23.706 [INFO]…

带你彻底理解Spark的分区

前言 我:什么是RDD? 面试者:RDD是被分区的,由一系列分区组成… … 我:你怎么理解分区? 面试者:… 我:Spark中有哪些可以实现分区的方法?分别使用的场景是什么? 面试者… 我:Spark默认分区数是多少?如何保证一个分区对应一个文件? 面试者… 我:…谢谢您的面试,回…

【Git】制造冲突以及解决冲突的详细方法

介绍 这里是小编成长之路的历程&#xff0c;也是小编的学习之路。希望和各位大佬们一起成长&#xff01; 以下为小编最喜欢的两句话&#xff1a; 要有最朴素的生活和最遥远的梦想&#xff0c;即使明天天寒地冻&#xff0c;山高水远&#xff0c;路远马亡。 一个人为什么要努力&a…

干掉Config server的两个节点之后会发生什么?

当前MongoDB集群的测试环境的架构有两个分片&#xff0c;每个分片是三个节点的副本集&#xff0c;一个mongos&#xff0c;mongoDB v4.4.20 config server也是三个节点的副本集&#xff08;configReplSet&#xff09;&#xff0c;直接停掉两个节点之后&#xff0c;关闭步骤的返…

Unity 后处理(Post-Processing) -- (3)挑战:创建局部后处理Volume

为何使用局部Volume 在前面两节中&#xff0c;我们使用了一个Global Volume来应用后处理&#xff0c;其作用范围是整个场景。有些时候&#xff0c;我们需要实现当角色靠近某个地点后&#xff0c;进行一些特殊的后处理。这时我们就需要使用Local Volume来实现这个功能。 举个例子…

手动封装一个日期处理工具类,几乎覆盖了所有的时间操作(收藏)

工具类包含以下方法&#xff1a; - stringToDate: 将字符串转换为java.util.Date类型- dateToString: 将java.util.Date类型转换为字符串- stringToLocalDateTime: 将字符串转换为LocalDateTime类型- localDateTimeToString: 将LocalDateTime类型转换为字符串- dateToLocalDat…

Apache Doris学习记录

1. Doris基础学习 中文官网:https://doris.apache.org/zh-CN/docs/dev/summary/basic-summary/ 1.1 doris 简介 Apache Doris 是一个现代化的 MPP(Massively Parallel Processing&#xff0c;即大规模并行处理) 分析型数据库产品 亚秒级响应时间即可获得查询结果 可以支持 10PB…

【嵌入式环境下linux内核及驱动学习笔记-(9-内核定时器)】

目录 1、时钟tick中断等概念2、延时机制2.1 短延时&#xff08;忙等待类--非阻塞害&#xff09;2.1.1 ndelay 忙等待延迟多少纳秒2.1.2 udelay 忙等待延迟多少微秒2.1.3 mdelay 忙等待延迟多少毫秒 2.2 长延迟&#xff1a;忙等待 &#xff08;非阻塞类&#xff09;2.2.1 time_a…

ChatGPT :国内免费可用 ChatGPT +Midjourney绘图

前言 ChatGPT&#xff08;全名&#xff1a;Chat Generative Pre-trained Transformer&#xff09;&#xff0c;美国OpenAI 研发的聊天机器人程序 &#xff0c;于2022年11月30日发布 。ChatGPT是人工智能技术驱动的自然语言处理工具&#xff0c;它能够通过理解和学习人类的语言来…

UFC718AE01 HIEE300936R0101什么是 ABB 分布式控制系统?

​ UFC718AE01 HIEE300936R0101什么是 ABB 分布式控制系统&#xff1f; 关于 ABB 类别 什么是 ABB 分布式控制系统&#xff1f; ABB 的分布式控制系统 (DCS) 旨在改变多方面、全天候 24 小时的工业流程。ABB 的控制架构持续分析和推动工厂生产力&#xff0c;最大限度地提高资产…

HTMLCSS

1、HTML 1.1 介绍 HTML 是一门语言&#xff0c;所有的网页都是用HTML 这门语言编写出来的&#xff0c;也就是HTML是用来写网页的&#xff0c;像京东&#xff0c;12306等网站有很多网页。 这些都是网页展示出来的效果。而HTML也有专业的解释 HTML(HyperText Markup Language)…

java版本工程项目管理系统平台源码,助力工程企业实现数字化管理

鸿鹄工程项目管理系统 Spring CloudSpring BootMybatisVueElementUI前后端分离构建工程项目管理系统 1. 项目背景 一、随着公司的快速发展&#xff0c;企业人员和经营规模不断壮大。为了提高工程管理效率、减轻劳动强度、提高信息处理速度和准确性&#xff0c;公司对内部工程管…

信息安全等级保护的基本概念,信息安全等级划分,等级保护测评,实施流程,所需材料

信息安全等级保护的基本概念 信息安全等级保护是国家信息安全保障的基本制度 网络安全等级保护是指对网络&#xff08;含信息系统、数据&#xff09;实施分等级保护、分等级监管。 信息系统安全等级测评是验证信息系统是否满足相应安全保护等级的评估过程。信息安全等级保护…

【自然语言处理 | Transformer】Transformer:Attention is All You Need论文讲解

Transformer由论文《Attention is All You Need》提出&#xff1a; 论文地址为&#xff1a; https://arxiv.org/pdf/1706.03762.pdf文章目录 一、Transformer 整体结构二、Transformer 的输入2.1 单词 Embedding2.2 位置 Embedding 三、Self-Attention&#xff08;自注意力机制…

2023年4月《中国数据库行业分析报告》正式发布(含精彩内容概览)

为了帮助大家及时了解中国数据库行业发展现状、梳理当前数据库市场环境和产品生态等情况&#xff0c;从2022年4月起&#xff0c;墨天轮社区行业分析研究团队出品将持续每月为大家推出最新《中国数据库行业分析报告》&#xff0c;持续传播数据技术知识、努力促进技术创新与行业生…

2.sql server数据表的管理(实验报告)

目录 一﹑实验目的 二﹑实验平台 三﹑实验内容和步骤 四﹑命令(代码)清单 五﹑运行结果 一﹑实验目的 掌握使用SQL Server管理平台和Transact-SQL语句Create table和Alter table创建和修改表的方法&#xff1b;掌握在SQL Server管理平台中对表进行插入、修改和删除数据操作…

集合练习(1)

目录 第一题 思路分析&#xff1a; 第二题 第三题 思路分析&#xff1a; 第一题 代码演示&#xff1a; 思路分析&#xff1a; 1.因为我们在打印的时候&#xff0c;是需要打印一个标题的信息即可&#xff0c;所以在使用构造器初始化的时候&#xff0c;只需要写一个带参数的…

如何在JAVA中实现面向对象编程?

在Java中&#xff0c;面向对象编程是一种重要的编程范式。它通过将现实世界中的实体抽象为类&#xff0c;将类实例化为对象&#xff0c;并通过对象之间的互动来实现软件系统的设计和实现。 以下是在Java中实现面向对象编程的一些基本概念和技术&#xff1a; 类和对象 类是一…

通俗易懂理解RDD看这一篇就够了

前言 今天面试一个大数据开发工程师,spark相关的知识感觉都能懂一点,但是连基础的RDD稍微一问深一点就不知所云,这种情况基本上是无法通过面试的,今天想用通俗的话把RDD说明白。 RDD简介 RDD(Resilient Distributed Dataset,弹性分布式数据集)是Spark中最基本的数据抽…

IDEA快捷键

文章目录 快捷键介绍重点掌握CtrlAltShiftCtrl AltCtrl ShiftAlt ShiftCtrl Shift Alt其他 快捷键介绍 重点掌握 psvmmain函数sout输出soutv带变量名输出.sout变量.调用 输出变量值.if布尔值.调用 生成if语句.for数组类型变量.for 生成for语句.var补全接收的变量&#x…
最新文章