JavaScript事件循环Event Loop

JavaScript是一门单线程的非阻塞的脚本语言。

• 单线程

同一时间内只能做一件事，javascript代码在执行的任何时候，都只有一个主线程来处理所有的任务。

• 非阻塞

当代码需要进行一项异步任务（无法立刻返回结果，需要花一定时间才能返回的任务，如I/O事件）的时候，主线程会挂起（pending）这个任务，然后在异步任务返回结果的时候再根据一定规则去执行相应的回调。

 

• 为什么JavaScript是单线程？

JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？

 

需要了解一些JavaScript的知识点

• 执行上下文

• 执行栈

• 任务队列（task queue）

因为JavaScript是单线程的，任务在执行的时候是自上往下的，如果遇到一个长时间得不到响应的任务，那么它就会产生阻塞的状态，这个时候任务将无法执行下去，并且因为JavaScript是浏览器端的，会给用户带来极差的用户体验。

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

异步执行的运行机制

1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
2. 主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
3. 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4. 主线程不断重复上面的第三步。

• 异步任务的分类

因为异步任务之间并不相同，因此他们的执行优先级也有区别。

不同的异步任务被分为两类：微任务（micro task）和宏任务（macro task）。

 

当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。

同一次事件循环中，微任务永远在宏任务之前执行。

 

macro-task大概包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。

micro-task大概包括: process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)

 

同步任务：

console.log(1);
alert(2)
console.log(3);

结果：1 2 3 

 异步任务：

console.log(1);
setTimeout(function(){console.log(2);},1000);
console.log(3);

 结果：1 3 2

console.log(1);
setTimeout(function(){console.log(2);},0);
console.log(3);

 结果：1 3 2

var test = document.getElementById('test')
console.log(1)
test.onclick = () => {console.log('click')}
console.log(2)

 结果：1 2 click【点击事件触发】

setTimeout(function () {
    console.log(1);
});

new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(val){
    console.log(val);
})

 结果：2 3 1

 

参考文章：

https://www.cnblogs.com/cangqinglang/p/8967268.html

https://www.jianshu.com/p/12b9f73c5a4f

http://www.ruanyifeng.com/blog/2014/10/event-loop.html

https://www.cnblogs.com/xiaohuochai/p/8527618.html

https://www.itcodemonkey.com/article/1650.html