彻底弄懂 JavaScript 执行机制，同步任务、异步任务、微任务、宏任务、事件轮询

2024-06-20 20:01| 来源: 网络整理| 查看: 265

用我的理解，帮助大家弄懂 js 的执行机制

在此之前，我对 js 的执行机制根本都不了解，按我的想法就是从上到下一行一行执行，对 setTimeOut 等定时器的执行机制也漠不关心，反正能执行就行，知道我最近在学习 promise 才了解到 js 的执行机制，下面我就用我的理解来简单介绍下。

首先，JavaScript 是一个单线程的脚本语言。单线程，就像我们平时去超市买东西，结账的时候需要一个个排队等待结账一样。

但是在等待的时候一定会很无聊，这个时候我们想边等待边玩会手机，玩了一会手机，时间过得很快，就马上排到了我们结账，然后我们就顺利的结完账走出了超市，这里排队就像是 js 中的同步任务，需要一个个进行，玩手机就像是 js 中的异步任务。

同步任务：指的是在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步任务：指的是不进入主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

1. 同步和异步任务在不同的执行"场所"，同步的进入主线程，异步的进入Event Table执行并注册函数。 2. 当指定的异步事情完成时，Event Table会将这个函数移入Event Queue。 3. 主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，推入主线程执行。 4. js引擎的monitoring process进程会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。上述过程会不断重复，也就是常说的Event Loop(事件循环也可以叫事件轮询)。在这里插入图片描述其中异步任务又包括宏任务（macrotask ）和微任务（microtask ）

宏任务：

scriptsetTimeoutsetIntervalsetImmediateI/OUI rendering

setTimeout(fn,0) 是指当主线程任务完成、所有微任务也完成的情况下就会立即执行

微任务: 7. process.nextTick(node 独有) 8. promise 9. MutationObserver

JavaScript 执行机制：主线程任务——>微任务——>宏任务

如果宏任务里还有微任就继续执行宏任务里的微任务，如果宏任务中的微任务中还有宏任务就在依次进行

主线程任务——>微任务——>宏任务——>宏任务里的微任务——>宏任务里的微任务中的宏任务——>知道任务全部完成

我的理解是在同级下，微任务要优先于宏任务执行

在这里插入图片描述

下面让我们来分析一段较复杂的代码，看看你是否掌握了 js 的执行机制

console.log('1'); setTimeout(function() { console.log('2'); new Promise(function(resolve) { console.log('3'); resolve(); }).then(function() { console.log('4') }) }) new Promise(function(resolve) { console.log('5'); resolve(); }).then(function() { console.log('6') }) setTimeout(function() { console.log('7'); new Promise(function(resolve) { console.log('8'); }).then(function() { console.log('9') }) }) console.log('10'); // 1 5 10 6 2 3 4 7 8 分析：

第一轮：

首先是进入主线程，遇到 console.log(‘1’)，打印1然后遇到 promise 中的 console.log(‘5’); 直接执行，打印5再遇到 console.log(‘10’)，打印10

第二轮：

然后运行微任务，我们看到这里面的微任务有 promise，依次执行。首先promise完成态，走到 then，遇到 console.log(‘6’)，打印6

第三轮：

然后运行宏任务，我们看到这里面的微任务有 setTimeout，依次执行。遇到 console.log(‘2’)，打印2，然后发现里面还有个微任务 promise，先打印3，等完成后，走到 then，打印4遇到第二个 setTimeout 打印7，然后发现里面还有个微任务 promise，先打印8，由于没有完成态resolve()，所以不打印9 写在最后

1. js的异步

我们从最开头就说javascript是一门单线程语言，不管是什么新框架新语法糖实现的所谓异步，其实都是用同步的方法去模拟的，牢牢把握住单线程这点非常重要。

2. 事件循环Event Loop

事件循环是js实现异步的一种方法，也是js的执行机制。

3. javascript的执行和运行

执行和运行有很大的区别，javascript在不同的环境下，比如node，浏览器，Ringo等等，执行方式是不同的。而运行大多指javascript解析引擎，是统一的。

4. setImmediate

微任务和宏任务还有很多种类，比如setImmediate等等，执行都是有共同点的，有兴趣的同学可以自行了解。

5. 最后的最后

1. javascript是一门单线程语言 2. Event Loop是javascript的执行机制牢牢把握两个基本点，以认真学习javascript为中心，早日实现成为前端高手的伟大梦想！

参考文献：

这一次，彻底弄懂 JavaScript 执行机制（别还不知道什么是宏任务，什么是微任务）

微任务、宏任务与Event-Loop

【本文地址】

公司简介

联系我们