当前位置： 首页 > news >正文

浏览器 - 事件循环机制详解

news 2025/9/14 0:30:56

目录

  • 1，浏览器进程模型
    • 进程
    • 线程
    • 浏览器的进程和线程
      • 1，浏览器进程
      • 2，网络进程
      • 3，渲染进程
  • 2，渲染主线程
    • 事件循环
    • 异步
    • 同步 JS 为什么会阻塞渲染
    • 任务优先级
  • 3，常见面试题
    • 1，如何理解 js 的异步
    • 2，讲一下 js 的事件循环
    • 3，js 能做到精准计时吗

1，浏览器进程模型

进程

简单理解：程序的运行是需要内存空间的。这块内存空间就可以理解为进程。

另外每个应用程序至少会有一个进程。进程之间相互独立，通信需要双方同意。

线程

有了进程（内存）后，就能运行程序了。而具体运行程序代码的是进程的小弟——线程。

  • 1个进程至少有1个线程（因为需要线程来运行程序代码）。所以在进程开启后，会默认创建1个线程——主线程。
  • 如果程序需要同时执行多个代码，会由主线程来开启更多的线程来执行。所以进程和线程之间是一对多的关系。
    在这里插入图片描述

浏览器的进程和线程

现在浏览器是一个多进程多线程的程序。为了避免相互影响和减少连环崩溃的概率，当启动浏览器程序后，它会自动启动多个进程。

在这里插入图片描述

其中主要的进程有：

1，浏览器进程

主要负责页面显示，用户交互（比如点击滑动），子进程管理。它会启动多个线程来处理不同的任务。

2，网络进程

负责加载网络资源，它也会启动多个线程来处理各种网络任务。

3，渲染进程

它默认创建的主线程，被称为渲染主线程。负责执行 HTML CSS JS 代码。

默认情况下，浏览器会为每个标签页创建1个新的渲染进程，以保证不同标签页之间互不影响。

2，渲染主线程

事件循环

渲染主线程是浏览器中最忙的线程，因为需要处理的东西有很多，包括但不限于：

  1. 解析 HTML
  2. 解析 CSS
  3. 计算样式
  4. 布局
  5. 处理图层
  6. 画页面 60次/s
  7. 执行全局 js 代码
  8. 执行绑定事件的处理函数
  9. 执行计时器中的回调函数
    …

问题来了，如何调度这么多的任务？举例来说

  • 正在执行 js 函数的过程中，用户点击了某个按钮，是否应该立即执行点击事件的处理函数？
  • 正在执行 js 函数的过程中，计时器时间到了，是否应该立即执行对应的回调函数？
  • 计时器时间到了，同时又点击了按钮，应该先执行哪个？

渲染主线程通过排队的方式来处理这个问题。
在这里插入图片描述
1，渲染主线程会进入无限循环。

2，每次循环会检查消息队列中是否存在任务 --> 有则取出第1个任务执行–> 执行完进入下次循环。没有任务则进入休眠状态。

3，其他所有线程（包括其他进程的子线程），可以随时向消息队列的末尾添加任务。
添加任务时，如果渲染主线程是休眠状态，则会唤醒让它继续循环取出任务执行。

注意，消息队列不止一个（常见有微队列，延时队列，交互队列）。

以上整个过程被称为——事件循环。

异步

在执行代码时，会遇到一些无法立即处理的任务。

  • 计时器结束时需要执行的任务。—— setTimeout setInterval
  • 网络通信完成后需要执行的任务。—— XHR Fetch
  • 用于操作后需要执行的任务。—— EventListener

如果渲染主线程一直等待这些任务的时间点到来，那就会一直处于阻塞的状态，表现为浏览器卡死。

浏览器选择用异步来解决这个问题。这样渲染主线程永不阻塞。

在这里插入图片描述

同步 JS 为什么会阻塞渲染

因为 js 运行在渲染主线程中，所以是单线程的语言。而渲染主线程有许多的工作，包括渲染页面和执行全局 js。

举例：

<body><h1>下雪天的夏风</h1><button>更改内容</button><script>const h1 = document.querySelector("h1");const btn = document.querySelector("button");btn.addEventListener("click", function () {h1.textContent = "求关注";delay(2000);});// 死循环的时间 sfunction delay(duration) {const start = Date.now();while (Date.now() - start < duration) {}}</script>
</body>

点击按钮效果：
在这里插入图片描述
解释：首先，页面内容需要重新绘制才会更新。

1，当全局 js 执行到绑定事件时，会通知交互线程来处理。当某个时间用户点击后，会将 fn 包装为任务发送给消息队列。

2，当 fn 执行时，第1条语句会创建1个绘制任务，接着死循环 2s 后，此时 fn 才执行完成。渲染主线程再去消息队列中看有没有新的任务。

这就是同步 js 会阻塞渲染的原因。
在这里插入图片描述

