JavaScript EventLoop

javascript 其本身是一门  单线程的  非阻塞的  脚本语言，单线程意味着，javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务，非阻塞靠的就是 event loop（事件循环）

但是浏览器确实多线程的，所以才会可以打开多个标签页，从而打开不同的页面。

Event Loop它最主要是分三部分：主线程、宏任务队列（macrotask）、微任务队列（microtask）

js的任务队列分为同步任务和异步任务，所有的同步任务都是在主线程里执行的，异步任务可能会在macrotask或者microtask里

 

 

 

 在事件循环中，每进行一次循环操作称为tick，tick 的任务处理模型是比较复杂的：分别是 Macrotask （宏任务）和 Microtask（微任务）。

主线程

其实就是进行 同步任务

宏任务队列（macrotask）包含：

setTimeout、setInterval、setImmediate、I/O、UI rendering

微任务队列（microtask）包含：

promise.then， MutaionObserver， process.nextTick(Node.js 环境)

 

执行顺序

1、先执行主线程，即同步任务

2、遇到宏任务队列（macrotask）放到宏任务队列（macrotask）

3、遇到微任务队列（microtask）放到微任务队列（microtask）

4、主线程执行完毕

5、执行微任务队列（microtask），微队任务列（micro task）执行完毕

6、执行一次宏任务队列（macro task）中的一个任务，执行完毕

7、执行微队列（micro task），执行完毕

8、依次循环。。。

 

规范：先同步，后异步， 先执行微观任务，再执行宏观任务

 

 

console.log('开始');

setTimeout(function () {

  console.log('setTimeout1');

});

new Promise(resolve => {

  console.log('Promise');

  resolve();

  setTimeout(() => console.log('setTimeout2'));

}).then(function () {
　　
  console.log('Promise Then')

})

console.log('结束');

 

我们按照步骤来分析下：

1、遇到同步代码，先打印 “开始” 。
2、遇到setTimeout异步，放入队列，等待执行 。
3、中途遇到Promise函数，函数直接执行，打印 “Promise”。
4、遇到setTimeout ，属于异步，放入队列，等待执行。
5、遇到Promise的then等待成功返回，异步，放入队列。
6、遇到同步，打印 “结束”。
7、执行完，从头开始，将异步队列中的代码，按顺序执行。有一个微观任务，then后的，所以打印 “Promise Then”，再执行两个宏观任务 “setTimeout1” “setTimeout2”。

所以，打印的顺序为：开始、 Promise、 结束 、 Promise Then、 setTimeout1、 setTimeout2.