事件循环机制(event loop)

目录

前言

一、事件循环概述

二、进程和线程

三、为什么JavaScript是单线程？

四、JavaScript如何解决单线程阻塞问题？

五、JavaScript 运行机制

六、任务队列 task queue 

宏任务

微任务

总结

---

---

前言

深入了解事物的背后原理，是进阶过程中必须要做和非常重要且值得花时间的事情。

---

要作为一个合格的前端开发工程师，知道JavaScript程序的内部执行机制也是必须的，而事件循环是其中的关键概念之一，也是难点之一。异步运行机制会有一个深入的认识。

一、事件循环概述

Event Loop 即事件循环， 是JavaScript或Node为解决单线程代码执行不阻塞主进程一种机制，也就是我们所说的异步原理。

事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。

二、进程和线程

进程、线程是操作系统知识点。

工厂车间 = 进程、车间工人 = 线程

• 进程（Process）是计算机中的程序关于某数据集合上的一次运行活动，是系统进行资源分配和调度的基本单位，是操作系统结构的基础。
• 线程（英语：thread）是操作系统能够进行运算调度的最小单位。一个进程中可以并发多个线程，每条线程并行执行不同的任务。

三、为什么JavaScript是单线程？

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。

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

所以，为了避免复杂性，从一诞生，JavaScript就是单线程，这已经成了这门语言的核心特征，将来也不会改变。

为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。

四、JavaScript如何解决单线程阻塞问题？

单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。 如果排队是因为计算量大，CPU忙不过来，倒也算了，但是很多时候CPU是闲着的，因为IO设备（输入输出设备）很慢（比如Ajax操作从网络读取数据），不得不等着结果出来，再往下执行。

JavaScript语言的设计者意识到，这时主线程完全可以不管IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到IO设备返回了结果，再回过头，把挂起的任务继续执行下去。

于是，所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

五、JavaScript 运行机制

• 整体的script(作为第一个宏任务)开始执行的时候，会把所有代码分为两部分：“同步任务”、“异步任务”；

• 同步任务会直接进入主线程依次执行；

• 异步任务会再分为宏任务(进入宏任务队列) 和 微任务(进入微任务队列)。

• 当主线程内的任务执行完毕（主线程为空时），会检查微任务的任务队列，如果有任务，就进入主线程全部执行，如果没有就从宏任务队列读取下一个宏任务执行；

• 每执行完一个宏任务就清空一次微任务队列，此过程会不断重复，这就是Event Loop；

六、任务队列 task queue 

js中的队列可以叫做任务队列或异步队列，任务队列里存放各种异步操作所注册的回调，里面分为两种任务类型，宏任务(macroTask)和微任务(microTask)。

宏任务

• setInterval()
• setTimeout()
• setImmediate()
• ajax
• 事件绑定

微任务

• new Promise()后的then与catch函数
• new MutaionObserver()
• process.nextTick（Nodejs）

简单实例分析：

setTimeout(function () {
    new Promise(function (resolve, reject) {
        console.log('异步宏任务promise');
        resolve();
    }).then(function () {
        console.log('异步微任务then')
    })
    console.log('异步宏任务');
}, 0)
new Promise(function (resolve, reject) {
    console.log('同步宏任务promise');
    resolve();
}).then(function () {
    console.log('同步微任务then')
})
console.log('同步宏任务')

执行结果：

 稍复杂的实例分析：

setTimeout(() => {
    console.log('异步1任务time1');
    new Promise(function (resolve, reject) {
        console.log('异步1宏任务promise');
        setTimeout(() => {
            console.log('异步1任务time2');
        }, 0);
        resolve();
    }).then(function () {
        console.log('异步1微任务then')
    })
}, 0);
console.log('主线程宏任务');
setTimeout(() => {
    console.log('异步2任务time2');

}, 0);
new Promise(function (resolve, reject) {
    console.log('宏任务promise');
    // reject();
    resolve();
}).then(function () {
    console.log('微任务then')
}).catch(function () {
    console.log('微任务catch')
})
console.log('主线程宏任务2');

执行结果：

案列：

for (var i = 0; i < 10; i++) {
            setTimeout(() => {
                console.log(i)
            }, 1000)
        }

 结果：10个10，因为setTimeout是异步任务，会首先执行主任务。再执行异步任务。而i是全局变量。所以等异步任务执行的时候，i一直都是10

案列：

for (let i = 0; i < 10; i++) {
            setTimeout(() => {
                console.log(i)    
            }, 1000);
        }

结果：0-9，let 声明的变量会在当前的块级作用域里面（for 循环的 body 体，也即两个花括号之间的内容区域）创建一个文法环境（Lexical Environment），该环境里面包括了当前 for 循环过程中的 i。

---

总结

当前任务在执行的过程中，一个script块（作为任务队列的第一个宏任务）开始执行，当同步任务执行完毕后会立刻检查所有微任务队列中的事件，微任务事件队列执行完毕之后，再去执行宏任务队列，一个宏任务执行完毕之后，检查微任务队列是否有任务，如果有就执行微任务，如果没有执行队列中的下一个宏任务，当前宏任务队列执行完成之后在执行下一个宏任务队列