js 事件循环event loop

js机制

      首先，你肯定听过js是单线程，那么你知道浏览器的工作原理么？拿我们常用的谷歌浏览器为例，首先我们要了解进程和线程的概念。

      进程：资源分配和携带的最小单位

      线程：CPU调度的最小单位，不拥有资源，线程间会共享进程的资源

 segmentfault.com/a/119000001…

当通过谷歌浏览器打开一个网页的时候，通常会有个浏览器管理的进程，控制浏览器打开不同的网页和网页前进后退等功能等，还会有GPU进程、插件进程。还一个当前页面的进程，也就是我们每打开个页面相当于创建了个进程。然后我们这个页面进程会包括很多线程

1. GUI渲染进程：负责构建DOM树和RenderObject树，布局和绘制。
2. JS引擎线程：也就是我们的v8引擎，负责处理JS脚本程序。GUI渲染进程与JS引擎线程是互斥的
   
3. 事件触发线程：定时器和http线程处理事件结束后 该线程会把它们放到事件队列里，event loop基于该线程
4. 定时触发器线程：通过定时触发器线程来计时并触发定时，计时完毕后，添加到事件队列中，等待JS引擎空闲后执行，W3C在HTML标准中规定，要求setTimeout中低于4ms的时间间隔算4ms
   
5. 异步http请求线程：XMLHttpRequest在连接后是通过浏览器新开一个线程请求，在检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中，再由JS引擎执行

    那么我们本文的主角就是js线程，js在执行时会有个一个执行栈，另外还会有事件触发线程管理的任务队列去处理异步回调的事件。任务队列分为宏任务和微任务，在执行时每次循环会执行一个宏任务，先执行宏任务中的同步事务，如果碰到微任务就会放到微任务队列中，当同步事务执行结束，微任务队列如果有事件，就会执行并清空微任务，至此这个宏任务就执行结束，然后渲染进程接着会重新渲染页面，渲染结束后会检查宏任务队列，如果仍有宏任务就去执行，这个循环就是事件循环也叫event loop。

  宏任务：script(整体代码)、setTimeout、setInterval、setImmediate、I/O、UI render

  微任务：process.nextTick（node环境）、Promise、Async/Await(实际就是                                 promise)、MutationObserver(html5新特性)

下面写个例子来看一下

结合流程图理解，答案输出为：async2 end => Promise => async1 end => promise1 => promise2 => setTimeout 但是，对于async/await ，我们有个细节还要处理一下。如下：

async/await执行顺序

console.log('script start')

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

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

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

console.log('script end')
 // 旧版输出如下，但是请继续看完本文下面的注意那里，新版有改动
// script start => async2 end => Promise => script end => promise1 => promise2 => async1 end => setTimeout作者：winty链接：https://juejin.cn/post/6844904079353708557来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

let promise_ = new Promise((resolve,reject){ resolve(undefined)})

   执行完成，执行await后面的语句，输出async1 end

• 最后，执行下一个宏任务，即执行setTimeout，输出setTimeout

注意

新版的chrome浏览器中不是如上打印的，因为chrome优化了,await变得更快了,输出为:

// script start => async2 end => Promise => script end => async1 end => promise1 => promise2 => setTimeout

console.log('script start')

async function async1() {
    await async2()
    console.log('async1 end')
}
async function async2() {
    console.log('async2 end')
    return Promise.resolve().then(()=>{
        console.log('async2 end1')
    })
}
async1()

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

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

console.log('script end')

输出为

// script start => async2 end => Promise => script end => async2 end1 => promise1 => promise2 => async1 end => setTimeout

宏任务和微任务

先看一张官网的 node 事件循环简化图：

setImmediate(() => {
    console.log('timeout1')
    Promise.resolve().then(() => console.log('promise resolve'))
    process.nextTick(() => console.log('next tick1'))
});
setImmediate(() => {
    console.log('timeout2')
    process.nextTick(() => console.log('next tick2'))
});
setImmediate(() => console.log('timeout3'));
setImmediate(() => console.log('timeout4'));

setTimeout(()=>{
    console.log('timer1')
    Promise.resolve().then(function() {
        console.log('promise1')
    })
}, 0)
setTimeout(()=>{
    console.log('timer2')
    Promise.resolve().then(function() {
        console.log('promise2')
    })
}, 0)

setImmediate(() => console.log('immediate1'));
setImmediate(() => {
    console.log('immediate2')
    Promise.resolve().then(() => console.log('promise resolve'))
});
setImmediate(() => console.log('immediate3'));
setImmediate(() => console.log('immediate4'));

nextTick 队列的执行时机变化

setImmediate(() => console.log('timeout1'));
setImmediate(() => {
    console.log('timeout2')
    process.nextTick(() => console.log('next tick'))
});
setImmediate(() => console.log('timeout3'));
setImmediate(() => console.log('timeout4'));