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


相关文章
|
1月前
|
JavaScript 前端开发 调度
在JavaScript中异步任务里的微任务和宏任务的特点和生命周期
在JavaScript中异步任务里的微任务和宏任务的特点和生命周期
42 0
|
6月前
|
JavaScript 前端开发 调度
(详解)js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?
(详解)js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?
111 1
|
6月前
|
监控 前端开发 JavaScript
Javascript宏任务与微任务以及事件循环
Javascript宏任务与微任务以及事件循环
|
前端开发 JavaScript
AJAX: 事件循环(举例细论)
AJAX: 事件循环(举例细论)
60 1
|
JavaScript 前端开发 调度
js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?
js中什么是宏任务、微任务?宏任务、微任务有哪些?又是怎么执行的?
291 0
|
JSON 前端开发 JavaScript
【JavaScript】Promise(一) —— 理解和使用(是什么、怎么使用、与 Ajax 配合使用、涉及的API)
【JavaScript】Promise(一) —— 理解和使用(是什么、怎么使用、与 Ajax 配合使用、涉及的API)
106 0
|
消息中间件 Web App开发 设计模式
浏览器原理 17 # 宏任务和微任务
浏览器原理 17 # 宏任务和微任务
257 0
浏览器原理 17 # 宏任务和微任务
|
XML JSON 缓存
前端必看之AJAX功能原理详解篇
jax 这个概念是由 Jesse James Garrett 在 2005 年发明的。它本身不是单一技术,是一串 技术的集合,主要有: 1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为; 2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求; 3.服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据; 4.其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其 呈现到页面上。
161 0
前端必看之AJAX功能原理详解篇
|
移动开发 前端开发 JavaScript
封装自己的Ajax函数
封装自己的Ajax函数
92 0
封装自己的Ajax函数
|
XML 前端开发 JavaScript
简述Ajax,以及使用原生js书写Ajax案例
简述Ajax,以及使用原生js书写Ajax案例
152 0