目录

前言

一、事件循环概述

二、进程和线程

三、为什么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块（作为任务队列的第一个宏任务）开始执行，当同步任务执行完毕后会立刻检查所有微任务队列中的事件，微任务事件队列执行完毕之后，再去执行宏任务队列，一个宏任务执行完毕之后，检查微任务队列是否有任务，如果有就执行微任务，如果没有执行队列中的下一个宏任务，当前宏任务队列执行完成之后在执行下一个宏任务队列

事件循环机制(event loop)相关推荐

带你了解事件循环机制(Event Loop)
什么是事件循环机制? 事件循环分为两种,分别是浏览器事件循环和node.js事件循环,本文主要对浏览器事件循环进行描述. 我们都知道JavaScript是一门单线程语言,指主线程只有一个.Event ...
js 循环等待异步执行完再执行_JS异步执行机制——事件循环（Event Loop）
JS异步执行机制--事件循环(Event Loop) 本文首发地址: 前端基础 | JS异步执行机制--事件循环(Event Loop)www.brandhuang.com 先祭出一段代码,你清楚它 ...
js 异步执行_JS异步执行机制——事件循环（Event Loop）
JS异步执行机制--事件循环(Event Loop) 本文首发地址: 前端基础 | JS异步执行机制--事件循环(Event Loop)www.brandhuang.com 先祭出一段代码,你清楚它 ...
理解浏览器和nodeJs中的事件循环（Event Loop）
浏览器环境下 js 引擎的事件循环机制 js 引擎每次只能执行一个操作,而通常情况下操作又不止一个,因此这些操作会被依次放入一个队列中,js 引擎会按照队列中的顺序去执行操作,这个队列叫做执行栈. 当 ...
深入理解JavaScript的事件循环（Event Loop）一、什么是事件循环
深入理解JavaScript的事件循环(Event Loop) 一.什么是事件循环 JS的代码执行是基于一种事件循环的机制,之所以称作事件循环,MDN给出的解释为因为它经常被用于类似如下的方式来实现 ...
js异步等待完成后再进行下一步操作_彻底搞懂JS事件中的循环机制 Event Loop
我们都知道JavaScript是单线程语言,就是因为单线程的特性,就不得不提js中的同步和异步一.同步和异步所谓单线程,无非就是同步队列和异步队列,js代码是自上向下执行的,在主线程中立即执行的就 ...
事件循环（Event Loop）
目录同步任务异步任务异步任务分类例题众所周知,JS是单线程的,那么如果出现多个任务,这些任务的执行顺序是怎么样的呢?这就不得不提一下事件循环同步任务首先,我们用一个栈来表示主线程当有多 ...
python 结束循环事件,python asyncio事件循环（Event Loop)及事件循环策略(Event Loop Policy)...
1.asyncio实现了两种事件循环对象: asyncio.SelectorEventLoop:(默认使用)基于Python3.4中添加的selectors模块,它会根据OS自动选择最优的I/Omul ...
事件循环（Event Loop）相关概念及面试题
小伙伴们,看面试题前,先来看几个概念吧!!! 宏任务 (macro)task,可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行). 任务(代码) 宏 ...

事件循环机制(event loop)

前言