javascript是单线程,一切javascript版的"多线程"都是用单线程模拟出来的,通过事件循环(event loop)实现的异步。

javascript事件循环

事件循环中的同步任务,异步任务:

  • 同步和异步任务在不同的执行"场所",同步的进入主线程,异步的进入Event Table执行并注册函数。

  • 当指定的异步事情完成时,Event Table会将这个函数移入Event Queue

  • 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,推入主线程执行。

  • js引擎的monitoring process进程会持续不断的检查主线程执行栈是否为空,一旦为空,就会去Event Queue那里检查是否有等待被调用的函数。上述过程会不断重复,也就是常说的Event Loop(事件循环)。

用个例子说明上述过程:

let data = [];
$.ajax({
url:www.javascript.com,
data:data,
success:() => {
console.log('发送成功!');
}
})
console.log('代码执行结束');
  • ajax(异步任务)进入Event Table,注册回调函数success。

  • 执行console.log('代码执行结束')。(同步任务在主线程执行)

  • ajax事件完成,回调函数success进入Event Queue。

  • 主线程从Event Queue读取回调函数success并执行。

setTimeout和setInterval中的执行时间

console.log('先执行这里');
setTimeout(() => {
console.log('执行啦')
},3000); //先执行这里
// ... 3s later 3秒到了,计时事件timeout完成,定时器回调进入Event Queue,主线程执行已执行完,此时执行定时器回调。
// 执行啦

setTimeout明明写的延时3秒,实际却5,6秒才执行函数,这咋回事?

setTimeout(() => {
task()
},3000) sleep(10000000)

上述代码在控制台执行task()需要的时间远远超过3秒,执行过程:

  • task()进入Event Table并注册,计时开始。

  • 执行sleep函数,很慢,非常慢,计时仍在继续。

  • 3秒到了,计时事件timeout完成,task()进入Event Queue,但是sleep也太慢了吧,还没执行完,只好等着。

  • sleep终于执行完了,task()终于从Event Queue进入了主线程执行。

上述的流程走完,setTimeout这个函数是经过指定时间后,把要执行的任务(本例中为task())加入到Event Queue中,又因为是单线程任务要一个一个执行,如果前面的任务需要的时间太久,那么只能等着,导致真正的延迟时间远远大于3秒。

重点来了:定时器的毫秒,不是指过ms秒执行一次fn,而是过ms秒,会有fn进入Event Queue。

setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,意思就是不用再等多少秒了,只要主线程执行栈内的同步任务全部执行完成,栈为空就马上执行。

关于setTimeout要补充的是,即便主线程为空,0毫秒实际上也是达不到的。根据HTML的标准,最低是4毫秒

对于执行顺序来说,setInterval会每隔指定的时间将注册的函数置入Event Queue,如果前面的任务耗时太久,那么同样需要等待。一旦setInterval的回调函数fn执行时间超过了延迟时间ms,那么就完全看不出来有时间间隔了。

宏任务和微任务

除了广义的同步任务和异步任务,我们对任务有更精细的定义:

  • macro-task(宏任务):包括整体代码script,setTimeout,setInterval

  • micro-task(微任务):Promise,process.nextTick

不同类型的任务会进入对应的Event Queue,比如setTimeout和setInterval会进入相同的Event Queue。

在宏任务和微任务概念中的事件循环机制:

主任务(宏任务)完——所有微任务——宏任务(找到宏任务其中一个任务队列执行,其中如果又有微任务,该任务队列执行完就执行微任务)——宏任务中另外一个任务队列(里面偶微任务就再执行微任务)。

总的来说就是在宏任务和微任务之间来回切。下面列子执行过程:

第一轮:主线程输出:【1,7】,添加宏任务【set1,set2】,添加微任务【6,8】。执行完主线程,然后执行微任务输出【6,8】

第二轮:执行宏任务其中一个任务队列set1:输出【2,4】,执行任务的过程,碰到有微任务,所以在微任务队列添加输出【3,5】的微任务,在set1宏任务执行完就执行该微任务,第二轮总输出:【2,4,3,5】

第三轮:执行任务另一个任务队列set2:输出【9,11】,执行任务的过程,碰到有微任任务,所以在微任务队列添加输出【10,12】的微任务,在set2宏任务执行完就执行该微任务,第三轮总输出:【9,11,10,12】

整段代码,共进行了三次事件循环,完整的输出为1,7,6,8,2,4,3,5,9,11,10,12。(请注意,node环境下的事件监听依赖libuv与前端环境不完全相同,输出顺序可能会有误差)

 console.log('1'); //第一轮主线程【1】

 setTimeout(function() { //碰到set异步,丢入宏任务队列【set1】:我将它命名为set1
    console.log('2');//第二轮宏任务执行,输出【2】
    process.nextTick(function() {//第二轮宏任务执行,碰到process,丢入微任务队列,【3】
        console.log('3');
    })
    new Promise(function(resolve) {//第二轮宏任务执行,输出【2,4】
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')//第二轮宏任务执行,碰到then丢入微任务队列,【3,5】
    })
})
process.nextTick(function() { //碰到process,丢入微任务队列【6】
    console.log('6'); //第一轮微任务执行
})
new Promise(function(resolve) {
    console.log('7'); //new的同时执行代码,第一轮主线程此时输出【1,7】
    resolve();
}).then(function() {
    console.log('8') //第一轮主线程中promise的then丢入微任务队列,此时微任务队列为【6,8】。当第一轮微任务执行,顺序输出【6,8】
}) setTimeout(function() { //碰到set异步丢入宏任务队列,此时宏任务队列【set1.set2】:我将它命名为set2
    console.log('9');//第三轮宏任务执行,输出【9】
    process.nextTick(function() { //第三轮宏中执行过程中添加到微任务【10】
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');//第三轮宏任务执行,宏任务累计输出【9,11】
        resolve();
    }).then(function() {
        console.log('12') //第三轮宏中执行过程中添加到微任务【10,12】
    })
})

