谈一谈浏览器与Node.js中的JavaScript事件循环，宏任务与微任务机制

JavaScript中的异步代码

JavaScript是一个单线程非阻塞的脚本语言。这代表代码是执行在一个主线程上面的。但是JavaScript中有很多耗时的异步操作，例如AJAX，setTimeout等等；也有很多事件，例如用户触发的点击事件，鼠标事件等等。这些异步操作并不会阻塞我们代码的执行。例如：

let a = 1;
setTimeout(() => {console.log('->', a)
}, 10);
a = 2;
// 输出 -> 2

可以看到，上述代码在浏览器中执行时，遇到setTimeout操作，并没有阻塞等待异步操作的结束再继续执行代码，而是先继续执行后面的代码。等异步操作结束后，浏览器再回来执行异步回调中的代码。因此，上述代码的console.log输出时，a的值已经变为了2。

这些异步非阻塞的实现，就是靠Javascript中的事件循环机制。

JavaScript中的线程

上面说到JavaScript是一个单线程的语言，这句话并不完全对。单线程指的是代码在一个主线程中运行，但是代码所触发的任务不一定在主线程运行。除了执行代码的线程之外，执行JavaScript的环境中还包含其他很多线程。其中浏览器的线程与Node.js中的线程也不相同。

浏览器中的线程

注意，这里对于浏览器线程进行了抽象和总结。实际上浏览器的线程和进程要更复杂，而且有时候会根据浏览器版本的不同而变化，因此仅供参考。

  • JS主线程
    负责运行JavaScript代码，解析HTML，CSS，构建DOM树，布局和绘制页面等等。
  • 事件监听线程
    负责监听触发的各种事件，放入事件循环中。
  • HTTP请求线程
    负责处理各类网络请求。
  • 定时触发器线程
    为setInterval，setTimeout定时触发操作等操作进行定时计数的线程。

浏览器中的进程

上面的线程实际上都在浏览器中的渲染进程中包含。一个浏览器要想正常运行，只做上述的操作是不够的。我们以Chrome为例，列举一个浏览器运行所需要的进程。

  • 浏览器进程
    负责网页外的界面功能，例如地址栏，书签等等。
  • GPU进程
    负责使用GPU渲染界面。
  • 网络进程
    负责网络相关的请求处理。
  • 插件进程
    负责浏览器插件运行。
  • 渲染进程
    负责网页内页面展示相关的操作，即上一节浏览器中的线程包含的所有线程都在这个进程中执行。

一个浏览器可以拥有多个标签页，在不同的标签页中，除了渲染进行之外，都是共享的。即我们打开一个新的标签页时，会产生一个新的渲染进程。（当在原标签页中打开新标签页，且属于同一个域则共享一个渲染进程）

进程与线程的关系

上面我们了解了浏览器中的进程和线程，有些同学就会有疑问，为什么要设立这么多的进程和线程？

进程是操作系统分配资源的基本单位，而线程是CPU任务调度和执行的基本单位。

简单理解下就是一个完整的应用程序是以进程为单位的，即至少有一个进程。而一段程序/代码在CPU的独立执行则至少以线程为单位。不同的进程和不同的线程都可以并行运行。

一个进程可以包含很多个线程，多个线程共享一个进程的资源（比如内存）。当一个进程崩溃后不会影响其他进程，但是当一个线程崩溃，它所在的整个进程都会崩溃掉，这个进程内的其他线程也会崩溃。

因此，为了同时并行执行代码和异步请求，浏览器中的渲染进程包含很多线程来并行运行任务。而为了让不同标签页的网页不互相影响，不同标签页拥有独立的渲染进程。这样即使某个网页崩溃，也不会影响其他标签页。

Node.js中的线程

  • JS主线程
    负责运行JavaScript代码。
  • libuv的异步I/O线程池
    负责实现事件循环和异步IO等操作，在不同操作系统的具体实现方式不同。
  • 用户创建的线程

上述这些进程和线程的说明也仅仅是进行了抽象和简化，事实上浏览器和Node.js中的进程和线程数要更多，处理也更复杂。

宏任务与微任务

Javascript中的异步任务大致可以分为两种：宏任务和微任务。宏任务和微任务的执行顺序和优先级是不同的，具体的执行顺序问题我们在事件循环中描述，这里先来看一下，哪些操作属于宏任务，哪些属于微任务。这里仅仅是简单介绍，更详细的要在了解事件循环之后说明。

