当前位置: 首页 > news >正文

宏任务和微任务+超全面试真题

概念

微任务和宏任务是在异步编程中经常使用的概念,用于管理任务的执行顺序和优先级。

  • 宏任务:setTimeout, setInterval,I/O 操作和 UI 渲染等。
  • 微任务: Promise 回调、async/await等

微任务通常比宏任务具有更高的优先级。

执行情况

  1. 微任务会在当前宏任务执行完毕后立即执行,而宏任务则需要等待当前宏任务执行完毕后,再从宏任务队列中选择下一个宏任务执行。
  2. 微任务(Microtask) 总是在所有的 宏任务(Macrotask) 之前执行。

当一个宏任务执行完毕后,JavaScript 引擎会立即检查微任务队列,并执行所有微任务。微任务队列为空后,引擎才会继续执行下一个宏任务。

好处:
保持状态一致性:在执行微任务时,保证了所有相关的异步操作在同一个宏任务执行周期内完成。这有助于在执行下一个宏任务之前,确保应用状态的一致性和数据的完整性。

具体执行顺序

  1. 当执行脚本开始时,会先执行一个宏任务(通常是脚本本身)。
  2. 执行完当前宏任务后,检查微任务队列。
  3. 如果微任务队列不为空,则按照先进先出的顺序依次执行所有微任务,直到微任务队列为空。这意味着微任务会在下一个宏任务之前执行。
  4. 当前宏任务执行完毕后,浏览器会渲染页面更新UI。
  5. 检查是否有新的宏任务进入事件队列。如果有,则选择最早进入队列的宏任务,并执行它。如果队列为空,则继续等待新的宏任务进入队列。
    重复步骤2-5,循环执行宏任务和微任务。

面试题

题目1

console.log('1');setTimeout(function() {console.log('2');
}, 0);Promise.resolve().then(function() {console.log('3');
});console.log('4');

输出:1 4 3 2
首先打印了数字1和4,这是因为它们是同步任务。然后,微任务Promise的回调函数被添加到微任务队列中。接下来,通过setTimeout函数创建的定时器被添加到宏任务队列中。当JavaScript引擎处于空闲状态时,它会先执行微任务队列中的任务,然后再执行宏任务队列中的任务。

所以,数字3首先被打印,这是因为微任务具有更高的优先级,它会在当前任务完成后立即执行。然后,数字2被打印,这是因为宏任务需要等待一段时间,直到JavaScript引擎空闲时才会执行。

题目2

console.log('script start');setTimeout(() => {console.log('setTimeout'); // 宏任务
}, 0);Promise.resolve().then(() => {console.log('promise1'); // 微任务
}).then(() => {console.log('promise2'); // 微任务
});console.log('script end');

在这里插入图片描述

题目3

async function async1() {console.log("async1 start");await async2();console.log("async1 end");
}
async function async2() {console.log("async2");
}
console.log("script start");
async1();
console.log("script end");
// 输出顺序:
// script start
// async1 start
// async2
// script end  !!
// async1 end  !! 容易错

await async()后面的代码相当于是在.then里面执行的,所以会先执行 script end
在这里插入图片描述

题目4

console.log("Start");new Promise((resolve) => {console.log("Inside Promise");resolve();}).then(() => {console.log("Promise then");});console.log("End");

在这里插入图片描述

Promise 的回调(即 .then、.catch、.finally 里的函数)会被添加到微任务队列中,注意不是Promise的参数

题目5

console.log('Start');async function asyncFunc() {console.log('Inside async function');await new Promise((resolve) => {console.log('Inside Promise');resolve();});console.log('After await');
}asyncFunc();console.log('End');

在这里插入图片描述

