简单而面试中又常见的知识点:JS执行机制

链式冰川
• 阅读 731

在开始讲解之前,我们先来看一段代码:

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')
    })
});

各位小伙伴觉得上面的结果输出会是多少呢?如果你没有了解过javascript的执行机制的话,上面的题目可能会让你崩溃。

不过别着急,先往下看,我保证你看到最后,能轻轻松松写出上面代码的答案,并且完全了解其中的原理。

简单而面试中又常见的知识点:JS执行机制

​ 首先,希望大家记住一个要点,javascript是单线程的语言。

因此,所有的javascript的异步特性都是基于单线程实现的,记住了这个特点,我们再去理解javascript的很多机制就容易很多了。

我们先从简单的代码说起,来引出今天的概念。

console.log('程序开始执行~');
setTimeout(() => {
console.log('执行setTimeout~');
}, 1000);
console.log('程序执行结束~');
// 输出结果:
// 程序开始执行~
// 程序执行结束~
// ...1s(这里表示等待时间)
// 执行setTimeout~

我想小伙伴们对上面结果都不会有疑问,setTimeout是我们常用来做延迟执行的全局函数。它接受两个参数,要执行的函数a和等待的秒数x,函数a会在程序经过x秒后执行。

这里引出我们的第一个概念:同步函数和异步函数。上面的函数a就是异步函数了,它不是立刻执行的函数,而是要等待一段时间,或者说满足一定的条件之后才执行的函数。

不过,有时候我们明明设置了3秒的定时,但是却发现函数并没有在3秒后执行,有时候会更久,这又是为什么呢?

这要从javascript的执行原理说起,js执行的时候,有一个专门存放异步函数的地方,称之为Event Table,而当异步函数已经满足回调的执行条件之后(比如时间过了x秒,异步请求返回了结果等等),原本放在Event Table的异步函数就会被放进一个队列中,这个队列称为Event Queue。

不要觉得这个队列很深奥,其实就是一个排队,里面放的都是回调函数,它们正一个个等待着按顺序执行自身呢。来看下面的代码:

​​console.log('程序执行开始~')
setTimeout(() => {
console.log('setTimeout执行啦~')
}, 3000);
sleep(5000);
console.log('程序执行结束~')
// 注:这里的sleep函数不是js的标准函数,只是表示一个执行需要5秒的函数。
// 输出结果:
// 程序执行开始~
// ...5s后
// 程序执行结束~
// setTimeout执行啦~

从上面结果我们可以看出,setTimeout并非是在setTimeout调用之后经过3秒就马上输出结果"setTimeout执行啦~",而是等待下方的sleep函数执行完毕后才输出的结果。

前面我已经说过,要牢记javascript是单线程,那么它就一次只能运行一个一段代码。

因此,即使处于异步队列的setTimeout函数已经满足执行条件了,但是它还是得等待在Event Queue中,直到主线程执行完毕才能执行。

所以请记住,js会先执行主线程的同步代码,遇到setTimeout就将其回调函数注册在Event Table中,然后当异步函数满足执行条件之后,就会被放入Event Queue中,但是并不能马上执行,而是得等待主线程剩余代码执行完毕,队列中的函数才能按顺序执行。


我想小伙伴们看到这里,已经明白一点js的执行机制了,那么我们一鼓作气,继续深入一下(其实也很简单),Promise和process又是怎样的执行机制呢?

在放代码之前,我先介绍两个基本概念:

  • process.nextTick,我们知道浏览器环境下的setTimeout,那么process.nextTick就相当于在node环境下执行的setTimeout。
  • 宏任务和微任务,主线程一直在执行script代码,还有setTimeout、setInterval函数就是宏任务,而Promise.then,process.nextTick则是微任务。

接下来,我们看一段代码:

console.log('程序执行开始~')
setTimeout(() => {
console.log('setTimeout执行啦~')
}, 3000);
new Promise((resolve) => {
  console.log('promise开始执行~');
  resolve();  
}).then(() => {
  console.log('promise执行结束~')
});
console.log('程序执行结束~')
// 输出结果:
// 程序执行开始~
// promise开始执行~
// 程序执行结束~
// promise执行结束~
// ...3s后
// setTimeout执行啦~

emmm,这里的结果是不是就有点微妙了。

记得我们刚才说的宏任务和微任务吗,js的执行机制中,先是执行完宏任务中的同步代码,接着执行微任务,接着执行宏任务的异步代码。这样说可能有点绕,我们结合上面的代码来看。

  • 代码一开始执行,执行的就是全局代码,也就是宏任务的同步代码;
  • 遇到console.log,直接执行,输出"程序执行开始~";
  • 接着执行,遇到setTimeout函数,将其回调函数注册进宏任务的Event Queue(注意:宏任务和微任务分别有自己的Event Queue);
  • 接着遇到new Promise,立刻执行(new Promise里面的函数是立刻执行的,只有.then函数里面才是放到微任务去执行的,不要搞混咯~),输出"promise开始执行~";
  • 接着遇到promise.then函数,将其回调函数注册到微任务的Event Queue;
  • 接着继续执行,遇到console.log,直接输出"程序执行结束~"
  • 到这里,宏任务的同步代码就全部执行完毕了,这时候,js引擎会去检查微任务的Event Queue中是否存在回调函数,这时微任务的Queue中还有一个函数未执行,因此在这时候执行,输出"promise执行结束~";
  • 当微任务的所有回调函数被执行完了之后,一次事件循环就结束了。
  • 这时候js引擎会检查宏任务的Event Queue中是否还有未执行的函数,如果还有,将会开启下一轮的事件循环。由于此时我们宏任务的Event Queue中还有未执行的setTimeout,所以开启下一轮事件循环,执行setTimeout回调,输出"setTimeout执行啦~"

