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

事件循环（渡一）

news 2026/2/9 13:14:41

一、事件循环

浏览器有哪些进程和线程

浏览器是一个多进程多线程的应用程序，当启动浏览器后，会默认启动多个进程

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

可以在浏览器任务管理器中查看所有进程

其中最主要的进程有：

  • 浏览器进程

    主要负责界面展示，用户交互，子进程管理，内部会启动多个线程处理不同任务

  • 网络进程

    负责加载网络资源，也会启动多个线程

  • 渲染进程

    渲染进程启动后，会开启一个渲染主线程，主线程负责执行HTML，CSS，JS代码

    默认情况下，浏览器会为每个标签页开启一个新的渲染线程，以保证不同的标签页之间互不影响

渲染主线程是如何工作的

渲染主线程是最繁忙的，需要它处理的任务包括但不限于：

  • 解析HTML
  • 解析CSS
  • 计算样式
  • 布局
  • 处理图层
  • 每秒把页面画60次
  • 执行全局的js代码
  • 执行事件处理函数
  • 执行计时器的回调函数
  • … …

渲染主线程如何调度

  1. 在最开始，渲染主线程会进入一个无限循环
  2. 每一次循环都会检查消息队列中是否有任务存在，如果有就取出第一个任务执行，执行完进入下一个循环。如果没有则进行休眠
  3. 其他所有线程（包括其它进程中的线程）可以随时向消息队列中添加任务。新任务会加在末尾，主线程如果休眠则会唤醒

整个过程被称作事件循环（或消息循环）
在这里插入图片描述

若干解释

何为异步

代码在执行过程中，会遇到一些无法立即执行的任务，如

  • 计时完成后需要完成的任务
  • 网络通讯完成后需要执行的任务
  • 用户操作后需要执行的任务

如果让主线程等待，就会导致主线程长期处于阻塞状态，导致浏览器卡死

同步示意图：
在这里插入图片描述

异步示意图：

在这里插入图片描述

js为何阻碍渲染

js的执行和渲染在一个线程中执行

任务有优先级吗

没有优先级，在消息队列中先进先出

消息队列是有优先级的，可以有多个消息队列（延时队列，微队列，交互队列等）

  • 每个任务都有一个任务类型，每个类型的任务必须在同一个队列，不同类型的任务可以分属于不同的队列，再一次事件循环中，浏览器可以根据实际情况从不同队列取任务
  • 浏览器不许准备好一个微队列，微队列中的任务优先于其他任务执行

二、浏览器的渲染原理

渲染时间点

在这里插入图片描述

渲染流水线

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1、解析html

将html解析dom树

在这里插入图片描述

将css解析css树，css对象模型

在这里插入图片描述

解析遇到CSS代码如何处理

为了提高效率，浏览器会启动一个预解析器率先下载和解析CSS

在这里插入图片描述

遇到js代码如何处理

渲染主线程遇到js必须暂停一切行为，等待下载执行完成后才能继续，预解析线程可以分担一点下载js的任务

在这里插入图片描述

2、样式计算

最终生成计算后的样式

在这里插入图片描述

3、布局

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

4、分层

在这里插入图片描述

5、绘制

在这里插入图片描述

在这里插入图片描述

6、分块

在这里插入图片描述

7、光栅化

在这里插入图片描述

8、画

在这里插入图片描述

相关文章：

事件循环（渡一）

一、事件循环 浏览器有哪些进程和线程 浏览器是一个多进程多线程的应用程序，当启动浏览器后，会默认启动多个进程 可以在浏览器任务管理器中查看所有进程 其中最主要的进程有： 浏览器进程 主要负责界面展示，用户交互，…...

编程日记 2023/10/18 12:06:27

eNSP在hybrid接口上配置vlan

一、什么是vlan VLAN（Virtual Local Area Network，虚拟局域网）是一种通信技术，它可以将一个物理的局域网在逻辑上划分成多个广播域。每个VLAN都是一个广播域，VLAN内的主机可以直接通信，而VLAN之间则不能直…...

