0、从个例子开始

//code-01
console.log(1)
setTimeout(() => {
console.log(2);
});
console.log(3);

稍微有点前端经验的人都知道这段代码输出的应该是 1 3 2,因为setTimeout函数是异步执行。

那么都说js语言是单线程的,就是说是一件事从头到尾做完,那么它是怎么做到异步的呢?

这就要说到浏览器的运行机制了。

1、浏览器的基本机制

关于这部分内容目前了解不是很多,以后有时间再补上详细的内容。浏览器进程大致分为如下几个部分(从其他地方拷的图):



我们所说的js单线程,是指浏览器的js引擎线程只有一个,用来执行js的代码,而浏览器的定时触发器线程事件触发器线程结合,可以实现js语言的异步逻辑。那么js到底是怎么执行异步操作的呢?

我们来看下面这张流程图:

2、js语言事件循环机制-基础



我们来根据以上流程图,再来看 上面代码 code-01,

1.代码开始执行,遇到console.log(1) ,打印 1

2.代码继续执行,遇到setTimeout,此为异步任务,交给异步处理模块(这里可能是定时触发器线程),因为没有延迟时间,所以console.log(2)很快加入到了事件队列中,因为同步任务没有执行完,所以现在不能执行

3.代码继续执行,遇到console.log(3),打印 3

4.代码同步任务执行完毕,查看事件队列中是否有任务,发现有console.log(2),于是打印 2

3、js语言事件循环机制-宏任务与微任务

经过上面的分析,我们对 事件循环机制有了初步的了解,现在我们再来看一个例子:

// code-02
console.log(1)
setTimeout(() => {
console.log(2);
});
new Promise(function(resolve){
console.log(3)
resolve()
}).then(function(){
console.log(4)
})
console.log(5);

上面代码的结果为1 3 5 4 2,

我们知道 promise.then和setTimeout都是异步事件,那为什么then会比setTimeout先执行呢?

其实是因为上面流程图中 事件队列 其实应该分为 宏任务队列微任务队列微任务优先于宏任务,而且要等微任务队列清空,才会去取宏任务队列中的任务。

所以以上流程图应改为:

我们再来根据以上更新的流程图,再来看 上面代码 code-02,

1.代码开始执行,遇到console.log(1) ,打印 1

2.代码继续执行,遇到setTimeout,此为异步任务,交给异步处理模块,因为没有延迟时间,所以console.log(2)很快加入到了宏任务队列

3.代码继续执行,遇到console.log(3),打印 3

4.代码继续执行,遇到then函数,此为异步任务,交给异步处理模块,因为promise马上就resolve,所以console.log(4)很快加入到了微任务队列

5.代码继续执行,遇到遇到console.log(5) ,打印 5

6.代码同步任务执行完毕,查看微任务队列中是否有任务,发现有console.log(4),于是 打印 4

7.微任务队列被清空,查看宏任务队列中是否有任务,发现有console.log(2),于是 打印 2

那么到底有哪些异步任务是宏任务,哪些是微任务呢?

常见的宏任务

1.script代码(整体的外层代码其实就是第一个宏任务)

2.setTimeout,setInterval,setImmediate

3. i/o事件

4. UI事件,比如点击事件

常见的微任务

promise

process.nextTick(Node.js)

4、最后一个例子 - 最少延迟时间

我们再来看最后一个例子

  setTimeout(() => {
console.log(1);
},2);
setTimeout(() => {
console.log(2);
},1);
setTimeout(() => {
console.log(3);
},0);

运行结果为 2 3 1

可能会有人疑惑,照以上的逻辑,不应该是 3 2 1吗? 这是因为 setTimeout官方给出的规定是:最低延迟为 4ms,(这个有限制条件,但没怎么看懂)

但这个最低时间不同环境好像实现的不太一样

就上面代码而言,在Chorme浏览器中,最低延迟1ms,就是说 0ms 和 1ms 是同样的,

所以根据代码顺序,console.log(2)console.log(3)先进入 宏任务队列

5、总结

  1. js是单线程,只能顺序执行代码, 但是浏览器有其他线程可以处理异步情况
  2. js引擎执行代码时,遇到同步任务则顺序执行,遇到异步任务则交由 异步事件处理模块处理
  3. 异步事件处理模块等事件触发条件达成后,将异步任务分别 加入宏任务队列微任务队列
  4. 同步任务执行完毕后,先执行微任务队列任务,等队列清空时,执行宏任务队列
  5. 每一个宏任务 重复 2 步骤

参考

1.Event Loop的规范和实现

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

3.setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop

【运行机制】 JavaScript的事件循环机制总结 eventLoop的更多相关文章

  1. JavaScript 运行机制:Event事件循环机制

    JavaScript Event事件循环机制 JS是单线程的,浏览器只分配一个主线程给JS.一次只能执行一个任务,当前任务执行完后在可以执行下一个任务.任务多时,就会形成任务队列排队等待执行.但是非常 ...

  2. JavaScript的事件循环机制浅析

    前言 JavaScript是一门单线程的弱类型语言,但是我们在开发中,经常会遇到一些需要异步或者等待的处理操作. 类似ajax,亦或者ES6中新增的promise操作用于处理一些回调函数等. 概念 在 ...

  3. javascript的事件循环机制

    JavaScript是一门编程语言,既然是编程语言那么就会有执行时的逻辑先后顺序,那么对于JavaScript来说这额顺序是怎样的呢? 首先我们我们需要明确一点,JavaScript是单线程语言.所谓 ...

  4. 深入理解JavaScript事件循环机制

    前言 众所周知,JavaScript 是一门单线程语言,虽然在 html5 中提出了 Web-Worker ,但这并未改变 JavaScript 是单线程这一核心.可看HTML规范中的这段话: To ...

  5. 关于javascript的事件执行机制理解

    理解javascript事件执行机制 众所周知,js是一个单线程的语言,这意味着同一时间只能做一件事,但是我们又说js是异步的.首先,单线程并不是没有优点.作为浏览器脚本语言,JavaScript 的 ...

  6. 深入浅出Javascript事件循环机制

    一.JS单线程.异步.同步概念 众所周知,JS是单线程(如果一个线程删DOM,一个线程增DOM,浏览器傻逼了-所以只能单着了),虽然有webworker酱紫的多线程出现,但也是在主线程的控制下.web ...

  7. 对javascript EventLoop事件循环机制不一样的理解

    前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...

  8. 一篇文章图文并茂地带你轻松学完 JavaScript 事件循环机制(event loop)

    JavaScript 事件循环机制 (event loop) 本篇文章已经默认你有了基础的 ES6 和 javascript语法 知识. 本篇文章比较细致,如果已经对同步异步,单线程等概念比较熟悉的读 ...

  9. javascript事件循环机制 浅尝手记

    引入 众所周知Javascript是一个单线程的机制,虽然可以依托多线程的浏览器实现页面如何实现页面复杂的渲染.事件响应,但仍不会改变其单线程的本质:所以对于js的事件循环机制的了解是一个前端人员的必 ...

随机推荐

  1. 华为+京东数科(原京东金融)面经--Java后台开发

    华为: 1.笔试中遇到的问题,如何解决的?(Scanner 如何结束循环读取数据,笔者在面试中因没有理解到Scanner类的hasNext()与hasNextLine()是阻塞方法,导致没有正确退出循 ...

  2. 位图bitmap应用

    所有比特的编号方法是,从低字节的低位比特位开始,第一个bit为0,最后一个bit为 n-1. 比如说,现在有个数组是这样子的,int a[4],那么a[0]的比特位为0--31a[1]的比特位为32- ...

  3. python之《matplotlib》

    # _*_coding:utf-8_*_# /usr/bin/env python3# Author:book Mikiimport matplotlib.pyplot as pltimport nu ...

  4. android intent-filter 注册网页链接打开app

    如下实现注册m.hao123.com的链接: <intent-filter><category android:name="android.intent.category. ...

  5. Python pip下载过慢解决方案

    pip是一个python的包安装与管理工具,安装python时候可以选择是否安装,如果安装了pip可以使用命令查看版本 C:\Users\Vincente λ pip -V pip 19.2.3 fr ...

  6. Centos快速安装Docke

    预备 删除旧docker # 删除旧docker $ sudo yum remove docker \ docker-client \ docker-client-latest \ docker-co ...

  7. pikachs 渗透测试1-环境及暴力破解

    一.安装 PhpStudy20180211,默认安装 1.mysql默认密码是root,因为在虚拟机,保留不动 2.解压pikachs 到 C:\phpStudy\PHPTutorial\WWW\pi ...

  8. metasploit数据库使用学习

    metasploit为了方便,自动将当前工作区的内容放入数据库 首先就是工作区 -a 增加工作区,-d删除工作区 不同工作区的内容会分开储存到数据库 default工作区 test工作区 db_imp ...

  9. 【P2634】聪聪可可——点分治

    (题面来自Luogu) 题目描述 聪聪和可可是兄弟俩,他们俩经常为了一些琐事打起来,例如家中只剩下最后一根冰棍而两人都想吃.两个人都想玩儿电脑(可是他们家只有一台电脑)--遇到这种问题,一般情况下石头 ...

  10. Java基础教程——垃圾回收机制

    垃圾回收机制 Garbage Collection,GC 垃圾回收是Java的重要功能之一. |--堆内存:垃圾回收机制只回收堆内存中对象,不回收数据库连接.IO等物理资源. |--失去使用价值,即为 ...