宏任务

任务浏览器Node.js描述
setTimeout✓✓在指定的毫秒数后调用函数
setInterval✓✓定时调用函数
script标签✓整体代码块
I/O请求✓✓例如文件请求，网络请求等
DOM事件✓例如点击事件，hover事件等
requestAnimationFrame✓浏览器重绘前更新动画
postMessage✓iframe跨域通信
MessageChannel✓✓管道通信
setImmediate✓一次事件循环执行完毕调用

微任务

任务浏览器Node.js描述
Promise中resolve和reject回调✓✓
async函数中的await异步函数✓✓
MutationObserver✓监听DOM变动触发
process.nextTick✓当前任务结束后执行

事件循环

与上面进程与线程的介绍一样，在浏览器中与Node.js中实现循环的方式也并不相同。下面我们来分别简单介绍一下。注意，这仅仅是对执行逻辑的抽象和总结，实际上浏览器和Node.js中的实现要更复杂。

浏览器中的事件循环

浏览器中的事件循环可以分为两个队列，宏任务队列和微任务队列。具体的任务执行顺序如下：

  1. 解析HTML中遇到script标签，开始执行第一个宏任务。
  2. 在宏任务执行中遇到宏任务，执行其中的请求（例如网络请求，定时器），在请求完成后将回调放入宏任务队列中。
  3. 在宏任务执行中遇到微任务，暂不执行回调，而是放入微任务队列中。
  4. 宏任务执行完成。开始依次执行微任务队列中的任务。
  5. 微任务执行中遇到宏任务或者微任务，处理方式同上，分别放入各自的队列中。
  6. 微任务队列清空后，开始执行宏任务队列中的下一个任务。

在事件循环的流程中，微任务的优先级实际上更高，执行完一个宏任务之后，要执行微任务队列中的所有任务。

为什么要区分宏任务和宏任务,优先级也不同

因为不同任务的开销不同，有的任务需要调用不同的线程甚至进程，有的任务需要等待请求返回甚至定时。

  1. 如果将全部的任务同步执行，那些耗时较久的任务会阻塞，造成整个页面加载缓慢。假设有请求A耗时10秒，请求B耗时20秒，如果同步执行，需要耗费30秒。如果将请求由其它线程实现，回调放入宏任务，则执行流程变为：执行代码->碰到A请求,其他线程异步等待返回->继续执行代码->碰到b请求,其他线程异步等待返回。A和B就实现了异步请求，回调被分别放入宏任务，等待下次事件循环。耗时间为20秒。
  2. 为什么微任务的优先级更高？因为微任务大部分是耗时不太久，不需要等待其他线程/进程等待完成通知的。因此，微任务相当于在宏任务的基础上进行了“插队”，拥有更高的优先级，也提高了页面的响应速度。

为什么script标签是宏任务呢？

  1. script标签可能需要异步请求获取，例如<script src="myscripts.js"></script>。
  2. script标签是嵌入在HTML中的，浏览器需要将HTML中的script标签解析出来供执行，这个步骤需要耗费一定的时间。

浏览器事件循环的更多说明

WHATWG（网页超文本应用技术工作小组）在官网对事件循环和任务队列做出了更详细的说明和解释，可以作为参考：说明文档。在新的说明中，任务的分类和事件循环已经有了部分区别，这里简要说一下，更多还请直接查看文档：

  1. 事件循环不一定对应于多线程。例如多个事件循环可以在单个线程中协作调度。
  2. 任务队列并不是一个严格的队列，而是一个集合。每次从队列中取出一个可以被执行的任务，而不是选取第一个任务（可能该任务还在阻塞中）。
  3. 宏任务队列有多个，不同类型的任务(任务源)放置在不同的任务队列中。具体的选取规则浏览器根据实际情况确定。

Node.js中的宏任务队列

Node.js的官网给出了事件循环的文档。它的事件循环要比浏览器的看起来复杂一些。下面是Node.js的宏任务队列。

   ┌───────────────────────────┐
┌─>│           timers          │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       idle, prepare       │
│  └─────────────┬─────────────┘      ┌───────────────┐
│  ┌─────────────┴─────────────┐      │   incoming:   │
│  │           poll            │<─────┤  connections, │
│  └─────────────┬─────────────┘      │   data, etc.  │
│  ┌─────────────┴─────────────┐      └───────────────┘
│  │           check           │
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
└──┤      close callbacks      │└───────────────────────────┘

