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

事件循环（渡一）

news 2025/11/4 9:41:34

一、事件循环

浏览器有哪些进程和线程

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

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

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

其中最主要的进程有：

  • 浏览器进程

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

  • 网络进程

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

  • 渲染进程

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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/11/3 20:06:01

【第二十一章 SDIO接口(SDIO)】

第二十一章 SDIO接口 目录 第二十一章 SDIO接口(SDIO) 1 SDIO 主要功能 2 SDIO 总线拓扑 3 SDIO 功能描述 3.1 SDIO 适配器 3.2 SDIOAHB 接口 4 卡功能描述 4.1 卡识别模式 4.2 卡复位 4.3 操作电压范围确认 4.4 卡识别过程 4.5 写数据块 4.6 读数据块 4.7 数据流…...

编程新知 2025/11/3 11:14:50

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/11/3 17:58:12

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2025/10/26 5:13:25

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/9/20 22:30:25

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2025/10/30 5:13:28

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2025/11/3 20:08:57

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2025/10/29 14:41:59

【Veristand】Veristand环境安装教程-Linux RT / Windows

首先声明&#xff0c;此教程是针对Simulink编译模型并导入Veristand中编写的&#xff0c;同时需要注意的是老用户编译可能用的是Veristand Model Framework&#xff0c;那个是历史版本&#xff0c;且NI不会再维护&#xff0c;新版本编译支持为VeriStand Model Generation Suppo…...

编程新知 2025/11/2 0:19:12

FTXUI::Dom 模块

DOM 模块定义了分层的 FTXUI::Element 树&#xff0c;可用于构建复杂的终端界面&#xff0c;支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...

编程新知 2025/10/24 21:13:51