AJAX:宏任务与微任务

简介: AJAX:宏任务与微任务

异步任务划分为了


 宏任务:由浏览器环境执行的异步代码


 微任务:由 JS 引擎环境执行的异步代码


宏任务和微任务具体划分:

d91537cd9ac241c7842dd0c3a701bf7e.png

左边表格是宏任务,右边是微任务


事件循环模型

/**
 * 目标:阅读并回答打印的执行顺序
*/
console.log(1)
setTimeout(() => {
  console.log(2)
}, 0)
const p = new Promise((resolve, reject) => {
  resolve(3)
})
p.then(res => {
  console.log(res)
})
console.log(4)

执行过程:


1-JS引擎把console.log(1)放入调用栈中,执行后弹出


2-JS引擎发现setTimeout(…, 0) 是异步代码,且是宏任务,于是将它放入宿主环境(浏览器)中,执行setTimeout(…, 0),完成后放入宏任务队列中


3-JS引擎把new Promise()放入调用栈中,执行其中的console.log(3) ,然后执行其中的resolve(4), 意味着当前的Promise对象为已兑现状态,以上完成后new Promise()从栈弹出


4-JS引擎发现p.then()是同步代码,但是里面的回调函数是异步代码,而且p.then() 的回调函数是微任务,所以把它放入微任务队列中排队。执行后p.then() 出栈。


5-JS引擎把console.log(5)放入调用栈中,执行后弹出


6-此时,JS的调用栈空闲,调用任务队列中的回调函数,先调用微任务中的回调函数 console.log(result),因为微任务更接近JS引擎,推入调用栈,执行后出栈。然后调用宏任务中的console.log(2) ,推入调用栈,执行完后出栈。此时,JS的调用栈再次空闲,它会保持监视任务队列情况。


9f18498b0f82417da1d7b5a67b4750b0.png


参考:AJAX-Day04-09.微任务与宏任务_哔哩哔哩_bilibili


相关文章
|
4月前
|
前端开发 JavaScript 数据处理
理解宏任务和微任务:JavaScript 异步编程的必备知识(上)
理解宏任务和微任务:JavaScript 异步编程的必备知识(上)
理解宏任务和微任务:JavaScript 异步编程的必备知识(上)
|
4月前
|
前端开发 JavaScript UED
理解宏任务和微任务:JavaScript 异步编程的必备知识(下)
理解宏任务和微任务:JavaScript 异步编程的必备知识(下)
理解宏任务和微任务:JavaScript 异步编程的必备知识(下)
|
22天前
|
JSON 前端开发 JavaScript
JavaScript原生实现AJAX技术详解
【4月更文挑战第22天】本文详细介绍了使用原生JavaScript实现AJAX技术,包括基本原理和步骤。AJAX借助`XMLHttpRequest`对象实现异步通信,允许网页在不刷新情况下与服务器交换数据。文中提供示例展示了如何创建请求、设置回调函数、处理响应数据以及设置请求头和发送不同类型的数据。此外,还讨论了跨域问题及其解决方案,如CORS和JSONP。掌握这些基础知识对前端开发者至关重要,尽管现代框架提供了更高级的抽象。
|
4月前
|
监控 前端开发 JavaScript
Javascript宏任务与微任务以及事件循环
Javascript宏任务与微任务以及事件循环
|
5月前
|
JavaScript 前端开发 调度
(详解)js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?
(详解)js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?
59 1
|
8月前
|
前端开发 JavaScript
AJAX: 事件循环(举例细论)
AJAX: 事件循环(举例细论)
33 1
|
9月前
|
JavaScript 前端开发 调度
js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?
js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?
91 0
|
消息中间件 Web App开发 设计模式
浏览器原理 17 # 宏任务和微任务
浏览器原理 17 # 宏任务和微任务
209 0
浏览器原理 17 # 宏任务和微任务
|
JavaScript 前端开发 算法
图解 JavaScript 事件循环:微任务和宏任务
图解 JavaScript 事件循环:微任务和宏任务
179 0
图解 JavaScript 事件循环:微任务和宏任务
|
前端开发 JavaScript
JavaScript 事件循环 —— 微任务 Microtask
JavaScript 事件循环 —— 微任务 Microtask
99 0
JavaScript 事件循环 —— 微任务 Microtask