题目6

  console.log("Start");async function asyncFunc() {console.log("Inside async function");await new Promise((resolve) => {console.log("Inside Promise");resolve();}).then((res) => {console.log("then");// 注意这里});console.log("After await");}asyncFunc();console.log("End");

+

题目7

 const printing = () => {console.log('A');setTimeout(() => { console.log('B'); }, 1000);setTimeout(() => { console.log('C'); }, 0);console.log('D');console.log('E');}printing();

A D E C B

题目8

 console.log(1); //setTimeout(() => {console.log(2);});const p1 = new Promise((reslove) => {console.log(3); //reslove();});p1.then(() => {console.log(4);});console.log(5); //const p2 = new Promise((reslove) => {console.log(6); //reslove();});p2.then(() => {console.log(7);});// 1 3 5 6 4 7 2

注意setTime是宏任务,所以排到后面了

题目9

 function testAsy(x) {return new Promise((resolve) => {setTimeout(() => {resolve(x);}, 3000);});}async function testAwt() {let result = await testAsy("hello world");console.log(result); // 3秒钟之后出现hello worldconsole.log("cuger"); // 3秒钟之后出现cug}testAwt();console.log("cug"); //立即输出cug

题目10

   console.log("script start");let promise1 = new Promise(function (resolve) {console.log("promise1");resolve("resolve!"); // 注意这里console.log("promise1 end");}).then(function (res) {console.log("promise2");console.log(res); // 注意这里});setTimeout(function () {console.log("settimeout");});console.log("script end");

在这里插入图片描述

相关文章:

宏任务和微任务+超全面试真题

概念 微任务和宏任务是在异步编程中经常使用的概念,用于管理任务的执行顺序和优先级。 宏任务:setTimeout, setInterval,I/O 操作和 UI 渲染等。微任务: Promise 回调、async/await等 微任务通常比宏任务具有更高的优先级。 执…...

针对SVM算法初步研究

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝心态决定高度,细节决定成败…...

Java中的`String`不可变性详解

在Java中,String类具有不可变性(immutable),这意味着一旦String对象被创建,它的值将无法更改。所有对字符串的修改操作(如拼接、替换等)实际上都会生成一个新的字符串对象,而不会修改…...

c# SMTP发送邮件

string from ""; string fromAlias "MIS-TC"; string[] to { "" }; string subject "问题提交"; string body sb.ToString(); string ipaddr "smtp.email.qq.com"; int port 25; string credit ""; strin…...

GPU基础 -- 并行化与阿姆达尔定律

并行化与阿姆达尔定律 并行化是将计算任务分割成多个部分,使这些部分能够在多个处理器或核心上同时运行,从而加速任务的完成时间。阿姆达尔定律(Amdahl’s Law)则揭示了并行化所能带来的加速效果的限制。 阿姆达尔定律公式 阿姆…...

Lua热更

Lua 热更 前提 Lua是轻量级,可以解释执行的编程语言、性能好 基本原则 1.场景空 代码控制物体加载释放 2.场景一个 3.节点不手动挂代码 4.AssetsBundle资源管理 5.Lua开发框架 6.调试模式、发布模式 XLua 热更框架 XLua是C#环境下Lua的解决方案 1.Lua虚拟…...

提升汽车行业软件质量:ASPICE培训的关键实践方法

ASPICE(汽车行业软件过程改进和能力确定)培训是一种针对汽车行业软件开发和维护过程的标准化培训。 该培训旨在帮助组织提高其软件开发和维护过程的质量和效率。以下是ASPICE培训的一些最佳实践方法: 1. 理解ASPICE框架:首先&…...

2024 全新智能识别 API 接口震撼登场

近年来,随着人工智能技术的快速发展,智能识别技术逐渐成为了各个领域的热门应用。在这个大背景下,2024 年的全新智能识别 API 接口横空出世,为我们的生活带来了更多的便利。本文将为大家详细介绍这个全新智能识别 API 接口&#x…...

《UniVS: Unified and Universal Video Segmentation with Prompts as Queries》要点提炼

论文来源:https://arxiv.org/abs/2402.18115 《UniVS: Unified and Universal Video Segmentation with Prompts as Queries》是2024CVPR中的一篇关于视频分割的论文, 主要内容: 论文提出了一个名为UniVS的新型统一视频分割架构&#xff0c…...

计算机毕业设计选题推荐-推拿知识互动平台-Java/Python项目实战

✨作者主页:IT毕设梦工厂✨ 个人简介:曾从事计算机专业培训教学,擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…...

基于SpringBoot+Vue+MySQL的瑜伽馆管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 本系统采用SpringBoot作为后端框架,Vue.js构建前端用户界面,MySQL作为数据库存储系统,实现了瑜伽馆的全面数字化管理。系统涵盖会员管理、课程预约、教练排班、收入统计等功能模块&#xff0c…...

【MySQL】EXPLAIN(执行计划)关键字是什么?

简介: explain是一个强大的 SQL 命令,用于分析和优化查询性能。通过查看数据库执行计划,我们可以理解查询是如何被处理的,包括表的访问顺序、使用的索引、连接类型等。这对于找到潜在的性能瓶颈非常重要。 目录 一、基本含义 二…...

Mybatis两种方式来调用sql语句

使用Mybatis时,有两种方式来调用sql语句: 方式一(直接通过Session对象调用sql语句): SqlSession sqlSession sqlSessionFactory.openSession(); User user sqlSession.selectOne("userTest.selectUser"…...

第十八节:学习统一异常处理(自学Spring boot 3.x的第五天)

这节记录下如何通过AOP方式统一处理异常拦截。 第一步: 新建一个exception包,创建一个ExcetionHandler.java(名字随意取) package cn.wcyf.wcai.exception;import cn.wcyf.wcai.common.Result; import org.springframework.web…...

flink中slotSharingGroup() 的详解

在 Apache Flink 中,slotSharingGroup() 是一个用于控制算子(operator)之间资源共享的机制。它允许多个算子共享相同的 slot(即资源容器)。Slot 是 Flink 中的资源单位,slot 共享可以提高资源利用率&#x…...

ASPF 技术介绍

...

77-java 装饰器模式和适配器模式区别

‌Java中的装饰器模式和适配器模式虽然都涉及到对象的组合和包装,但它们的应用场景和目的有所不同。‌ ‌装饰器模式的目的是在不修改原始对象的基础上,动态地添加功能或行为。‌它允许用户通过创建一个包含原始对象的包装类(装饰器&#xff…...

5. Fabric 设置画布大小

1. 设置宽度 canvas.setWidth(width)2. 设置高度 canvas.setHeight(height)3. 设置大小 canvas.setDimensions({width,height })4. 画布的缩放 canvas.on(mouse:wheel, (opt) > {const delta opt.e.deltaY // 滚轮,向上滚一下是 -100,向下滚一下…...

240912-通过Ollama实现网站知识总结

A. 最终效果 B. 准备工作 报错: USER_AGENT environment variable not set, consider setting it to identify your requests.-CSDN博客 C. 完整代码 # https://coreyclip.github.io/Ollama-Web-Summaries/import os os.environ[USER_AGENT] Mozilla/5.0 (Windows NT 10.…...

Debian 包管理工具apt使用

apt基本用法 apt(Advanced Package Tool)是Debian及其衍生发行版(如Ubuntu、Linux Mint等)中非常强大的软件包管理系统。它允许用户从远程仓库安装、更新、升级、配置和卸载软件包。除了我们已经讨论过的卸载软件包的功能外&…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...

visual studio 2022更改主题为深色

visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解(7大核心步骤实战技巧) 一、爬虫完整工作流程 以下是爬虫开发的完整流程,我将结合具体技术点和实战经验展开说明: 1. 目标分析与前期准备 网站技术分析: 使用浏览器开发者工具(F12&…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...

今日科技热点速览

🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售,主打更强图形性能与沉浸式体验,支持多模态交互,受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下,企业和个人创作者为了扩大影响力、提升传播效果,纷纷采用短视频矩阵运营策略,同时管理多个平台、多个账号的内容发布。然而,频繁的文案创作需求让运营者疲于应对,如何高效产出高质量文案成…...