js事件轮询机制

转自：https://zhuanlan.zhihu.com/p/139210791

一、js单线程

我们都知道，js是单线程。也就是说js在同一时间只能做一件事。多线程有很多优点，为啥js不能和java一样做成多线程呢，毕竟他们的名字那么像。这是因为js可以操作DOM，试想一下如果js有多线程，其中一个线程要删除一个div，而另一个线程要给这个div添加子元素时，那到底要听哪个线程的呢？另外，虽然说像web worker等技术也赋予了js多线程的能力，但这种多线程还是有限制的，那就是不能操作DOM。一般来说，通常只是把一些比较复杂的计算放在web worker里。

二、异步与轮询

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。这样子就会引起一个很严重的问题，比方说有一个页面里有个点击事件，在用户点击后会执行一些逻辑，如果只有单线程的话，用户如果一直不点击的话，页面就被阻塞住了，什么操作都无法继续下去，这显然是不合理的。于是在js中就使用了异步，添加了一个消息队列，将一些需要等待的事件放到消息队列里，先执行那些可以直接进行的操作，之后不停的去去问消息队列，有没有任务可以执行呀，有没有任务可以执行呀。如果有的话，就把需要执行的操作取出来放到主线程里执行，如果没有的话则继续之前的操作，这也就是js的事件轮询。举个例子吧

console.log('start')

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

console.log('end')

在上述的例子中两个console是同步代码，所以直接进入主线程的执行栈中执行，setTimeout是异步代码所以放到消息队列里。在执行栈中按照代码从上到下的执行顺序，打印 start => end。执行栈中的任务全部完成后，对消息队里进行轮询，由于定时器设定的时间为0，所以会在执行栈的任务清空后立即执行，所以上述例子的打印结果为start => end => setTimeout

大致总结一下js时间轮询的过程吧

1. 所有任务都在主线程上执行，形成一个执行栈。
2. 所有任务都在主线程上执行，形成一个执行栈。
3. 如果执行栈中的所有同步任务执行完毕，js就会读取消息队列中的异步任务，如果有可以执行的任务就把他放入执行栈中并开始执行。
4. 主线程不断重复上面的第三步，这样的一个循环称为事件循环。

三、宏任务与微任务

先举个例子

console.log('script start')

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

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

console.log('script end')

根据上面所说的js的事件轮询机制很容易就可以判断出前面几个的打印结果script start => promise1 => script end（promise里的是同步代码，.then里的才是异步的），但是setTimeout里和.then的输出顺序就不好判断了。这里就要说说js事件轮询机制里的宏任务和微任务了。js将异步队列里的任务划分为宏任务和微任务

宏任务有：1)setTimeout, setInterval, setImmediate，2)I/O、3)、UI rendering等

微任务有：1)process.nextTick、2)Promise、3)Object.observe(已废弃)、4)MutationObserver(html5新特性)等

结合上述的事件轮询机制，

1、所有任务都在主线程上执行，形成一个执行栈。

2、主线程发现有异步任务，如果是微任务就把他放到微任务的消息队列里，如果是宏任务就把他放到宏任务的消息队列里。

3、执行栈所有同步任务执行完毕。

4、执行微任务队列，之后再执行宏任务队列。

5、轮询第4步。

（看过一些文章，也把同步任务视为宏任务，这时的执行就是宏任务 => 微任务 => 宏任务 => 微任务…..的循环（其实对执行顺序而言并没有差异））

现在在来看看看上面的例子吧

1、打印script start，

2、遇到setTimeout放到宏任务队列里

3、打印promise1

4、将.then回调放入微任务队列里

5、打印script end

6、执行栈已清空，执行微任务队列打印promise2

7、微任务队列已清空，执行宏任务队列setTimeOut

8、所有任务队列清空

（如果还有任务的话则继续轮询 微任务 => 宏任务 => 微任务 => 宏任务…）

 

 

转载来源：

平台：知乎

作者：坑神之王

原链接：https://zhuanlan.zhihu.com/p/139210791