编程日记 2023/10/18 12:05:26

行为型模式-迭代器模式

迭代器模式是 Java 和 .Net 编程环境中非常常用的设计模式。这种模式用于顺序访问集合对象的元素，不需要知道集合对象的底层表示。 意图：提供一种方法顺序访问一个聚合对象中各个元素, 而又无须暴露该对象的内部表示。 主要解决：不同的方式…...

编程日记 2023/10/18 12:04:25

华为云应用中间件DCS系列—Redis实现（电商网站）秒杀抢购示例

云服务、API、SDK，调试，查看，我都行 阅读短文您可以学习到：应用中间件系列之Redis实现（电商网站）秒杀抢购示例 1 什么是DEVKIT 华为云开发者插件（Huawei Cloud Toolkit）&…...

编程日记 2023/10/18 12:03:25

EasyExcel导出带有下拉框的表头模板

1.接口层 ApiOperation("其他费用配置-模版下载")GetMapping("/downloadTemplate")public void downloadTemplate(HttpServletResponse response) {try {List<String> list Arrays.asList("集团", "平台", "部门", &…...

编程日记 2023/10/18 12:02:24

fastadmin找不到后台控制器。登录之后找不到后台控制器

nginx加配置项 伪静态那块 location / { if (!-e KaTeX parse error: Expected }, got EOF at end of input: … rewrite ^(.*) /index.php?s 1 l a s t ; b r e a k ; r e w r i t e ( . ? p ˙ h p ) ( / . ) 1 last; break; rewrite ^(.?\.php)(/.) 1last;break;rewrit…...

编程日记 2023/10/18 12:00:22

浅谈智能操控及无线测温产品在马来西亚理文造纸雪邦热电站项目中的应用

摘要&#xff1a;为避免因电线接头松动、电缆老化等引发高温造成火灾&#xff0c;所造成的的经济损失巨大&#xff0c;在一些电气设备如大电流电缆设备节点、电力设备局部异常升温部位、开关柜的动静触头&#xff0c;进线与出线母排接点、整流柜中的电气接点、变压器节点、变电…...

编程日记 2023/10/18 11:57:18

打开 Java 新的大门，Solon v2.5.10 发布

Solon 是什么框架&#xff1f; Java 生态级应用开发框架。从零开始构建&#xff0c;有自己的标准规范与开放生态&#xff08;历时五年&#xff0c;具备全球第二级别的生态规模&#xff09;。与其他框架相比&#xff0c;解决了两个重要的痛点&#xff1a;启动慢&#xff0c;费内…...

编程日记 2023/10/18 11:56:17

unity动画_UI动画案例 c#

首先我们打开一个项目 在这个初始界面我们需要做一些准备工作 创建基础通用包 在场景上创建一个Cube 选中Cube 在Window下点击Animation拖拽至运行窗口 点击创建 保存后 这个操作是给Cube添加了一个组件 对Cube_添加一个Position动画 设置几个帧位置的坐标(x,y,z)值 点击运行测…...

编程日记 2023/10/18 11:55:15

“岗课赛证”融通的物联网综合实训室建设方案

一、概述 随着5G技术的普及应用和产业经济的革新发展,物联网产业所呈现的广阔前景带来了对创新型技术技能人才的迫切需求。高职院校物联网专业建设也因此转变为面向国家战略性新兴产业发展需求。当前,“岗位课程竞赛证书”融通的培育理念,是高职院校物联网人才培养和专业优化的…...

编程日记 2023/10/18 11:54:15

Python自动化运维实战——Telnetlib和Netmiko自动化管理网络设备

❤️博客主页&#xff1a; iknow181&#x1f525;系列专栏&#xff1a; Python、JavaSE、JavaWeb、CCNP&#x1f389;欢迎大家点赞&#x1f44d;收藏⭐评论✍ 目录 一、前言 二、准备工作 三、Telnetlib Telnetlib介绍 Telnetlib模块及操作方法介绍 Telnetlib配置设备 T…...

编程日记 2023/10/18 11:53:13

中文编程开发语言工具开发的实际软件案例：称重管理系统软件

中文编程开发语言工具开发的实际软件案例&#xff1a;称重管理系统软件 中文编程开发语言工具开发的实际软件案例&#xff1a;称重管理系统软件&#xff0c;软件可以安装在电脑上&#xff0c;也可以安装在收银机上&#xff0c;支持触摸和鼠标点&#xff0c;想学编程可以关注系统…...

编程日记 2023/10/18 11:52:10

CSS如何画出平行四边形

其实如果项目中有这样的画图 还是会用到的比如 看起来样子怪怪的 哈哈 但是确实可以完成一些需求哈哈哈 这个就要用到一个css3转换的一个 属性了 skew 让一个元素再平面上进行倾斜 div {width: 200px;height: 50px;background-color: #f00;transform: skew(20deg);margin: 100…...

编程日记 2023/10/18 11:51:08

【计算机网络笔记】计算机网络性能（1）——速率、带宽、延迟

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 系列文章目录速率带宽延迟/时延(delay或latency) 下面介绍一些计算机网络中常用的性能指标。在本篇中涉及速…...

编程日记 2023/10/18 11:50:06

数字孪生与智慧城市：重塑未来城市生活的奇迹

今天&#xff0c;我们将探讨数字孪生和智慧城市两个颠覆性技术&#xff0c;它们正引领着未来城市生活的巨大变革。随着科技的飞速发展&#xff0c;数字孪生和智慧城市成为实现可持续发展和提升居民生活质量的关键策略。 数字孪生&#xff1a;实现现实与虚拟的完美融合 数字孪生…...

编程日记 2023/10/18 11:49:05

大势智慧是否支持航拍图片生成3D建模？

答&#xff1a;支持的&#xff0c;重建大师软件可以导入照片完成三维建模。 重建大师是一款专为超大规模实景三维数据生产而设计的集群并行处理软件&#xff0c;输入倾斜照片&#xff0c;激光点云&#xff0c;POS信息及像控点&#xff0c;输出高精度彩色网格模型&#xff0c;可…...

编程日记 2023/10/18 11:48:04

ASO优化之增加APP应用下载安装量的技巧1

想要增加APP应用的下载安装量&#xff0c;首先要在发布之前&#xff0c;分析我们的应用推广策略该如何运作并进行调整。提高知名度的基础是关键词&#xff0c;其次使用社交网络来推广我们的应用程序。 1、基础与规划。 在启动应用程序或者是实行ASO计划之前&#xff0c;需要了…...

编程日记 2023/10/18 11:47:04

点云从入门到精通技术详解100篇-雨雾环境下多传感器融合SLAM方法

目录 前言 国内外研究现状 传统SLAM研究现状 多传感器融合SLAM研究现状...

编程日记 2023/10/18 11:46:02

electron安装失败时配置

electron下载前配置 使用命令打开npm全局配置&#xff0c;C盘下的.npmrc文件。 npm config edit 然后在空白处添加 electron_builder_binaries_mirrorhttps://npmmirror.com/mirrors/electron-builder-binaries/ electron_mirrorhttps://cdn.npmmirror.com/binaries/electr…...

编程日记 2023/10/18 11:45:01

酷开科技为你的电视增添魅力，点亮每一个娱乐瞬间！

有没有想过有一天&#xff0c;你的电视可以像超人一样&#xff0c;为你的每一个娱乐时刻带来炫酷的观影体验。酷开科技&#xff0c;作为智能电视领域内的领军企业&#xff0c;正是你期待的那个“超人”&#xff0c;不妨让我们探索一下酷开科技的独特魅力&#xff0c;为你枯燥乏…...

编程日记 2023/10/18 11:44:00

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/8 4:37:27

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2026/1/23 4:56:05

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

编程新知 2025/10/7 4:57:55

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2026/2/7 10:59:19

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2026/1/31 7:25:57

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

编程新知 2026/2/1 7:18:47

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

编程新知 2025/12/5 3:38:11

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

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

编程新知 2026/1/26 2:22:24

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44