能坚持到这里的小伙伴,相信你已经学到了不少,给自己点个赞吧

简单而面试中又常见的知识点:JS执行机制

接下来,我们再来看一下加上process.nextTick之后的一个例子:

console.log('1')
setTimeout(() => {
console.log('2')
})
new Promise((resolve) => {
console.log('3')
    resolve()
}).then(() => {
console.log('4')
})
process.nextTick(() => {
console.log('5')
})
new Promise((resolve) => {
console.log('6')
    resolve()
}).then(() => {
console.log('7')
})
process.nextTick(() => {
console.log('8')
})
console.log('9')
// 输出结果
// 1 3 6 9 5 8 4 7 2

是不是有一点一开始那块代码的味道了,上面的输出结果也很容易理解:先是执行了同步代码,输出:1 3 6 9,然后输出微任务中的process.nextTick的回调:5 8,然后输出Promise.then中的回调:4 7,最后输出setTimeout的2,是不是一目了然。

上面唯一要注意点的就是:process.nextTick是要比Promise.then先执行的(也许不同node版本环境下不同,这个要看具体执行结果)。


好啦!终于这篇文章也要接近尾声了,还在看的小伙伴再给自己点个赞吧,当然也可以给我点个赞~你每一个小小的支持都是我坚持下去的最大动力。

接下来要进入最后的重头戏,按照我们前面所讲的知识,分析刚开始的代码的执行结果。这里再贴下一开始的代码,最终结果我会在文章最后再贴出来,所以小伙伴们也可以自己先看下,最后比对结果是否和文中的一致。

console.log('1');
setTimeout(() => {
console.log('2');
    process.nextTick(() => {
console.log('3');
    })
new Promise((resolve) => {
console.log('4');
        resolve();
    }).then(() => {
console.log('5')
    })
});
process.nextTick(() => {
console.log('6');
})
new Promise((resolve) => {
console.log('7');
    resolve();
}).then(() => {
console.log('8')
});
setTimeout(() => {
console.log('9');
    process.nextTick(() => {
console.log('10');
    })
new Promise((resolve) => {
console.log('11');
        resolve();
    }).then(() => {
console.log('12')
    })
});

接下来是分析过程:

  • 程序开始,执行宏任务同步代码,遇到console.log,输出:1;
  • 遇到setTimeout1,将其放入宏任务Event Queue中;
  • 遇到process.nextTick1,放入微任务Event Queue中;
  • 遇到new Promise,直接执行其中的代码,输出:7;
  • 遇到Promise.then1函数,将其放入微任务Event Queue;
  • 继续执行,遇到setTimeout2,放入宏任务Event Queue;
  • 此时任务队列状态:
  • 宏Queue: setTimeout1,setTimeout2;
  • 微Queue: process.nextTick1、Promise.then1;
  • 至此,宏任务同步代码执行完毕,检测微任务队列是否存在任务,由于存在两个微任务,所以这时候执行微任务;
  • 先执行process.nextTick1,输出:6;
  • 接着执行Promise.then1,输出: 8;
  • 微任务执行完毕后,一次事件循环结束,js引擎持续检测宏任务中是否存在任务,存在的话开启下一次事件循环;由于存在两个setTimeout,所以在满足setTimeout执行条件后,开启下一次事件循环,执行回调函数;
  • 先执行setTimeout1,遇到console.log,输出:2;
  • 接着遇到process.nextTick2,放入微任务Event Queue;
  • 继续执行遇到new Promise,直接执行,输出:4;
  • 然后遇到Promise.then2,放入微任务Event Queue;
  • 至此setTimeout1执行完毕,此时任务队列状态:
  • 宏Queue: setTimeout2;
  • 微Queue: process.nextTick2、Promise.then2;
  • js引擎检查微任务Event Queue中还存在两个微任务,因此执行这两个微任务;
  • 先执行process.nextTick2,输出:3;
  • 接着执行Promise.then2,输出:5;
  • 微任务执行完毕,第二次事件循环结束;
  • js引擎持续检查宏任务Event Queue中是否还有未执行函数,检测到还有setTimeout2未执行,因此开启第三轮的事件循环;
  • 执行setTimeout2,遇到console.log,输出:9;
  • 又遇到process.nextTick3,放入微任务队列;
  • 遇到new Promise,直接执行,输出:11;
  • 遇到Promise.then3,放入微任务队列;
  • 至此,setTimeout2执行完毕,此时任务队列状态:
  • 宏Queue: 无;
  • 微Queue: process.nextTick3、Promise.then3;
  • js引擎在检测是否存在未执行的微任务,由于还有两个微任务未执行,因此将其执行;
  • 先执行process.nextTick3,输出:10;
  • 接着执行Promise.then3,输出:12;
  • 至此,微任务执行完毕,事件循环结束;

最后程序输出结果:1 7 6 8 2 4 3 5 9 11 10 12


看到这里的小伙伴们,给自己点第三个赞吧。

怎么样,是不是觉得已经完全掌握了js的执行机制,其实宏任务和微任务除了上文提到的那些,还有一些其他的,可以下来自己再去了解下~

最后,感谢大家的阅读,如果觉得文章写的还可以的话,可以给我点个赞、点个关注、或者直接关注本人,我会持续分享更多优质的技术文章,我们一起加油吧!

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Easter79 Easter79
3年前
SpringBoot学习:整合shiro自动登录功能(rememberMe记住我功能)
首先在shiro配置类中注入rememberMe管理器!复制代码(https://oscimg.oschina.net/oscnet/675f5689159acfa2c39c91f4df40a00ce0f.gif)/cookie对象;rememberMeCookie()方法是设置Cookie的生成模
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(