任务优先级

任务没有优先级，在消息队列中先进先出。但消息队列有优先级！

1，每个任务都有一个任务类型，同一类型的任务必须在一个队列；不同类型的任务可以分属不同的队列。
一次事件循环中，浏览器可以根据实际情况选择从不同的队列中取出任务执行。

2，队列也有 VIP。浏览器必须准备好一个微队列，微队列中的任务优先其他所有任务执行。

现代浏览器的复杂度升高了许多，W3C 不再使用宏队列的说法。
不过我们可以简单的将，除微队列之外的其他队列 “统一看做宏队列”。

3，在目前的 Chrome 浏览器中，至少包含了以下队列（其他的和前端开发关系不大，省略）

  • 微队列，存放需要最快执行的任务，优先级最高。
  • 交互队列，存放用户操作后产生的事件处理任务，优先级高。
  • 延时队列，存放计时器时间结束后的回调任务，优先级中。

交互队列和延时队列，优先级举例如下：

可以理解为：用户的交互行为需要立即响应，而计时器已经等了一段时间了再等一小会也无所谓。

<body><button id="btn1">初始化</button><button id="btn2">执行交互队列</button><script>/* 1，addDelay()执行完成时（2s后），计时器的回调函数 A，会被添加到延时队列。2，接着 addInteraction() 执行完成时（2s后），会将按钮点击事件的回调函数 B，会被添加到交互队列。3，此时，点击【执行交互队列】，交互队列中的 B 会先于延时队列中的 A 执行。*/const init = document.querySelector("#btn1");const btnInteraction = document.querySelector("#btn2");init.addEventListener("click", function () {addDelay();addInteraction();// “添加交互队列” 被打印后，需要立即点击【执行交互队列】console.log("-----");});function addDelay() {console.log("添加延时队列");setTimeout(() => {console.log("执行延时队列");}, 0);// 等 2s 为了保证 addDelay 执行完后，计时器的回调函数添加到延时队列delay(2000);}function addInteraction() {console.log("添加交互队列");btnInteraction.addEventListener("click", function () {console.log("执行交互队列");});// 等 2s 为了保证 addInteraction 执行完后，按钮点击事件的回调函数添加到交互队列delay(2000);}function delay(duration) {const start = Date.now();while (Date.now() - start < duration) {}}</script>
</body>

效果：

在这里插入图片描述

另外，添加任务到微队列，主要使用 Promise 和 MutationObserver

// 立即把 fn 添加到微队列。
Promise.resolve().then(fn)

几个测试题：

1，结果: 2，1

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

2，结果：5，4，3，1，2

function a() {console.log(1);Promise.resolve().then(function () {console.log(2);});
}setTimeout(() => {console.log(3);Promise.resolve().then(a);
}, 0);Promise.resolve().then(function () {console.log(4);
});console.log(5);

3，结果：5，1，2，3

function a() {console.log(1);Promise.resolve().then(function () {console.log(2);});
}setTimeout(() => {console.log(3);
}, 0);Promise.resolve().then(a);console.log(5);

3，常见面试题

搞清楚了上面的内容后，下面的问题也就比较简单了。

单线程是异步产生的原因。
事件循环是异步的实现方式。

1，如何理解 js 的异步

因为 js 运行在渲染主线程中，所以是单线程的语言。而渲染主线程有许多的工作，包括渲染页面和执行全局 js。

如果使用同步的方式，大概率会造成渲染主线程阻塞，进而导致消息队列中的很多其他任务无法及时执行。表现为页面无法及时更新，给用户造成浏览器卡死的现象。

所以浏览器采用异步的方式来避免这个问题。具体做法：

当有某些任务产生后，计时器，网络通信，事件监听等，渲染主线程会交给其他对应线程去处理，自身继续执行后面的代码。当其他线程处理完成后，会将实现传递的回调函数包装为任务，发送到消息队列末尾，等待渲染主线程调度执行。

在这种异步模式下，浏览器不会被阻塞，最大限度的保证了单线程的流畅运行。

2，讲一下 js 的事件循环

事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。

在 Chrome 的源码中，会开启一个不会结束的 for 循环for(;;){}，每次循环从消息队列中取出第1个任务执行，其他线程将产生的任务加入到消息队列末尾即可。

过去把消息队列简单的分为微队列和宏队列。现在已经无法满足现代浏览器的复杂环境了。

根据 W3C 的解释，每个任务都有类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。而不同队列的优先级也不一样。

一次事件循环中，由浏览器来决定调取那个队里中的任务。同时必须有一个优先级最高的微队列，必须优先调度执行。

3，js 能做到精准计时吗

不能。

1，受事件循环的影响，计时器的回调函数所在的延时队列优先级较低，这样即便倒计时结束，也得等某些队列的任务执行完成，所以会带来偏差。

2，W3C 的标准，浏览器实现的倒计时，如果嵌套超过5层，默认会有 4ms 的最少时间，这也是可能的偏差。

3，操作系统的计时函数本身就有少量误差，js 计时器调用的就是它，所以也会有偏差。

4，计算机硬件没有原子钟，无法做到精准计时。

原子钟（英语：Atomic clock）是一种时钟，它以原子共振频率标准来计算及保持时间的准确。原子钟是世界上已知最准确的时间测量和频率标准，也是国际时间和频率转换的基准，用来控制电视广播和全球定位系统卫星的讯号。

以上。

参考：渡一教育。

相关文章：

浏览器 - 事件循环机制详解

目录 1&#xff0c;浏览器进程模型进程线程浏览器的进程和线程1&#xff0c;浏览器进程2&#xff0c;网络进程3&#xff0c;渲染进程 2&#xff0c;渲染主线程事件循环异步同步 JS 为什么会阻塞渲染任务优先级 3&#xff0c;常见面试题1&#xff0c;如何理解 js 的异步2&#x…...

编程日记 2023/8/20 12:33:18

析构函数中不应该抛出异常（摘录）

析构函数中抛出异常时概括性总结 从语法上面讲&#xff0c;析构函数抛出异常是可以的&#xff0c;C并没有禁止析构函数引发异常&#xff0c;但是C不推荐这一做法&#xff0c;从析构函数中抛出异常是及其危险的。 如果析构函数抛出异常&#xff0c;则异常点之后的程序不会执行&a…...

编程日记 2023/8/20 12:32:17

Windows定时任务计划无法显示任务程序界面的问题解决

笔者这两天写了一个python脚本程序&#xff0c;用来自动从公司的主数据系统获取数据&#xff0c;并按格式编制成excel。脚本程序编写一切顺利&#xff0c;运行结果很是完美&#xff0c;笔者很是舒心。但在最后一步&#xff0c;用上班的电脑每天早上定时运行它时&#xff0c;出了…...

编程日记 2023/8/20 12:31:16

【Azure API 管理】APIM如何实现对部分固定IP进行访问次数限制呢？如60秒10次请求

问题描述 使用Azure API Management, 想对一些固定的IP地址进行访问次数的限制&#xff0c;如被限制的IP地址一分钟可以访问10次&#xff0c;而不被限制的IP地址则可以无限访问&#xff1f; ChatGPT 解答 最近ChatGPT爆火&#xff0c;所以也把这个问题让ChatGPT来解答&#x…...

编程日记 2023/8/20 12:30:15

Python学习笔记_进阶篇(二)_django知识(一)

本章简介&#xff1a; Django 简介Django 基本配置Django urlDjango viewDjango 模板语言Django Form Django 简介 Django是一个开放源代码的Web应用框架&#xff0c;由Python写成。采用了MVC的软件设计模式&#xff0c;即模型M&#xff0c;视图V和控制器C。它最初是被开发来…...

编程日记 2023/8/20 12:29:14

【hive】hive中row_number() rank() dense_rank()的用法

hive中row_number() rank() dense_rank()的用法 一、函数说明 主要是配合over()窗口函数来使用的&#xff0c;通过over(partition by order by )来反映统计值的记录。 rank() over()是跳跃排序&#xff0c;有两个第二名时接下来就是第四名(同样是在各个分组内)dense_rank() …...

编程日记 2023/8/20 12:28:12

【云原生】【k8s】Kubernetes+EFK构建日志分析安装部署

目录 EFK安装部署 一、环境准备&#xff08;所有主机&#xff09; 1、主机初始化配置 2、配置主机名并绑定hosts&#xff0c;不同主机名称不同 3、主机配置初始化 4、部署docker环境 二、部署kubernetes集群 1、组件介绍 2、配置阿里云yum源 3、安装kubelet kubeadm …...

编程日记 2023/8/20 12:27:11

计算实数数组中所有元素的绝对值 numpy.fabs()

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 计算实数数组中所有元素的绝对值 numpy.fabs() [太阳]选择题 请问关于以下代码表述错误的是&#xff1f; iimport numpy as np a np.array([-1,-3]) b np.array([-1,34j]) print("【显…...

编程日记 2023/8/20 12:26:09

深入浅出Pytorch函数——torch.nn.init.orthogonal_

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…...

编程日记 2023/8/20 12:25:08

ORACLE中UNION、UNION ALL、MINUS、INTERSECT学习

1、UNION和UNION ALL的使用与区别 如果我们需要将两个select语句的结果作为一个整体显示出来&#xff0c;我们就需要用到union或者union all关键字。union的作用是将多个结果合并在一起显示出来。 union和union all的区别是union会自动压缩多个结果集合中的重复结果&#xff…...

编程日记 2023/8/20 12:24:06

【k8s、云原生】基于metrics-server弹性伸缩

第四阶段 时 间&#xff1a;2023年8月18日 参加人&#xff1a;全班人员 内 容&#xff1a; 基于metrics-server弹性伸缩 目录 一、Kubernetes部署方式 &#xff08;一&#xff09;minikube &#xff08;二&#xff09;二进制包 &#xff08;三&#xff09;Kubeadm 二…...

编程日记 2023/8/20 12:23:05

回归预测 | MATLAB实现WOA-SVM鲸鱼算法优化支持向量机多输入单输出回归预测（多指标，多图）

回归预测 | MATLAB实现WOA-SVM鲸鱼算法优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现WOA-SVM鲸鱼算法优化支持向量机多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍程…...

编程日记 2023/8/20 12:22:03

VSCode快捷键

CtrlShiftP&#xff0c;F1&#xff1a;显示命令面板 CtrlP&#xff1a;快速打开 CtrlShiftN&#xff1a;新窗口/实例 CtrlShiftW&#xff1a;关闭窗口/实例 CtrlX&#xff1a;剪切行 CtrlC&#xff1a;复制行 ALT↑/↓&#xff1a;上下移动 ShiftAlt↓/↑&#xff1a;向…...

编程日记 2023/8/20 12:21:02

贪心算法求数组中能组成三角形的最大周长

题目&#xff1a;三角形的最大周长 给定由一些正数(代表长度)组成的数组arr,返回由其中三个长度组成的、面积不为零的三角形的最大周长。 如果不能形成任何面积不为零的三角形&#xff0c;返回0。 分析&#xff1a; 对数组排序&#xff0c;再从大到小选择三个数&#xff0c;再…...

编程日记 2023/8/20 12:20:01

VMWare Workstation 17 Pro 网络设置 桥接模式 网络地址转换(NAT)模式 仅主机模式

文章目录 网络模式配网要求CentOSDHCP虚拟网络桥接模式默认配置测试手动配置测试 网络地址转发模式 (NAT)还原配置虚拟网络配置默认配置测试手动配置测试 仅主机模式 网络模式 桥接模式: 主机与虚拟机对等, 虚拟机注册到主机所在的局域网, 会占用该网络的IP该局域网内的所有机…...

编程日记 2023/8/20 12:18:59

拒绝摆烂！C语言练习打卡第四天

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;每日一练 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、选择题 &#x1f4dd;1.第一题 &#x1f4dd;2.第二题 &#x1f4d…...

编程日记 2023/8/20 12:17:57

KubeSphere 社区双周报 | Java functions framework 支持 SkyWalking | 2023.8.4-8.17

KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书、新增的讲师证书以及两周内提交过 commit 的贡献者&#xff0c;并对近期重要的 PR 进行解析&#xff0c;同时还包含了线上/线下活动和布道推广等一系列社区动态。 本次双周报涵盖时间为&#xff1a;2023.08.04-2023.…...

编程日记 2023/8/20 12:16:56

【学习笔记之java】使用RestTemplate调用第三方接口

1.首先需要导入依赖 <!-- RestTemplate使用导入的依赖--><dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpclient</artifactId><version>4.5.13</version></dependency>2.跟启动类同级创建…...

编程日记 2023/8/20 12:15:54

数据集成革新：去中心化微服务集群的无限潜能

在当今数据密集型的业务环境下&#xff0c;传统的集中式架构已经难以满足高可用性和高并发性的要求。而去中心化微服务集群则通过分散式的架构&#xff0c;将系统划分为多个小型的、独立部署的微服务单元&#xff0c;每个微服务负责特定的业务功能&#xff0c;实现了系统的高度…...

编程日记 2023/8/20 12:14:53

后端返回可下载的xlsx文件，但是前端接收下载后为乱码

我的接收数据进行处理的代码为&#xff1a; download_signal_list() {return new Promise((resolve, reject) > {get_download_signal({project_id: this.projectId,version_id: this.versionId}).then(response > {const url window.URL.createObjectURL(new Blob([res…...

编程日记 2023/8/20 12:13:51

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2025/9/13 17:47:36

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/9/8 23:14:43

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/9/12 18:19:00

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2025/8/9 2:28:15

WordPress插件：AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

编程新知 2025/8/18 10:51:07

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/8/28 21:08:38

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/8/9 23:42:13

C/C++ 中附加包含目录、附加库目录与附加依赖项详解

在 C/C 编程的编译和链接过程中&#xff0c;附加包含目录、附加库目录和附加依赖项是三个至关重要的设置&#xff0c;它们相互配合&#xff0c;确保程序能够正确引用外部资源并顺利构建。虽然在学习过程中&#xff0c;这些概念容易让人混淆&#xff0c;但深入理解它们的作用和联…...

编程新知 2025/9/3 11:05:24

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/7/8 3:08:09