EventLoop 事件循环机制

什么是EventLoop?

• 浏览器协调用户操作、渲染、网络请求,硬件控制等事件源执行顺序的机制.

• 外部队列（Task Queue ），顾名思义就是 JavaScript 外部的事件的队列，这⾥我们可以先列举⼀下浏览器中这些外部事件源（Task
  Source），他们主要有：

1. DOM 操作 (⻚⾯渲染)
2. 用户交互 (⿏标、键盘)
3. 网络请求 (Ajax 等)
4. History API 操作
5. 定时器 (setTimeout 等)

• 内部队列（Microtask Queue），即 JavaScript 语⾔内部的事件队列，在 HTML 标准中，并没有明确规定这个队列的事件源，通常认为有以下⼏种：

1. Promise [ 的成功 (.then) 与失败 (.catch)
2. MutationObserver
3. 一次外部任务

image.png

console.log('1 script start');
setTimeout(function () {
    console.log('2 setTimeout');
}, 0);
Promise.resolve().then(function () {
    console.log('3 promise1');
}).then(function () {
        console.log('4 promise2');
});
console.log('5 script end');

分析

1. 第一次script 事件 console1执行 settime2加入外部队列 console5执行
2. promise3 promise4 加入js内部队列
3. 清空 promise3 promise4
4. 执行settime2 里的回调函数
5. 清空微任务...
6. 执行结果为 : 1 5 3 4 2

   setTimeout(() => {
    console.log('setTimeout1')
    // promise
   })
Promise.resolve().then(() => {
    console.log('promise1')
})
setTimeout(() => {
    console.log('setTimeout2')
})
Promise.resolve().then(() => {
    console.log('promise2')
})
Promise.resolve().then(() => {
    console.log('promise3')
})
console.log('5script end');

分析

1. 第一次执行script settime1 加入外 p1加入内 settime2加入外 p2加入内 p3.加入内 console5执行
2. 清空 js内部任务 p1 p2 p3
3. 执行settime1回调函数
4. 执行settime2
5. 执行结果 5 p1p2p3 set1 set2

浏览器和nodejs执行区别
v11 一起拿node 外部任务一次清空,,v11 以后和浏览器一样