Node.js的宏任务队列并不是一整个队列，而是根据事件类型做出了区分，分为了六个队列，依次执行：

  1. timers 定时器队列，执行定时器的回调
  2. pending callbacks 挂起的回调函数，用于某些系统回调
  3. idle, prepare 仅在内部使用
  4. poll 执行I/O事件回调
  5. check setImmediate回调
  6. close callbacks close事件的回调，例如 socket.on('close', ...)

其中我们的大部分宏任务回调都会在poll阶段执行，除了timers、check和close callbacks阶段的特殊回调。每个宏任务队列都有自己的微任务队列。

在这里插入图片描述

Node.js事件循环的流程

  1. 首先执行主线代码，遇到宏任务就分配到对应的宏任务队列中，微任务也划分到主线的微任务队列中，直到执行完毕。
  2. 执行主线代码的微任务队列中的所有任务。
  3. 没有宏任务则执行结束，有则开始事件循环。在事件循环中，按照上述的6个宏任务队列依次执行。下面的步骤是单个队列中的流程。
  4. 在单个宏任务队列中，选择一个宏任务执行。如果执行中遇到新的宏任务就分配到对应的宏任务队列中。遇到微任务就放到该宏任务的微任务队列中。
  5. 一个宏任务执行完毕后，执行process.nextTick中的回调（如果有）。
  6. 执行当前宏任务的微任务队列中的任务，直到微任务队列清空。
  7. 在上面的单个宏任务队列中，再选择一个宏任务执行。直到当前宏任务队列清空或者到达上限。
  8. 选择下一个宏任务队列执行。

6个宏任务队列都执行完毕，才叫做一次事件循环执行完毕。

Node.js的11版本之前的区别

其中，在Node.js的11版本之前，宏任务和微任务的执行关系与上述流程不同：

每个宏任务队列有一个微任务队列。在单个宏任务队列中，首先执行完所有的宏任务，如果遇到微任务就放到微任务队列中。当单个宏任务队列中的所有宏任务执行完毕后，再执行该宏任务队列的微任务队列。

对比执行流程的区别，可以看到Node.js的11版本提高了微任务队列中的优先级，让Node.js中微任务队列的优先级和浏览器中的表现类似。而process.nextTick可以看做是一个比微任务更高优先级的钩子。

注意

  • setTimeout的时间即使设置为0，也会有一个最小时间，因此它与setImmediate谁更早执行不一定。
  • 并不是所有回调函数都是异步的。例如new Promise(fun)中的回调是同步执行，在回调中遇到resolve(), reject()等才是微任务异步执行的。

参考

  • JavaScript 之事件循环 (Event Loop)
    https://xie.infoq.cn/article/921841837025748baac847030
  • The Node.js Event Loop, Timers, and process.nextTick()
    https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick
    https://nodejs.org/zh-cn/docs/guides/event-loop-timers-and-nexttick
  • 深入理解浏览器中的进程与线程
    https://juejin.cn/post/6991849728493256741
  • 这一篇浏览器事件循环，可能会颠覆部分人的对宏任务和微任务的理解
    https://juejin.cn/post/7259927532249710653
  • HTML Living Standard (event-loops)
    https://html.spec.whatwg.org/multipage/webappapis.html#event-loops
  • 阿里一面：熟悉事件循环？那谈谈为什么会分为宏任务和微任务
    https://juejin.cn/post/7073099307510923295
  • node.js事件循环简单理解——定时器，process.nextTick()等
    https://blog.csdn.net/qq_46561394/article/details/123172336
  • 手摸手带你彻底掌握，任务队列、事件循环、宏任务、微任务
    https://juejin.cn/post/6979876135182008357
  • 浏览器UI线程和JS线程是同一个线程吗？
    https://www.zhihu.com/question/264253488
  • 微信小程序的双线程设计有何创新之处？浏览器的渲染线程和 JS 线程本来不就是两个独立线程吗？
    https://www.zhihu.com/question/446103629

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/104551.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Nginx入门——Nginx的docker版本和windows版本安装和使用 代理的概念 负载分配策略

Nginx入门——Nginx的docker版本和windows版本安装和使用 代理的概念 负载分配策略

