JavaScript面试题-宏任务与微任务？

最新推荐文章于 2024-04-27 10:15:30 发布
最新推荐文章于 2024-04-27 10:15:30 发布
阅读量851 收藏 1
点赞数
分类专栏： 面试题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44486539/article/details/103155489
版权

宏任务&微任务

macro-task(宏任务)：

  • 包括整体代码script，setTimeout，setInterval

  • 宏任务所处的队列就是宏任务队列

  • 宏任务队列可以有多个

micro-task(微任务)：

  • new Promise.then(回调)，process.nextTick

  • 微任务所处的队列就是微任务队列

  • 只有一个微任务队列

  • 在上一个宏任务队列执行执行完毕后，如果有微任务队列就会执 行微任务队列中的所有微任务

  • 当宏任务队列的中的任务全部执行完以后，会查看是否有微任务队列，如果有先执行微任务队列中的所有任务，如果没有就查看是否有下一个宏任务队列重复执行之前的执行步骤。

在这里插入图片描述

// 主线程（宏任务队列）

console.log('==== start ====')

// 第二个宏任务
setTimeout(function () {
   
    console.log('定时器'<
最低0.47元/天 解锁文章
蓬莱老仙
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
宏任务和微任务、事件循环、面试题
小陈的博客
08-30 1636
事件循环比较简单，它是一个在 “JavaScript 引擎等待任务”，"执行任务"和"进入休眠状态等待更多任务"这几个状态之间转换的无限循环。
js中的微任务和宏任务，附面试题
weixin_45932460的博客
01-12 1863
因为javascript是一门单线程语言，所以代码的解析执行都要以自上而下的执行，直到任务队列（task queue）的出现，js开始有了异步任务，当一段代码需要稍后执行时，便可以使用异步方案（setTimeout、setInterval、Poromis、Axios、Dom事件）来使指定操作添加到异步任务中。
前端面试必考题：JavaScript事件循环(Event loop)、宏任务微任务
最新发布
2401_84447417的博客
04-27 609
1.2.3.
浅谈宏任务、微任务（附带面试题）
qq_42546585的博客
11-24 2061
浏览器事件循环
javaScript基础面试题 ---宏任务微任务
weixin_43850639的博客
03-06 621
JS是单线程语言，先执行同步任务，再执行事件循环，事件循环里面包括微任务、宏任务。微任务执行了完了之后，才执行宏任务。微任务：Promise.then。宏任务：setTimeout
一道经典的宏任务和微任务题目（javascript）
慢慢爬的虫的博客
03-16 368
前端笔试题，输出结果顺序
1.JavaScript面试真题-210页.zip
02-28
- 事件循环（Event Loop、微任务与宏任务） - this与原型链 - 模块系统（CommonJS、ES模块） - 类与继承（class关键字、super关键字、构造函数、继承链） - 原型与原型链（__proto__、Object.getPrototypeOf） ...
前端大厂最新面试题-event_loop.docx
06-06
事件循环、宏任务、微任务、async/await 事件循环是 JavaScript 实现单线程非阻塞的方法，所有任务...事件循环、宏任务、微任务、async/await 是 JavaScript 实现异步编程的关键机制，理解这些概念是前端开发的基础。
前端大厂最新面试题-singfor.docx
06-06
4. Event Loop、宏任务与微任务的概念：Event Loop 是 JavaScript 的执行机制，宏任务是指通过 `setTimeout` 或 `setInterval` 创建的任务，而微任务是指通过 `Promise` 或者 `MutationObserver` 创建的任务。...
前端大厂最新面试题-baidu.docx
06-06
4. 浏览器事件循环：浏览器事件循环是指浏览器中异步事件的处理机制，包括宏任务和微任务两种类型。 三、高级 JavaScript 知识点： 1. 实现树状图页面：可以使用 JavaScript 库如 D3.js 或者 ECharts 来实现树状图...
JavaScript面试题
08-13
JavaScript面试题涵盖了许多核心概念，包括闭包、原型与原型链、ES6的新特性以及数组排序和事件轮询。下面是对这些知识点的详细说明： 1. **闭包**： 闭包是一种特殊的作用域机制，它允许一个函数访问并操作其外部...
关于JavaScript的宏任务和微任务的理解（面试题）
读心悦
04-26 4866
写出下列代码打印的顺序： setTimeout(() => { console.log(4); }, 0); new Promise(resolve=>{ console.log(1); for(let i =0;i<10000;i++){ ...
宏任务和微任务的一道经典面试题~
王飞
03-28 8578
async function async1 () { console.log('async1 start'); await async2(); console.log('async1 end') } async function async2 () { console.log('async2') } console.log('script start'...
浅谈JS的微任务和宏任务(附加面试题)
qq_51558433的博客
02-18 1074
Event Loop 因为JS是单线程，就是说，同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为，防止主线程的不阻塞，Event Loop 的方案应用而生。 掌握知识点 JS分为同步任务和异步任务 同步任务都在主线程上执行，形成一个执行栈 主线程外，事件触发线程管理者异步任务 一旦执行栈中的所有同步任务执行完毕（此时JS处于空闲），系统就会读取异步任务，将异步任务添加到执行栈中，开始执行 宏任务（macrotask） 这里我们需要记住，浏览器为了能够使得JS内部(macr
宏任务与微任务 高频面试题
weixin_44718825的博客
11-26 1671
首先我们先来看一段代码，看一下代码的执行顺序。 setTimeout(() => { console.log('setTimeout') },0); Promise.resolve().then(() => { console.log('promise'); Promise.resolve().then(() => { console.log('promise2'...
JS面试——宏任务与微任务
weixin_46560512的博客
08-23 323
JavaScript的宏任务与微任务1.问题的由来2.JavaScript的宏任务与微任务2.1promise的使用方法2.2async与await的使用方法3.面试题实战分析参考文献 1.问题的由来     我相信，你也曾遇到了如下疑惑：     当时，我是直接背下来，先执行console.log再执行setTimeout函数内部代码。如今，觉得在前端混了一些时间了，不太懂的问题还是得搞懂，拖得越久和大佬们的差距也就越大。     其实这个本质是由于JavaScript采用单线程的设计模式，代码执行有一
前端学习（1839）：前端面试题之宏任务和微任务
歌谣的博客
08-03 1106
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript" src="main.js"></script> </body> </html&g
前端面试题：宏任务和微任务
qq_46582421的博客
01-05 1056
宏任务：setTimeout,setInterval,DOM事件，Ajax请求 DOM渲染 微任务：Promise,async/await 顺序:微任务 < DOM渲染 < 宏任务 总结：微任务的执行时机比宏任务早 代码： <script type="text/javascript"> console.log(1); //宏任务 setTimeout(() => { console.log(2); },0); //微任务 Promis
面试之事件循环（消息队列）、宏任务、微任务、async、await原理，事件机制
weixin_43845137的博客
02-08 1361
目录面试之宏任务、微任务、async、await原理消息队列之宏任务、微任务消息队列示例1消息队列示例2消息队列3消息队列4async与await的原理多个异步嵌套es6 之 使用yield 的方式es7 之 async 与 await的简写 面试之宏任务、微任务、async、await原理 消息队列之宏任务、微任务 1：JS引擎执行任务的时候是单线程的，也就是说一条流水线下来执行 2：优先执行同步任务，异步任务放置在消息队列之中 3：消息队列分为两种，宏队列（宏任务），微队列（维任务） 4
宏任务和微任务面试题
08-23
好的，下面是一个宏任务和微任务相关的面试题。 1. 什么是宏任务和微任务？ 答：宏任务和微任务是 JavaScript 引擎用来管理异步任务的两种机制。 宏任务指的是在 JavaScript 引擎中排队等待执行的任务，这些任务通常是由浏览器或 Node.js 等宿主环境提供的，如定时器、事件回调等。 微任务指的是在当前任务执行完毕后需要立即执行的任务，这些任务通常是由 Promise 和 MutaionObserver 提供的，如 Promise.then()、Promise.catch()、Promise.finally() 和 MutationObserver。 2. 宏任务和微任务的执行顺序是怎样的？ 答：宏任务和微任务执行顺序是不同的，它们都有自己的队列，而且微任务的优先级比宏任务高。 当一个宏任务被执行时，会先执行完所有的微任务，然后再继续执行下一个宏任务。如果在执行微任务的过程中产生了新的微任务，那么这些新的微任务会被插入到当前微任务队列的末尾，等待下一次执行。 举个例子：假设当前有一个宏任务 A，它包含三个微任务 X、Y 和 Z。当宏任务 A 被执行时，会先执行微任务 X，然后执行微任务 Y，最后执行微任务 Z，如果在执行微任务 Y 的过程中又产生了一个新的微任务 W，那么它会被插入到当前微任务队列的末尾，等待下一次执行。 3. 如何利用宏任务和微任务实现异步操作？ 答：可以使用 Promise 和 async/await 来利用宏任务和微任务实现异步操作。 例如，使用 Promise 来发起一个异步请求： ```javascript function fetchData() { return fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console.log('data:', data); }) .catch(error => { console.error('error:', error); }); } ``` 在这个例子中，fetchData 函数返回一个 Promise 对象，当这个 Promise 对象被 resolve 时，会执行一系列的微任务，包括打印数据到控制台。如果发生错误，会执行一个 catch 微任务。 另外，可以使用 async/await 来简化异步操作： ```javascript async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log('data:', data); } catch (error) { console.error('error:', error); } } ``` 这个例子中，使用 async/await 来编写异步代码，fetchData 函数会等待 fetch 请求的结果，在结果返回后再执行后续操作。如果发生错误，会抛出一个异常，可以通过 try/catch 块来处理。在执行 async 函数时，会创建一个微任务队列来管理异步操作，确保异步操作的执行顺序正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值