参考文章:

这一次,彻底弄懂 JavaScript 执行机制

10分钟理解JS引擎的执行机制

从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理

前端基础进阶(十二):深入核心,详解事件循环机制

js的事件循环机制:同步与异步任务(setTimeout,setInterval)宏任务,微任务(Promise,process.nextTick)的更多相关文章

  1. JS JavaScript事件循环机制

    区分进程和线程 进程是cpu资源分配的最小单位(系统会给它分配内存) 不同的进程之间是可以同学的,如管道.FIFO(命名管道).消息队列 一个进程里有单个或多个线程 浏览器是多进程的,因为系统给它的进 ...

  2. Node.js 的事件循环机制

    目录 微任务 事件循环机制 setImmediate.setTimeout/setInterval 和 process.nextTick 执行时机对比 实例分析 参考 1.微任务 在谈论Node的事件 ...

  3. 浏览器中 JS 的事件循环机制

    目录 事件循环机制 宏任务与微任务 实例分析 参考 1.事件循环机制 浏览器执行JS代码大致可以分为三个步骤,而这三个步骤的往复构成了JS的事件循环机制(如图). 第一步:主线程(JS引擎线程)中执行 ...

  4. JS浏览器事件循环机制

    文章来自我的 github 博客,包括技术输出和学习笔记,欢迎star. 先来明白些概念性内容. 进程.线程 进程是系统分配的独立资源,是 CPU 资源分配的基本单位,进程是由一个或者多个线程组成的. ...

  5. JS:事件循环机制、调用栈以及任务队列

    点击查看原文 写在前面 js里的事件循环机制十分有趣.从很多面试题也可以看出来,考察简单的setTimeout也就是考察这个机制的. 在之前,我只是简单地认为由于函数执行很快,setTimeout执行 ...

  6. js的事件循环机制和任务队列

    上篇讲异步的时候,提到了同步队列和异步队列的说法,其实只是一种形象的称呼,分别代表主线程中的任务和任务队列中的任务,那么此篇我们就来详细探讨这两者. 一.来张图感受一下 如果看完觉得一脸懵逼,请继续往 ...

  7. JS基础-事件循环机制

    从一道题浅说 JavaScript 的事件循环 原文链接: https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/7 ...

  8. js事件循环机制辨析

     对于新接触js语言的人来说,最令人困惑的大概就是事件循环机制了.最开始这也困惑了我好久,花了我几个月时间通过书本,打代码,查阅资料不停地渐进地理解他.接下来我想要和大家分享一下,虽然可能有些许错误的 ...

  9. JS 事件循环机制 - 任务队列、web API、JS主线程的相互协同

    一.JS单线程.异步.同步概念 从上一篇说明vue nextTick的文章中,多次出现“事件循环”这个名词,简单说明了事件循环的步骤,以便理解nextTick的运行时机,这篇文章将更为详细的分析下事件 ...

随机推荐

  1. JRE与JDK简介

    如何进行 Java 开发: JRE: JDK:

  2. windows 下mysq安装之后的数据恢复案例

    1.进入mysql的安装目录 cd C:\Java\mysql--winx64\bin 2.以默认的账号root,无密码登录mysql默认数据库 mysql -u root mysql 3.查询表us ...

  3. 最简单易懂的Spring Security 身份认证流程讲解

    最简单易懂的Spring Security 身份认证流程讲解 导言 相信大伙对Spring Security这个框架又爱又恨,爱它的强大,恨它的繁琐,其实这是一个误区,Spring Security确 ...

  4. 基于 HTML5 结合互联网+的电力接线图

    前言 “互联网+”思维让数据的搜集和获取更加便捷,并且随着大数据的深度开发和应用,数据分析预测对于提升用户体验有非常重要的价值,同时也为不同行业.不同领域的合作提供了更广阔的空间.传统的发电企业是一个 ...

  5. C语言之四舍五入

    在C语言中,如果进行强制类型转换,它会将所需要取的位数直接提取出来,而其他位数的数字会被直接删除,不会对提取出来的位数有任何影响 所以如果我们需要提高精度,对所取的数进行四舍五入,需要给所需去的数的最 ...

  6. 1 vmware 如何联网,以及行命令令初步

    VMware安装Linux(我安装的是ubuntu),没法上网,上网教程见:https://blog.csdn.net/qq_28090573/article/details/78730552 安装完 ...

  7. springboot maven 报错ArtifactDescriptorException

    maven具体报错提示如下: Description Resource Path Location TypeArtifactDescriptorException: Failed to read ar ...

  8. MyBatis基础:MyBatis缓存(5)

    1. MyBatis缓存简介 MyBatis提供支持一级缓存及二级缓存. 一级缓存: 2.MyBatis一级缓存

  9. BEX5下增加sessionStorage监听器实现页面间数据刷新

    场景: A页面修改了数据,希望B页面能进行及时的同步前端数据,但是假如当A页面修改保存后,去获得B页面的model对象,会增加开发的难度,同时A页面也不能重复利用:假如在B页面的激活事件里面写刷新代码 ...

  10. mysql-笔记--增删改查

    查看数据库:可以使用 show databases; 命令查看已经创建了哪些数据库 指定数据库:在登录后使用 use 语句指定, 命令: use 数据库名;要对一个数据库进行操作, 必须先选择该数据库 ...