关于前端:js系列事件循环

一、简介

javaScript 是单线程非阻塞的脚本语言。

单线程

单线程是指在执行 JavaScript 代码的时候，主线程依照程序执行。

非阻塞

非阻塞是指执行异步工作的时候，主线程会挂起工作，期待异步工作返回后果后按程序执行

事件循环

同步工作：立刻执行的工作，同步工作个别会间接进入到主线程中执行

异步工作：异步执行的工作，异步工作又分为微工作（micorotask）和宏工作（macrotack）

同步工作进入主线程，即主执行栈，异步工作进入工作队列，主线程内的工作执行结束为空，会去工作队列读取对应的工作，推入主线程执行。上述过程的一直反复就是事件循环

二、宏工作与微工作

异步工作又分为微工作（micorotask）和宏工作（macrotack）

微工作

在以后宏工作执行完结之后立刻执行的工作，执行完微工作在执行下一个宏工作。

常见的微工作：
Promise.then
Object.observe
MutationObserver
process.nextTick(ndoe 环境)

宏工作

每次执行栈执行的工作就是宏工作（包含从工作队列中获取下一个宏工作队列去执行）。

常见的宏工作：
script 代码
setTimeout
setInterval
I/O
UI 交互事件
postMessage

三、代码剖析

实例代码

console.log('script start')

async function async1() {console.log('async1 start')
  await async2()
  console.log('async1 end')
  return 'async then'
}

async function async2() {console.log('async2 end')
}
async1()

setTimeout(function() {console.log('setTimeout')
}, 0)

async1().then(function (message) {console.log(message) })

new Promise(resolve => {console.log('Promise')
  resolve()})
  .then(function() {console.log('promise1')
  })
  .then(function() {console.log('promise2')
  })

console.log('script end')

流程步骤

1、遇到 console 间接打印 'script start'
2、执行 async1，打印 console（'async1 start'），遇到 await 阻塞 async2 前面的流程。
3、执行 async2，打印 'async2 end'，async2 前面的代码留着前面执行（工作队列：async1）
4、遇到定时器，属于新的宏工作，留着前面执行（工作队列：async1、定时器）
5、执行 async1，打印出'async1 start'、'async2 end'，
6、.then 属于微工作，放入微工作队列，前面再执行（工作队列：async1、then、定时器）
7、遇到 new Promise，这个是间接执行的，打印 'Promise'
8、.then 属于微工作，放入微工作队列，前面再执行（工作队列：async1、then（async1）、then（promise）、定时器）
9、遇到 console 间接打印 'script end'

执行工作队列宏工作（async1、then、then、定时器）
1、执行 async2 前面的代码，打印 'async1 end'
2、执行 async1 async2 前面的代码，打印 'async1 end'，then 放入微工作队列
3、执行 promise 第一个 then 事件，打印 'promise1' 第二个 then 放入微工作队列
4、执行微工作队列 async1 then 事件，打印 'async then'
5、执行 promise 第二个 then 事件，打印 'promise2'
6、最初执行定时器 'setTimeout'

输入后果：

'script start'
'async1 start'
'async2 end'
'async1 start'
'async2 end'
'Promise'
'script end'
'async1 end'
'async1 end'
'promise1'
'async then'
'promise2'
'setTimeout'

四、参考文献

https://github.com/febobo/web…