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

事件循环（渡一）

news 2025/9/14 18:39:16

一、事件循环

浏览器有哪些进程和线程

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

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

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

其中最主要的进程有：

  • 浏览器进程

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

  • 网络进程

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

  • 渲染进程

    渲染进程启动后，会开启一个渲染主线程，主线程负责执行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

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2025/9/13 17:44:06

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

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

编程新知 2025/9/9 22:39:04

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/9/14 12:34:56

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/8/19 20:22:44

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/9/13 20:11:00

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/9/7 8:51:02

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

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

聚六亚甲基单胍盐酸盐市场深度解析：现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...

编程新知 2025/9/9 10:04:05

AWS vs 阿里云：功能、服务与性能对比指南

在云计算领域&#xff0c;Amazon Web Services (AWS) 和阿里云 (Alibaba Cloud) 是全球领先的提供商&#xff0c;各自在功能范围、服务生态系统、性能表现和适用场景上具有独特优势。基于提供的引用[1]-[5]&#xff0c;我将从功能、服务和性能三个方面进行结构化对比分析&#…...

编程新知 2025/7/19 7:03:40