JS JavaScript事件循环机制

JS JavaScript事件循环机制

首先区分进程和线程

• 进程是 cpu 资源分配的最小单位（系统会给它分配内存）
• 不同的进程之间是可以同学的，如管道、 FIFO (命名管道)、消息队列
• 一个进程里有单个或多个线程
• 浏览器是多进程的，因为系统给它的进程分配了资源（ cpu 、内存）（打开 Chrome 会有一个主进程，每打开一个 Tab 页就有一个独立的进程）

浏览器的渲染进程是多线程的

GUI
JS
HTTP

事件循环机制

上图解释：

• 同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入 Event Table 并注册函数
• 当指定的事情完成时， Event Table 会将这个函数移入 Event Queue
• 当栈中的代码执行完毕，执行栈（ call stack ）中的任务为空时，就会读取任务队列（ Event quene ）中的事件，去执行对应的回调
• 如此循环，形成js的事件循环机制（ Event Loop ）

宏任务（macrotask）和微任务（microtask）

先看一段代码的执行结果：

console.log('script start');

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

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

执行结果： script start , script end , promise1 , promise2 , setTimeout

JS中分为两种任务类型： macrotask 和 microtask ，在 ECMAScript 中， microtask 称为 jobs ， macrotask 可称为 task

• macrotask （又称之为宏任务），可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行）

1. 每一个 task 会从头到尾将这个任务执行完毕，不会执行其它
2. 浏览器为了能够使得 JS 内部 task 与 DOM 任务能够有序的执行，会在一个 task 执行结束后，在下一个 task 执行开始前，对页面进行重新渲染 （ task ->渲染-> task ->...）

• microtask （又称为微任务），可以理解是在当前 task 执行结束后立即执行的任务

1. 也就是说，在当前 task 任务后，下一个 task 之前，在渲染之前
2. 所以它的响应速度相比 setTimeout （ setTimeout 是 task ）会更快，因为无需等渲染
3. 也就是说，在某一个 macrotask 执行完后，就会将在它执行期间产生的所有 microtask 都执行完毕（在渲染前）

分别什么样的场景会形成macrotask和microtask呢？

• macrotask ：主代码块， setTimeout ， setInterval 等（可以看到，事件队列中的每一个事件都是一个 macrotask ）
• microtask ： Promise ， process.nextTick 等

补充：在node环境下，process.nextTick的优先级高于Promise，也就是可以简单理解为：在宏任务结束后会先执行微任务队列中的nextTickQueue部分，然后才会执行微任务中的Promise部分。

总结下运行机制：

GUI
JS

如图：