之前一直停留在主线程先执行,异步后执行的浅理解中,后来随着不断的学习,才渐渐意识到这里面还是有点复杂的,不过我不打算写很多。一幅图来说明这个复杂的关系

processTick可理解为node中的延时器。

接下来看一道题目

// 1 7 6 8 2 4 9 11 3 10 5 12
console.log('1'); // 1
setTimeout(function() {
// 2
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');
})
// 7 8
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')
})
})

根据上述的知识,可以得出下面的分析,进而得出答案

首先宏script部分 :1  7 ,毋庸置疑,如果你说new Promise( )怎么就立即执行了,先去看看new做的四件事          执行了还不算完,还要把异步的写进事件列表,进而注册事件队列

现在宏事件队列有 : 两个setTimeout里的异步函数    还有一个process.nextTick()的微异步函数,外加一个then也有一个

执行当前所有的微任务里的任务 : 6   8

执行当前所有宏任务队列里的任务 :  首先执行第一个setTimeout里的异步 :  打印 ,又一个process.nextTick()微任务存到队列中(为了省事省去了到事件列表的步骤),打印,又一个微任务then中的异步函数存到队列中

执行第二个setTimeout里的异步函数 : 打印  ,又一个process.nextTick()微任务存到队列中,打印,又一个微任务then中的异步函数存到队列中

最后执行微任务 : 此时微任务里有两个process.nextTick()微任务,两个then微任务,所以首先把两个process.nextTick()微任务执行完再去执行两个then  结果打印   3    10   5   2

总结 :  事件循环  ,   宏微交替

最后附上我学习js运行机制的地址:https://juejin.im/post/59e85eebf265da430d571f89,写的真的好,耐心看,但是在那篇博客在宏微交替的理解上有偏差,或许是因为node版本不一样了,我这是没问题的

注意:上文仅针对node环境下,浏览器环境下运行机制简单说一下:首先宏微任务的分配没有改变,但是执行的时候是抓一个宏,执行全部微任务,再去抓一个宏任务,执行所有微任务,有点差异。

js执行代码顺序的更多相关文章

  1. ajax 执行代码顺序

    异步:ajax执行过程中,ajax后面的代码也执行了,程序没按顺序走 同步:ajax执行完毕后再执行后面的代码,程序顺序执行 在jq中ajax默认是异步的 当设置async:false表示的就是同步的 ...

  2. js基础梳理-究竟什么是执行上下文栈(执行栈),执行上下文(可执行代码)?

    日常在群里讨论一些概念性的问题,比如变量提升,作用域和闭包相关问题的时候,经常会听一些大佬们给别人解释的时候说执行上下文,调用上下文巴拉巴拉,总有点似懂非懂,不明觉厉的感觉.今天,就对这两个概念梳理一 ...

  3. JS执行顺序-函数声明提升、匿名函数、函数表达式

    大方向上: JS 是按照 代码块 进行 编译.执行 的. 学习至: 1.变量声明提升 2.新唐的博客 3.js中匿名函数的创建与调用方法分析 4.前端圣经 - <高程三> 5.深入理解变量 ...

  4. Node.js 反序列化漏洞远程执行代码(CVE-2017-5941)

    2.1 摘要 2.1.1 漏洞介绍 漏洞名称: Exploiting Node.js deserialization bug for Remote Code Execution 漏洞CVE id: C ...

  5. JS Window对象 计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码。

    计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互 ...

  6. JS流程控制语句 做判断(if语句)if语句是基于条件成立才执行相应代码时使用的语句。语法:if(条件) { 条件成立时执行代码}

    做判断(if语句) if语句是基于条件成立才执行相应代码时使用的语句. 语法: if(条件) { 条件成立时执行代码} 注意:if小写,大写字母(IF)会出错! 假设你应聘web前端技术开发岗位,如果 ...

  7. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  8. (转)JS加载顺序

    原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...

  9. js执行过程

    正如我们了解的一样,当我们书写了JS程序之后,打开浏览器,我们的代码就可以开始运行了(当然保证你的代码没有问题,才能按照你的预期进行执行).刚才说的是JS执行的一个大的环境,今天我们学习一下,JS在解 ...

随机推荐

  1. height自适应

    如果子元素没有设置 float 属性啥的,父元素就是自动适应子元素宽高的. 子元素如果全是浮动属性(float),那么父元素就没有高度. 除非,你在子元素最后加一个清除浮动( <div styl ...

  2. 洛谷2050 BZOJ2897美食节题解

    放个链接 BZ链接 其实这题就是修车的加强版,做法差不多,还是对于每个厨师进行拆点 可是这样强行建图跑网络流会T飞 我们发现,如果一个厨师没有做倒数第x到菜,他一定不会做倒数第x+1到菜 我们的每次增 ...

  3. @topcoder - SRM766R1 D1L3@ ShortestMissingSubsequences

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个大小为 G 的字符集,并给定一个长度为 N 的字符串 A ...

  4. vagrant up提示"Couldn't open file /path/to/base"的错误解决方法

    在vagrant使用命令vagrant up启动虚拟机时 出错: C:\Vagrant>vagrant up Bringing machine 'default' up with 'virtua ...

  5. time,datetime模块

    time模块 时间戳 返回1970年1月1日 00:00:00开始按秒计算时间偏移量 time_stamp = time.time() print(time_stamp,type(time_stamp ...

  6. 2019-4-29-dotnet-通过-WMI-获取系统安装软件

    title author date CreateTime categories dotnet 通过 WMI 获取系统安装软件 lindexi 2019-04-29 12:18:59 +0800 201 ...

  7. js原生复习2.0

    // 1.闭包的作用// 实现共有变量,函数累加器的实现// 可以做缓存以及储存结构// 可以实现封装,实现属性私有化// 模块开发,防止全局污染// var name = 123;// var in ...

  8. java基础部分的一些有意思的东西。

    ${li.key!=''&&li.key!= null}可以直接判断不为空 ${empty li.value}也是不为空. 最近好烦迭代map里的map或者map里的list 后来发现 ...

  9. SP2-0642: SQL*Plus internal error state 2130, context 0:0:0

    ..experience, Working case SP2-0642: SQL*Plus internal error state 2130, context 0:0:0 2016-10-09 没有 ...

  10. lattice planner 规划详解

    大家好,我是来自百度智能驾驶事业群的许珂诚.今天很高兴能给大家分享Apollo 3.0新发布的Lattice规划算法. Lattice算法隶属于规划模块.规划模块以预测模块.routing模块.高精地 ...