阅读 69

event loop

前提

  1. js是单线程运行的
  2. 异步要基于回调来实现的
  3. event loop就是异步回调的实现原理

image.png

event loop过程

  1. 同步代码,一行一行放到Call Stack里面执行
  2. 遇到异步代码,先记录下,等待时机(定时,网络请求)
  3. 时间到了,移动到CallBack Queue
  4. 如果Call Stack 为空, Event loop开始工作
  5. 轮询查找CallBack Queue,如果有则移动到Call Stack 执行
  6. 然后继续轮询查找

DOM事件和 event loop

  1. js是单线程的
  2. 异步(setTimeout, ajax)使用回调,基于event loop
  3. DOM事件也是使用回调,基于event loop

宏任务和微任务

宏任务 macroTask 微任务 microTask

宏任务:setTimeout, setInterval,Ajax,DOM事件 微任务:Promise,async/await 微任务比宏任务的执行时机要早

前端所有的异步(宏微)

event loop 与 DOM渲染

回顾,event loop

  1. js是单线程的,并且和DOM渲染公用一个线程
  2. js执行的时候,需要留一定的时间给DOM渲染

image.png

Call Stack 空闲(同步代码执行完毕) ==》 尝试DOM渲染 ==》触发Event loop

微任务和宏任务的区别

  • 宏任务:DOM渲染后触发,如 setTimeout 浏览器规定的
  • 微任务:DOM渲染前触发,如 Promise ES6规定

image.png

image.png

描述event loop机制

文章分类
前端
文章标签