目录 引出nginx是啥正向代理和反向代理正向代理反向代理 nginx的安装使用Docker版本的nginx安装下载创建挂载文件获取配置文件创建docker容器拷贝容器中的配置文件删除容器 创建运行容器开放端口进行代理和测试 Windows版本的使用反向代理多个端口运行日志查看启动关闭重启 负载…
阅读更多...
机器学习之概率论

机器学习之概率论

最近&#xff0c;在了解机器学习相关的数学知识&#xff0c;包括线性代数和概率论的知识&#xff0c;今天&#xff0c;回顾了概率论的知识&#xff0c;贴上几张其他博客的关于概率论的图片&#xff0c;记录学习过程。
阅读更多...
Linux搭建SSLVpn

Linux搭建SSLVpn

安装http、ssl服务 编辑http配置文件 修改http的136行&#xff0c;276行以及990行 1、136行将监听端口注释 2、276行和990行修改为自己的域名和要访问的端口 修改http文档最后那部分 新添ssl配置信息&#xff0c;将端口修改为443&#xff08;截图错了server.key应该放在/etc/…
阅读更多...
第8步---MySQL的存储过程和触发器

第8步---MySQL的存储过程和触发器

第8步---MySQL的存储过程和触发器 1.存储过程 5开始支持的 sql集&#xff0c;类似Java中的代码中的方法 实现对sql的封装和服用 有输入和输出 可以声明变量 可以实现一下复杂的控制语句 1.1入门案例 基本语法 测试数据 -- 创建表的测试数据 create table dept(deptno int pri…
阅读更多...
Python土力学与基础工程计算.PDF-土的三项组成

Python土力学与基础工程计算.PDF-土的三项组成

5.3 Python求解 Python 求解代码如下&#xff1a; 1. # 定义已知参数 2. G_s 2.7 # 比重 3. w 0.2 # 含水量 4. e 0.6 # 孔隙比 5. gamma_w 9.81 # 水的重度 6. 7. # 根据公式计算饱和度 8. S_r G_s * w / e 9. print("饱和度为", S_r) 10. 11.…
阅读更多...
JVM核心原理解读(一)---执行引擎

JVM核心原理解读(一)---执行引擎

Java虚拟机规范制定了Java字节码执行引擎的概念模型,Java执行引擎作用概括起来就是执行编译产生的Java class文件,为用户提供了底层OS的调用,屏蔽了不同平台硬件和OS的差异性,使得编写的代码无差别的在各个平台运行; JVM运行时内存结构 运行时栈帧 局部变量表---方法的局部变…
阅读更多...
创建git项目并提交

创建git项目并提交

1.创建仓库 2.点击创建 3复制gitee码云的HttpS连接 4 提交上传 打开项目并点击菜单栏上的【CVS】–》【Import into version control】–》【Create Git Repository】创建本地仓库 在打开的【Create Git Repository】对话框内选择本地仓库的位置&#xff0c;这里我选择…
阅读更多...
java八股文面试[数据结构]——Map有哪些子类

java八股文面试[数据结构]——Map有哪些子类

知识来源&#xff1a; 【23版面试突击】 用过哪些Map类&#xff0c;都有什么区别&#xff0c;HashMap是线程安全的吗&#xff1f;_哔哩哔哩_bilibili https://www.cnblogs.com/bubbleboom/p/12694013.html
阅读更多...
RISC-V公测平台发布 · 数据库在RISC-V服务器上的适配评估

RISC-V公测平台发布 · 数据库在RISC-V服务器上的适配评估

前言 上一期讲到YCSB在RISC-V服务器上对MySQL进行性能测试&#xff08;RISC-V公测平台发布 使用YCSB测试SG2042上的MySQL性能&#xff09;&#xff0c;在这一期文章中&#xff0c;我们继续深入讨论RISC-V数据库的应用。本期就继续利用HS-2平台来测试数据库软件在RISC-V服务器…
阅读更多...
HarmonyOS ArkUI 属性动画入门详解

HarmonyOS ArkUI 属性动画入门详解

HarmonyOS ArkUI 属性动画入门详解 前言属性动画是什么&#xff1f;我们借助官方的话来说&#xff0c;我们自己简单归纳下 参数解释举个例子旋转动画 位移动画组合动画总结 前言 鸿蒙OS最近吹的很凶&#xff0c;赶紧卷一下。学习过程中发现很多人吐槽官方属性动画这一章比较敷…
阅读更多...
CSS 盒子模型

CSS 盒子模型

