event loop机制✔

├──图解事件循环机制
├──事件循环机制
├──macro-task和micro-task区别
├──JS中的异步操作
├──J执行栈
├──事件循环参考文档
────────────────────────────────────────────────

图解事件循环机制

• 同步任务就是按照顺序一个一个的执行任务；

• 异步任务不会占用主线程，会被塞到一个任务队列，等主线程的任务执行完毕，就会把这个异步任务队列里的任务放回主线程依次执行；

  
  
  

  js单线程浏览器中执行示例

• 下图中的stack表示我们所说的执行栈，web apis则是代表一些异步事件，而callback queue即事件队列。

浏览器环境下js引擎的事件循环机制

浏览器环境下js引擎的事件循环机制

事件循环机制

• 事件循环(event loop)：不停的检查事件队列的操作；

• 事件循环操作：当执行栈为空时，JS 引擎便检查事件队列，如果不为空的话，事件队列便将第一个任务压入执行栈中运行；

• 一次循环的执行称之为 tick，每次循环里执行的代码被称作 task；

macro-task和micro-task区别

• 异步任务被分为两类：微任务(micro task)和宏任务(macro task);

• 以下事件属于宏任务：

  1. setTimeout
  2. setInterval
  3. 只有 IE 支持的 setImmediate
  4. IndexDB 数据库操作
  5. 用户交互任务源：如鼠标键盘事件
  6. 网络任务源：如 XHR 回调
  7. history 回溯任务源：使用 history.back() 或者类似 API
  8. I/O
  9. UI rendering
  10. MessageChannel
  11. postMessage

• 以下事件属于微任务：

  1. new Promise()
  2. new MutaionObserver()
  3. Object.observe
  4. Node.js的process.nextTick(callback)

• 执行优先级上，主线程任务 > microtask > macrotask。

JS中的异步操作

1、定时器都是异步操作
2、事件绑定都是异步操作
3、AJAX中一般我们都采取异步操作（也可以同步）
4、回调函数可以理解为异步（不是严谨的异步操作）

执行栈

• 当javascript代码执行的时候会将不同的变量存于内存中的不同位置：堆（heap）和栈（stack）中来加以区分。其中，堆里存放着一些对象。而栈中则存放着一些基础类型变量以及对象的指针。
• js 在执行可执行的脚本时，首先会创建一个全局可执行上下文(globalContext)，每当执行到一个函数调用时都会创建一个可执行上下文（execution context）EC。当然可执行程序可能会存在很多函数调用，那么就会创建很多EC，所以 JavaScript 引擎创建了执行上下文栈来管理执行上下文。当函数调用完成，js会退出这个执行环境并把这个执行环境销毁，回到上一个方法的执行环境... 这个过程反复进行，直到执行栈中的代码全部执行完毕
  
  

  执行栈

事件循环参考文档

Event Loop是个什么玩意：从 Vue 的 nextTick 说起
详解JavaScript中的Event Loop（事件循环）机制
js事件循环(原理解析)
事件循环机制