前言
JavaScript
是一门单线程语言,这样就可以得出结论:JavaScript
是按照语句出现顺序执行的
正是因为 JavaScript
是一行一行执行的,所以以为 js 是这样的:
var a = '1';
console.log(a);
var b = '2';
console.log(b);
但是实际上 js 是这样的:
setTimeout(function(){
console.log('定时器开始啦')
});
new Promise(function(resolve){
console.log('马上执行 for 循环啦');
for(var i = 0; i < 10000; i++){
i == 99 && resolve();
}
}).then(function(){
console.log('执行 then 函数啦')
});
console.log('代码执行结束');
但是依照* js 按照语句出现顺序执行*的理念,浏览器控制台输出的结果如下:
定时器开始啦
马上执行 for 循环啦
执行 then 函数啦
代码执行结束
这结果当然是不正确的,要不文章题目也不叫彻底弄懂执行机制,接下来就说到关于 JavaScript
的执行机制
关于 JavaScript
javascript
是一门单线程语言,一切 JavaScript
版的多线程都是单线程模拟出来的
JavaScript 时间循环
既然 JavaScript
是单线程,那么久涉及到任务队列了,就好比只有一个窗口的银行,客户需要排队办理业务,同理 js 任务也要一个一个顺序执行,如果一个任务执行耗时过长,那么后一个任务就必须等着。那么问题来了,假如我们想浏览新闻,但是新闻包含的超清图片加载很慢,难道我们的网页要一直卡着直到图片完全显示出来?因此聪明的程序员将任务分为两类
- 同步任务
- 异步任务
当我们打开网页的时候,网页的渲染过程就是一大堆同步任务,比如页面元素和骨架的渲染;而像加载图片、音乐之类的文件耗时过久的任务,就是异步任务。先以图解的方式来演示JavaScript
的执行机制:
分析:
- 同步任务和异步任务分别进入不同的场所,同步的进入主线程,异步的进入 Event Table 并注册函数
- 当指定的事情完成时,Event Table 会将这个函数移入 Event Queue
- 主线程的任务执行完毕为空,会去 Event Queue 读取对应的函数,进入主线程执行
- 以上过程会不断重复,也就是通常所说的 Event Loop (事件循环 javascript 的执行机制)
如何判断主线程执行为空? js 引擎存在 monitoring process 进程,会持续不断地检查主线程执行栈是否为空,一旦为空,就会去 Event Queue 那里检查是否有等待被调用的函数。
下面使用一段 ajax 代码来说明:
var data = [];
$.ajax({
url:www.javascript.com,
data:data,
success:() => {
console.log('发送成功!');
}
})
console.log('代码执行结束');
上面是一段简易的 ajax 请求代码:
- ajax 进入 Event Table,注册回调函数 success
- 执行 console.log(‘代码执行结束’)
- ajax 时间完成,回调函数 success 进入 Event Queue
- 主线程从 Event Queue 读取回调函数 success 执行
setTimeout
setTimeout 就是异步可以延迟执行,经常可以这样,延时 3 秒执行
setTimeout(function() {
console.log('执行任务');
task();
}, 3000);
但是正常在使用过程中,就会出现问题,明明是延迟 3 秒,实际却是 5、6 秒才执行函数,先看一个例子:
setTimeout(function task() {
console.log('开始执行任务');
task();
},3000);
console.log(‘执行 console’);
根据得出的结论,setTimeout 是异步的,应该限制性 console.log 这个同步任务,控制台打印的语句应该是:
执行 console
开始执行任务
修改一下代码:
setTimeout(function task() {
console.log('开始执行任务');
task();
},3000);
sleep(100000);
会发现 console 打印语句的时间远远大于 3 秒,先看下程序是怎样执行的
- task() 进入 Event Table 并注册,及时开始
- 执行 sleep 函数,非常慢,计时仍然在继续
- 3 秒到了,计时时间 timeout 完成,task() 进入 Event Queue,但是 sleep 还没执行完,只好继续等着
- sleep 终于执行完了,task() 终于从 Event Queue 进入主线程执行
我们知道 setTimeout 这个函数,是经过指定时间后,把要执行的任务(本例中为 task() )加入到 Event Queue中,又因为是单线程任务要一个一个执行,如果前面的任务需要的时间太久,那么只能等着,导致真正的延迟时间远远大于 3 秒
我们还经常遇到 setTimeout(fn,0) 这样的代码,0秒后执行又是什么意思呢?是不是可以立即执行呢?
答案是不会的,setTimeout(fn,0) 的含义是,指定某个任务在主线程最早可得的空闲时间执行,意思就是不用再等多少秒了,只要主线程执行栈内的同步任务全部执行完成,栈为空就马上执行。
关于setTimeout要补充的是,即便主线程为空,0 毫秒实际上也是达不到的。根据HTML的标准,最少要 4 ms
setInterval
setInterval 是循环执行,对于执行顺序来说,setInterval 会每隔指定的时间将祖册的函数置入 Event Queue,如果耗时太久,一样需要等待。
唯一需要注意的一点是,对于 setInterval(fn,ms) 来说,我们已经知道不是每过 ms 秒会执行一次 fn,而是每过 ms 秒,会有 fn进入 Event Queue。一旦setInterval的回调函数fn执行时间超过了延迟时间 ms,那么就完全看不出来有时间间隔了
Promise 与 process.nextTick(callback)
Promise:是异步编程的一种解决方案,简单说就是一个容器,里面保存着某个异步操作的结果,从语法上来说,promise 是一个对象,他可以获取异步操作的消息,有三种状态:
- pending:进行中
- fullfield:已经成功
- rejected:已经失败
状态改变: - 从 pending 变为 fullfield
- 从 pending 变为 rejected
-
process.nextTick(callback) 类似 node.js 版的 “setTimeout”,在事件循环的下一次循环中调用 callback 回调函数
除了广义的同步任务和异步任务,还有宏任务和微任务
- macro-task(宏任务):包括整体代码 script, setTimeout, setInterval
- mocro-task(微任务):Promise, process.nextTrick
不同类型的任务会进入对应的 Event Queue
事件循环的顺序,决定js代码的执行顺序。进入整体代码(宏任务)后,开始第一次循环。接着执行所有的微任务。然后再次从宏任务开始,找到其中一个任务队列执行完毕,再执行所有的微任务。听起来有点绕,我们用文章最开始的一段代码说明:
setTimeout(function() {
console.log('setTimeout');
})
new Promise(function(resolve) {
console.log('promise');
}).then(function() {
console.log('then');
})
console.log('console');
输出结果:
promise
console
then
setTimeout
执行顺序:
- 这段代码作为宏任务,进入主线程
- 先遇到 setTimeout, 那么将其回调函数注册分发到宏任务 Event Queue
- 接下来遇到 Promise, new Promise 立即执行, then 函数分配到微任务 Event Queue
- 遇到 console, 立即执行
- 整段代码作为第一个宏任务执行结束,之后在查看有哪些微任务,发现了 then 在微任务中,立即执行
- 第一轮事件循环结束了,开始第二轮循环,先从宏任务 Event Queue 开始,发现了 setTimeout 对应的回调函数,立即执行
- 结束
时间循环、宏任务、微任务的关系如下图:
接下来看一段稍微复杂的代码:
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
输出结果:
1
7
6
8
2
4
3
5
9
11
10
12
第一轮事件循环流程分析:
- 整体 Script 作为第一个宏任务进入主线程,遇到 console,输出 1
- 遇到 setTimeout, 其回调函数被分发到宏任务 Event Queue 中,暂且记为 setTimeout1
- 遇到 process.nextTick(),其回调函数被分发到微任务 Event Queue 中,记为 proccess1
- 遇到 promise, 直接执行,输出 7, then 被分发到微任务 Event Queue, 记为 then1
- 又遇到了 setTimeout, 其回调函数被分发到宏任务 Event Queue 中,记为 setTimeout2
宏任务 Event Queue | 微任务 Event Queue |
---|---|
setTimeout1 | process1 |
setTimeout2|then1|
- 第一轮事件循环宏任务结束,发现了 proccess1 和 then1 两个微任务
- 执行 process1,输出 6
- 执行 then1,输出 8
第一轮事件循环正式结束,这一轮结果输出是 1,7,6,8,那么第二轮事件循环从 setTimeout1 宏任务开始 - 首先遇到 console,输出 2,接下来遇到 proccess.nextTick(),同样将其分发到微任务Event Queue中,记为process2。new Promise立即执行输出4,then也分发到微任务Event Queue中,记为then2
宏任务 Event Queue | 微任务 Event Queue |
---|---|
setTimeout2 | process2 |
then2 |
- 第二轮事件循环宏任务结束,发现有 proccess2 和 then2 两个为任务执行
- 执行 proccess2,输出 3
- 执行 then2,输出 5
第二轮事件循环正式结束,这一轮的输出结果是 2,4,3,5,那么第三轮事件循环从 setTimeout2 宏任务执行
- 遇到 console 直接输出 9,
- 将 process.nextTick() 分发到微任务 Event Queue 中。记为 process3
- 直接执行 new Promise,输出11
- 将 then 分发到微任务 Event Queue 中,记为 then3
宏任务 Event Queue | 微任务 Event Queue |
---|---|
proccess3 | |
then3 |
- 第三轮事件循环宏任务执行结束,执行两个微任务 proccess3 和 then3
- 输出 10,
- 输出 12
- 第三轮事件循环结束,第三轮输出的是 9,11,20,12
整段代码,进行了三次事件循环,完整输出为: 1,7,6,8,2,4,3,5,9,11,10,12
原文传送门:https://juejin.im/post/59e85eebf265da430d571f89 非常感谢作者