Event Loop

Event Loop是一个事件循环，是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理(javascript是单线程的)

浏览器的运行机制 单线程的。会先执行（主线程）同步代码–》 然后执行微任务（promise） —》执行宏任务 （settimeout）
微任务宏任务和Dom渲染在envent loop的过程

文字总结

• 同步代码,一行一行的放在Call Stack执行
• 遇到异步,会先记录下,等待时机(定时、网络请求等)
• 时机到了,就移动到Callback Queue
• 如果all Stack为空(即同步代码执行完) Event Loop开始工作
• 轮询查找Callback Queue,如有则移动到Call stack执行
• 然后继续轮询查找(像永动机一样)

当你往外拿的时候先从微任务里拿这个回调函数，然后再从宏任务的queue拿宏任务的回调函数

• js是单线程的、而且和Dom渲染共用一个线程

• js执行的时候、得留一些时机供dom渲染

• event loop是每次轮训结束之后 即同步任务执行完

• 都会Dom渲染的机会,dom结构如有改变则重新渲染然后再去触发下一次Event Loop

promise初始化的时候传入的resolve函数会立即执行 这里属于同步代码 放在主线程里面then属于微任务

setTimeOut(()=>{
    Console.log(’semi')
},0)
let oP = new Promise((res, rej) => {
      console.log(1);
      res(3)
    });
    oP.then((res) => {
      console.log(res);
    });
    console.log(2);

promise本身是同步的

promise的回调then是异步的

执行的结果1，2，3,semi

因为then是异步的，所以先打印了2，最后再执行回调打印出3

1. JavaScript 引擎总是先执行同步代码，然后在执行异步代码（同步先行，异步靠后）
2. 微任务的优先级高于宏任务
3. 微任务可以在 Event Loop 中插队

执行顺序 console—》执行微任务（promise、process.nextTick、async/await） —》执行宏任务 （settimeout、setInterval）

宏任务和微任务

• 宏任务:setTimeout、setIntercal、Ajax、Dom事件

• 微任务:Promise、async/await

• 微任务执行时机比宏任务要早(同步–异步(微任务–宏任务))

宏任务微任务和dom渲染的关系

• 宏任务:Dom渲染后触发、如setTimeout (可以用alert测试 因为alert可以阻塞)

• 微任务:Dom渲染前触发,如promise

(执行顺序:微任务—Dom渲染—宏任务然后开始新的一轮轮询)

为什么执行顺序不一样?

因为微任务是ES6规定的、宏任务是由浏览器规定的,所以存放的地方不一样

await后面函数是立即执行的 可以看作同步!await下面是可以看作then里的数据 属于微任务
执行顺序

• 先执行同步

  • 第一步:script start
  • 第二步:async1 start
  • 第三步:async2
  • 第四步:promise1
  • 第五步:script end

• 执行微任务

  • 第六步:async1 end
  • 第七步:promise2
  • 隐藏步骤是渲染dom

• 执行宏任务

  • 第八步 执行setTimeout

​