js中事件循环机制

js的事件循环机制

1. 分析事件循环机制

• js是单线程语言 内部主要通过事件循环来实现单线程异步执行的

• 所有的任务(同步/异步)都在主线程上执行, 形成一个执行链

• 执行链之外有用于存储异步任务的任务队列 (准确的说是两个 分别是宏任务队列和微任务队列)

• 浏览器中也有在其他分线程执行相关的管理模块

  • 定时器管理模块
  • ajax请求模块
  • DOM事件请求模块

• js执行代码顺序为

  • 在执行链中执行初始化同步代码
  • 执行过程中如果有异步任务,则交给对应的管理模块处理, 管理模块会有特定的事件将回调函数放到任务队列中执行
  • 执行链中所有代码都执行完毕后, 会依次取出任务队列中的回调函数放到执行链中依次执行

• 宏任务

  • script标签(整体代码)
  • SetTimeout/SetInterval
  • Ajax请求
  • DOM事件监听
  • postMessage(H5新增,向其他窗口发送异步消息)
  • setImmediate(Node.js环境)

• 微任务

  • Promise.then/Prmose.catch (Promise本身是同步, then 和 catch的回调是异步)
  • Async/Await
  • process.nextTick(node环境)
  • Object.observe

总结 : 整体代码的执行顺序

1. script标签
2. 所有微队列里的微任务
3. 宏队列中的第一个宏任务
4. 所有微队列里的微任务

3-4一直循环