Event loop事件循环(一文带你了解 宏任务,微任务与主线程的区别)

在javaScript中,主线程负责处理代码的执行和页面的渲染,当代码执行时,它会形成一些任务,这些任务分为两种类型,宏任务和微任务。
这些任务按照执行顺序放入到任务队列中,主线程会不断取出任务并且执行

先来看一张图

在这里插入图片描述
Stack:主程序
background threads : 异步对象
Task Queue: 任务队列
Microtask Queue : 微任务队列

事件执行顺序:

主程序,微任务,宏任务(回调函数)。
当主程序执行完毕,开始事件循环 进入微任务队列 执行微任务,当微任务执行完毕之后,执行回调队列里面的回调函数。

主程序

从上到下依次执行的顺序。

function a(){
    
    
	consolo.log("a")
}
console.log("b")
a();

回调队列 (宏任务)

执行过程中如果遇到异步调用的语句,这些异步调用的语句就会在外面创建 异步对象,因为异步调用暂时不执行只创建不执行
异步对象执行时机 :都不能立刻进入主程序执行,都要进入js的回调队列/任务队列等待执行

setTimeout 定时器:定时器等待时间结束,回调函数自动执行。

xhr.onreadystatechange:当响应结果回来时自动执行。

微任务队列

  1. process.nextTick()
    nodejs中的 比Promise.then(优先级更高)

  2. Promise.then()
    所有Promise.then( ) 中的回调函数都会放入微任务队列中等待执行,都会比回调函数提前执行。

事件循环

当主程序执行完毕,然后进入微任务队列执行微任务,当微任务执行完毕之后,执行回调队列。

Promise

直接写在new Promise 中的代码属于主程序,立刻执行。

let p = new Promise(resolve=>{
    
    
	console.log("b") //主程序 立刻执行
	resolve(); //自动调用.then()中的代码
})
p.then(()=>{
    
    console.log("f")}) //微任务回调
p.then(()=>{
    
    console.log("f")}) //微任务回调

猜你喜欢

转载自blog.csdn.net/qq_43198727/article/details/127633637