悬赏贴-关于EventLoop事件循环机制的疑问

71 阅读1分钟

异步任务是什么时机放到异步微任务队列或者宏任务队列中的?

OIobvurlzO.jpg

  • js引擎线程也叫主线程么?主线程就是渲染进程中的主线程么?有渲染主线程这个说法么?
  • 同步代码
  • WebApi是什么?定时器、dom事件监听、fetch、xmlhttprequest是WebApi么?
  • 任务监听队列?为啥是队列;队列先进先出,但是监听异步任务的是否可执行,当可执行的时候,就会取出来放到异步微任务队列或者宏任务队列中,用队列也不方便取啊?
  • 任务监听容器?

Promise.then

l9cfcdBcpV.jpg

  • promise.then是什么调用?执行为excutor里面的同步代码,才会执行promise.then么?

image.png

  • Promise.resolve()返回一个新的promise1
  • Promise.resolve()里面可以是null、undefined、function、async function、等
  • Promise.resolve(1).then(onFullfilled,onRejected)会等Promise.resolve(1)返回的promise1的状态和value;value会传给onFullfilled

cJtw1E5PaX.jpg

  • promise.then微任务是在页面GUI渲染任务之前清空并执行
  • js执行线程和GUI渲染线程是互斥的
  • 在浏览器的每一帧中GUI渲染任务是在js执行的后面
//// ----原生的promise中 会判断如果返回的是一个promise,那么会给这个promise在产生一个微任务------  
Promise.resolve()  
.then(() => {  
console.log(0)  
return new Promise((resolve) => {  
resolve("a")  
}) // x resolvePromise会调用x.then()  
//return Promise.resolve('a')  
})  
.then((res) => {  
console.log(res)  
})  
Promise.resolve()  
.then(() => {  
console.log(1)  
})  
.then(() => {  
console.log(2)  
})  
.then(() => {  
console.log(3)  
})  
.then(() => {  
console.log(4)  
})  
.then(() => {  
console.log(5)  
})  
// 微任务队列 [ then0 then1, Promise.resolve 产生的then,then2,then('空的'),then('a'),then3]  
  
// 0 1 2 a 3 4 5

async&await

loUYo7Cvyx.jpg

  • async await是promise的语法糖

zgL0ZVl4dd.jpg

promise + async&await + setTimeout

miMor4HxyJ.jpg

Dom事件

2w9DsLOhBz.jpg

H5stvQOWUU.jpg

  • 为啥默认的输出 listener1 listener2 micro task1 micro task2
  • 为啥点击后就产生两个宏任务?
  • 为啥默认代码中click就同时执行了,没有宏任务了?