首页 >> js开发 >> js代码深入分析JavaScript 事件循环(Event Loop)
js代码深入分析JavaScript 事件循环(Event Loop)
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
事件循环（Event Loop），是每个JS开发者都会接触到的概念，但是刚接触时可能会存在各种疑惑。众所周知，JS是单线程的，即同一时间只能运行一个任务。一般情况下这不会引发问题，但是如果我们有一个耗时较多的任务，我们必须等该任务执行完毕才能进入下一个任务，然而等待的这段时间常常让我们无法忍受，因为我们这段时间什么都不能做，包括页面也是锁死状态。好在，时代在进步，浏览器向我们提供了JS引擎不具备的特性：Web API。Web API包括DOM API、定时器、HTTP请求等特性，可以帮助我们实现异步、非阻塞的行为。我们可以通过异步执行任务的方法来解决单线程的弊端，事件循环为此而生。提问QAQ：为什么JavaScript是单线程的？提问QAQ：为什么JavaScript是单线程的？
多个线程表示您可以同时独立执行程序的多个部分。确定一种语言是单线程还是多线程的最简单方法是看它拥有有多少个调用堆栈。JS 只有一个，所以它是单线程语言。
将JS设计为单线程是由其用途运行环境等因素决定的，作为浏览器脚本语言，JS的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。同时，单线程执行效率高。
多个线程表示您可以同时独立执行程序的多个部分。确定一种语言是单线程还是多线程的最简单方法是看它拥有有多少个调用堆栈。JS 只有一个，所以它是单线程语言。将JS设计为单线程是由其用途运行环境等因素决定的，作为浏览器脚本语言，JS的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。同时，单线程执行效率高。1. Event Loop旧印象
1. Event Loop旧印象
大家熟悉的关于事件循环的机制说法大概是：主进程执行完了之后，每次从任务队列里取一个任务执行。如图所示，所有的任务分为同步任务和异步任务，同步任务直接进入任务队列-->主程序执行；异步任务则会挂起，等待其有返回值时进入任务队列从而被主程序执行。异步任务会通过任务队列的机制(先进先出的机制)来进行协调。具体如图所示：同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入任务队列。主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。 上述过程的不断重复就是我们所熟悉的Event Loop (事件循环)。但是promise出现之后，这个说法就不太准确了。2. Event Loop 后印象
2. Event Loop 后印象
2.1 理论2.1 理论这里首先用一张图展示JavaScript的事件循环：直接看这张图，可能黑人问号已经出现在同学的脑海。。。这里将task分为两大类，分别是macroTask（宏任务）和microTask（微任务）.一次事件循环：先运行macroTask队列中的一个，然后运行microTask队列中的所有任务。接着开始下一次循环（只是针对macroTask和microTask，一次完整的事件循环会比这个复杂的多）。这里将task分为两大类，分别是macroTask（宏任务）和microTask（微任务）.那什么是macroTask？什么是microTask呢？那什么是macroTask？什么是microTask呢？JavaScript引擎把我们的所有任务分门别类，一部分归为macroTask，另外一部分归为microTack，下面是类别划分：macroTask:macroTask:
setTimeout
setInterval
setImmediate
requestAnimationFrame
I/O
UI rendering
setTimeoutsetIntervalsetImmediaterequestAnimationFrameI/OUI renderingmicroTask:microTask:
process.nextTick
Promise
Object.observe
MutationObserver
process.nextTickPromiseObject.observeMutationObserver我们所熟悉的定时器就属于macroTask，仅仅了解macroTask的机制还是不够的。为直观感受两种队列的区别，下面上代码进行实践感知。2.2 实践以setTimeout、process.nextTick、promise为例直观感受下两种任务队列的运行方式。
console.log('main1');
process.nextTick(function() {
console.log('process.nextTick1');
});
setTimeout(function() {
console.log('setTimeout');
process.nextTick(function() {
console.log('process.nextTick2');
});
}, 0);
new Promise(function(resolve, reject) {
console.log('promise');
resolve();
}).then(function() {
console.log('promise then');
});
console.log('main2');
console.log('main1');
process.nextTick(function() {
console.log('process.nextTick1');
});
setTimeout(function() {
console.log('setTimeout');
process.nextTick(function() {
console.log('process.nextTick2');
});
}, 0);
new Promise(function(resolve, reject) {
console.log('promise');
resolve();
}).then(function() {
console.log('promise then');
});
console.log('main2');别着急看答案，先以上面的理论自己想想，运行结果会是啥？最终结果是这样的：
main1
promise
main2
process.nextTick1
promise then
// 第二次事件循环
setTimeout
process.nextTick2
main1
promise
main2
process.nextTick1
promise then// 第二次事件循环
setTimeout
process.nextTick2process.nextTick 和 promise then在 setTimeout 前面输出，已经证明了macroTask和microTask的执行顺序。但是有一点必须要指出的是。上面的图容易给人一个错觉，就是主进程的代码执行之后，会先调用macroTask，再调用microTask，这样在第一个循环里一定是macroTask在前，microTask在后。但是最终的实践证明：在第一个循环里，process.nextTick1和promise then这两个microTask是在setTimeout这个macroTask里之前输出的，这是因为Promises/A+规范规定主进程的代码也属于macroTask。主进程这个macroTask（也就是main1、promise和main2）执行完了，自然会去执行process.nextTick1和promise then这两个microTask。这是第一个循环。之后的setTimeout和process.nextTick2属于第二个循环别看上面那段代码好像特别绕，把原理弄清楚了，都一样 ~requestAnimationFrame、Object.observe(已废弃) 和 MutationObserver这三个任务的运行机制大家可以从上面看到，不同的只是具体用法不同。重点说下UI rendering。在HTML规范：event-loop-processing-model里叙述了一次事件循环的处理过程，在处理了macroTask和microTask之后，会进行一次Update the rendering，其中细节比较多，总的来说会进行一次UI的重新渲染。3. 小结
3. 小结
总而言之，记住一次事件循环：先运行macroTask队列中的一个，然后运行microTask队列中的所有任务。接着开始下一次循环。参考文献：
JavaScript Event Loop相关原理解析
深入理解事件循环机制
JavaScript运行机制
JavaScript Event Loop相关原理解析JavaScript Event Loop相关原理解析深入理解事件循环机制深入理解事件循环机制JavaScript运行机制 JavaScript运行机制 以上就是深入分析JavaScript 事件循环(Event Loop)的详细内容，关于JavaScript 事件循环(Event Loop)的资料请关注其它相关文章！
多个线程表示您可以同时独立执行程序的多个部分。确定一种语言是单线程还是多线程的最简单方法是看它拥有有多少个调用堆栈。JS 只有一个，所以它是单线程语言。
将JS设计为单线程是由其用途运行环境等因素决定的，作为浏览器脚本语言，JS的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。同时，单线程执行效率高。
多个线程表示您可以同时独立执行程序的多个部分。确定一种语言是单线程还是多线程的最简单方法是看它拥有有多少个调用堆栈。JS 只有一个，所以它是单线程语言。将JS设计为单线程是由其用途运行环境等因素决定的，作为浏览器脚本语言，JS的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。同时，单线程执行效率高。1. Event Loop旧印象
1. Event Loop旧印象
大家熟悉的关于事件循环的机制说法大概是：主进程执行完了之后，每次从任务队列里取一个任务执行。如图所示，所有的任务分为同步任务和异步任务，同步任务直接进入任务队列-->主程序执行；异步任务则会挂起，等待其有返回值时进入任务队列从而被主程序执行。异步任务会通过任务队列的机制(先进先出的机制)来进行协调。具体如图所示：同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入任务队列。主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。 上述过程的不断重复就是我们所熟悉的Event Loop (事件循环)。但是promise出现之后，这个说法就不太准确了。2. Event Loop 后印象
2. Event Loop 后印象
2.1 理论2.1 理论这里首先用一张图展示JavaScript的事件循环：直接看这张图，可能黑人问号已经出现在同学的脑海。。。这里将task分为两大类，分别是macroTask（宏任务）和microTask（微任务）.一次事件循环：先运行macroTask队列中的一个，然后运行microTask队列中的所有任务。接着开始下一次循环（只是针对macroTask和microTask，一次完整的事件循环会比这个复杂的多）。这里将task分为两大类，分别是macroTask（宏任务）和microTask（微任务）.那什么是macroTask？什么是microTask呢？那什么是macroTask？什么是microTask呢？JavaScript引擎把我们的所有任务分门别类，一部分归为macroTask，另外一部分归为microTack，下面是类别划分：macroTask:macroTask:
setTimeout
setInterval
setImmediate
requestAnimationFrame
I/O
UI rendering
setTimeoutsetIntervalsetImmediaterequestAnimationFrameI/OUI renderingmicroTask:microTask:
process.nextTick
Promise
Object.observe
MutationObserver
process.nextTickPromiseObject.observeMutationObserver我们所熟悉的定时器就属于macroTask，仅仅了解macroTask的机制还是不够的。为直观感受两种队列的区别，下面上代码进行实践感知。2.2 实践以setTimeout、process.nextTick、promise为例直观感受下两种任务队列的运行方式。
console.log('main1');
process.nextTick(function() {
console.log('process.nextTick1');
});
setTimeout(function() {
console.log('setTimeout');
process.nextTick(function() {
console.log('process.nextTick2');
});
}, 0);
new Promise(function(resolve, reject) {
console.log('promise');
resolve();
}).then(function() {
console.log('promise then');
});
console.log('main2');
console.log('main1');
process.nextTick(function() {
console.log('process.nextTick1');
});
setTimeout(function() {
console.log('setTimeout');
process.nextTick(function() {
console.log('process.nextTick2');
});
}, 0);
new Promise(function(resolve, reject) {
console.log('promise');
resolve();
}).then(function() {
console.log('promise then');
});
console.log('main2');别着急看答案，先以上面的理论自己想想，运行结果会是啥？最终结果是这样的：
main1
promise
main2
process.nextTick1
promise then
// 第二次事件循环
setTimeout
process.nextTick2
main1
promise
main2
process.nextTick1
promise then// 第二次事件循环
setTimeout
process.nextTick2process.nextTick 和 promise then在 setTimeout 前面输出，已经证明了macroTask和microTask的执行顺序。但是有一点必须要指出的是。上面的图容易给人一个错觉，就是主进程的代码执行之后，会先调用macroTask，再调用microTask，这样在第一个循环里一定是macroTask在前，microTask在后。但是最终的实践证明：在第一个循环里，process.nextTick1和promise then这两个microTask是在setTimeout这个macroTask里之前输出的，这是因为Promises/A+规范规定主进程的代码也属于macroTask。主进程这个macroTask（也就是main1、promise和main2）执行完了，自然会去执行process.nextTick1和promise then这两个microTask。这是第一个循环。之后的setTimeout和process.nextTick2属于第二个循环别看上面那段代码好像特别绕，把原理弄清楚了，都一样 ~requestAnimationFrame、Object.observe(已废弃) 和 MutationObserver这三个任务的运行机制大家可以从上面看到，不同的只是具体用法不同。重点说下UI rendering。在HTML规范：event-loop-processing-model里叙述了一次事件循环的处理过程，在处理了macroTask和microTask之后，会进行一次Update the rendering，其中细节比较多，总的来说会进行一次UI的重新渲染。3. 小结
3. 小结
总而言之，记住一次事件循环：先运行macroTask队列中的一个，然后运行microTask队列中的所有任务。接着开始下一次循环。参考文献：
JavaScript Event Loop相关原理解析
深入理解事件循环机制
JavaScript运行机制
JavaScript Event Loop相关原理解析JavaScript Event Loop相关原理解析深入理解事件循环机制深入理解事件循环机制JavaScript运行机制 JavaScript运行机制 以上就是深入分析JavaScript 事件循环(Event Loop)的详细内容，关于JavaScript 事件循环(Event Loop)的资料请关注其它相关文章！
相关文章:
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