前言 盒子模型-组成 CSS盒子模型是一种用来描述元素在页面布局中占据空间的模型。它将每个元素看作由内容区域、内边距、边框和外边距组成的一个矩形框。 盒子模型的组成部分包括&#xff1a; 内容区域&#xff08;Content&#xff09;&#xff1a;显示元素的实际内容&#xf…
阅读更多...
商城的TPS与并发用户数是如何换算的?

商城的TPS与并发用户数是如何换算的?

商城的TPS与并发用户数的换算关系可以通过以下公式计算&#xff1a; TPS 并发用户数 / 平均事务响应时间 其中&#xff0c;平均事务响应时间是指系统处理一个事务所需的平均时间。 下面是商城性能测试的一些用例示例&#xff1a; 用户登录&#xff1a; 目标&#xff1a;测…
阅读更多...
Docker的革命：容器技术如何重塑软件部署之路

Docker的革命：容器技术如何重塑软件部署之路

引言 在过去的几年中&#xff0c;容器技术已经从一个小众的概念发展成为软件开发和部署的主流方法。Docker&#xff0c;作为这一变革的先驱&#xff0c;已经深深地影响了我们如何构建、部署和运行应用程序。本文将探讨容器技术的起源&#xff0c;Docker如何崛起并改变了软件部…
阅读更多...
centos7安装MySQL8

centos7安装MySQL8

Centos7安装MySQL8 MySQL版本&#xff1a;8.0.34 1.安装前准备 &#xff08;1&#xff09;查看是否安装mariadb [rootkb135 ~]# rpm -qa|grep mariadb &#xff08;2&#xff09;卸载mariadb并检查是否卸干净 [rootkb135 ~]# rpm -e --nodeps mariadb-libs-5.5.68-1.el7.x8…
阅读更多...
vue 简单实验 v-on html事件绑定

vue 简单实验 v-on html事件绑定

1.代码 <script src"https://unpkg.com/vuenext" rel"external nofollow" ></script> <div id"event-handling"><p>{{ message }}</p><button v-on:click"reverseMessage">反转 Message</but…
阅读更多...
Selenium环境+元素定位大法

Selenium环境+元素定位大法

selenium 与 webdriver Selenium 是一个用于 Web 测试的工具&#xff0c;测试运行在浏览器中&#xff0c;就像真正的用户在手工操作一样。支持所有主流浏览器 WebDriver 就是对浏览器提供的原生API进行封装&#xff0c;使其成为一套更加面向对象的Selenium WebDriver API。 使…
阅读更多...
限制立方样条（RCS）中的P for overall和P for nonlinear的计算

限制立方样条（RCS）中的P for overall和P for nonlinear的计算

最近不少人私信我&#xff0c;说有些SCI文章报了两个P值一个是P for overall,一个是P for nonlinear,就像下图这样&#xff0c;问我P for overall怎么计算。 P for overall我也不清楚是什么&#xff0c;有些博主说这个是总效应的P值&#xff0c;但是我没有找到相关出处。但是怎…
阅读更多...
CnetSDK .NET OCR SDK Crack

CnetSDK .NET OCR SDK Crack

CnetSDK .NET OCR SDK Crack CnetSDK.NET OCR库SDK是一款高度准确的.NET OCR扫描仪软件&#xff0c;用于使用手写、文本和其他符号等图像进行字符识别。它是一款.NET OCR库软件&#xff0c;使用Tesseract OCR引擎技术&#xff0c;可将字符识别准确率提高99%。通过将此.NET OCR扫…
阅读更多...
CodeSite for .NET Crack

CodeSite for .NET Crack

CodeSite for .NET Crack CodeSite for.NET与Visual Studio集成&#xff0c;通过实时查看器日志记录系统提供对代码执行的更深入了解&#xff0c;该系统有助于在本地或远程执行代码时快速查找问题。超越传统的断点调试&#xff0c;在应用程序继续运行时记录应用程序的执行&…
阅读更多...
Java基础之IO流File类创建及删除

Java基础之IO流File类创建及删除

1.File类概述及构造方法 2.File类创建功能 文件创建成功&#xff01; 如果文件不存在&#xff0c;就创建文件&#xff0c;并返回true 如果文件存在&#xff0c;就不创建文件&#xff0c;并返回false 如果文件夹不存在&#xff0c;就创建文件夹&#xff0c;并返回true 如果文件…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023