理解-Javascript执行机制

关于javascript

javascript是一门非阻塞单线程 语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变。所以一切javascript版的”多线程”都是用单线程模拟出来的,一切javascript多线程都是纸老虎!

事件循环 Event Loop

先认识一下 macro 和 micro

  • macro-task(宏任务):script(整体代码),setTimeout,setInterval,setImmediate ,I/O ,UI渲任务
  • micro-task(微任务):Promise,process.nextTick,Object.observe,MutationObserver

process.nextTick(callback) 类似node.js版的”setTimeout”,在事件循环的下一次循环中调用 callback 回调函数

事件循环,宏任务,微任务的关系如图所示:
事件循环执行顺序
一个完整的Event loop执行顺序大概是:

  1. 执行同步代码,这属于宏任务
  2. 执行栈为空,查询是否有微任务需要执行
  3. 执行所有微任务
  4. 必要的话渲染 UI
  5. 然后开始下一轮 Event loop,执行宏任务中的异步代码

tips:

  1. 很多人有个误区,微任务快于宏任务,其实是错误的。因为宏任务中包括了 script ,浏览器会先执行一个宏任务,接下来有异步代码的话就先执行微任务
  2. 宏任务是 一个一个执行的,而微任务是 一队一队执行的,所以我们每一次的事件循环是,执行一个宏任务,清空整个微任务队列

原文,炒鸡棒,超级好 — 这一次,彻底弄懂 JavaScript 执行机制