乐趣区

js事件循环

任务队列

  • JS 分为同步任务和异步任务
  • 同步任务都在主线程上执行,形成一个执行栈
  • 主线程之外,事件触发线程管理着一个任务队列(包括 宏任务队列 微任务队列),只要异步任务有了运行结果,就在任务队列之中放置一个事件。
  • 一旦执行栈中的所有同步任务执行完毕(此时 JS 引擎空闲),系统就会读取任务队列,将可运行的异步任务添加到可执行栈中,开始执行

宏任务

task(又称之为宏任务),可以理解是每次执行栈执行的代码就是一个宏任务。

浏览器为了能够使得 JS 内部 task 与 DOM 任务能够有序的执行,会在一个 task 执行结束后,在下一个(macro)task 执行开始前,对页面进行重新渲染

task 主要包含:script(整体代码)、setTimeout、setInterval、I/O、UI 交互事件、postMessage、MessageChannel、setImmediate(Node.js 环境)

微任务

microtask(又称为微任务),可以理解是在当前 task 执行结束后立即执行的任务。也就是说,在当前 task 任务后,下一个 task 之前,在渲染之前。

所以它的响应速度相比 setTimeout(setTimeout 是 task)会更快,因为无需等渲染。也就是说,在某一个 macrotask 执行完后,就会将在它执行期间产生的所有 microtask 都执行完毕(在渲染前)。

microtask 主要包含:Promise.then、MutaionObserver、process.nextTick(Node.js 环境)

执行顺序

  1. 清空执行栈
  2. 清空微任务队列
  3. 取出一个宏任务队列里的事件,在执行栈执行
  4. 重复上面 2、3
  5. 等待
退出移动版