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

事件循环（渡一）

news 2026/4/2 23:17:07

一、事件循环

浏览器有哪些进程和线程

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

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

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

其中最主要的进程有：

  • 浏览器进程

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

  • 网络进程

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

  • 渲染进程

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

告别手动转换！用Python自动化处理CSV到Little_R的完整指南

告别手动转换&#xff01;用Python自动化处理CSV到Little_R的完整指南 在数据科学和机器学习领域&#xff0c;数据格式转换是一项频繁且耗时的任务。特别是当我们需要将常见的CSV格式转换为特定领域专用的Little_R格式时&#xff0c;手动操作不仅效率低下&#xff0c;还容易出错…...

编程新知 2026/4/2 22:40:09

论文AI率高不等于抄袭2026年高校政策盘点

论文AI率高&#xff0c;会不会被认定为学术不端&#xff1f;会不会影响毕业&#xff1f;和传统的"查重超标"性质一样吗&#xff1f; 这些问题在2026年毕业季被问得很多。这篇文章梳理清楚。 AI率高和抄袭&#xff1a;两件不同的事 先把概念说清楚&#xff1a; 传…...

编程新知 2026/4/2 21:55:27

新手零基础入门：借助快马AI生成带注释的微信小程序示例代码

作为一个刚接触微信小程序开发的新手&#xff0c;我最近在InsCode(快马)平台上尝试了一个特别适合零基础学习的实践项目。这个平台最让我惊喜的是&#xff0c;只需要用自然语言描述需求&#xff0c;就能快速生成带详细注释的完整代码&#xff0c;这对理解小程序开发流程帮助很大…...

编程新知 2026/4/2 20:24:02

从0到1落地智能仓储：C#上位机+Modbus RTU实现AGV集群调度与货物自动分拣

本文是纯实战、可直接落地的智能仓储完整方案，基于C# .NET 6 + Modbus RTU/Modbus TCP + AGV调度 + 自动分拣，从零搭建一套轻量级、低成本、高可靠的智能仓储系统，适用于电商仓库、工厂原料仓、成品仓、立体库。 无废话、无虚架构，代码可直接复制运行，适合新手从0到1上手智…...

编程新知 2026/4/2 20:09:54

基于三菱PLC的自动配料控制系统的设计

基于PLC的自动配料控制系统设计【配套10000字设计lumwen&#xff0c;三菱PLC组态王组态等】 基于三菱PLC的自动配料控制系统的设计 混凝土搅拌站分为&#xff1a;砂石给料、水和一些特殊的加剂给料、传输搅拌与存储 搅拌机控制系统上电后&#xff0c;进入人机对话的操作界面&am…...

编程新知 2026/4/2 17:17:09

抖音视频批量下载终极指南：5分钟掌握高效下载技巧

抖音视频批量下载终极指南&#xff1a;5分钟掌握高效下载技巧 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fallback support. …...

编程新知 2026/4/2 17:11:06

Steam API集成：构建智能游戏生态的完整PHP解决方案

Steam API集成&#xff1a;构建智能游戏生态的完整PHP解决方案 【免费下载链接】Steam A composer package to make use of the steam web api. 项目地址: https://gitcode.com/gh_mirrors/stea/Steam 在当今游戏开发和社区管理领域&#xff0c;与Steam平台的深度集成已…...

编程新知 2026/4/2 16:21:45

linux下的spi子系统

概念通信模式可以分为单工、半双工和全双工&#xff0c;单工通信指信号只在一个方向上传输&#xff0c;仅 能发送或接收&#xff0c;而半双工通信指信号可以在俩个方向上传输&#xff0c;但某一个时刻只允许发送或接收&#xff0c;而全双工通信指数据同时在俩个方向上传输&…...

编程新知 2026/4/2 16:01:30

SIP系列四：SIP消息格式实战解析与调试指南

1. SIP消息格式深度拆解&#xff1a;从理论到抓包实战 第一次用Wireshark抓取SIP消息时&#xff0c;我被满屏的Header字段搞得头晕眼花。直到后来才发现&#xff0c;这些看似复杂的文本背后藏着精妙的设计逻辑。我们先从最基础的SIP消息结构说起——它就像快递包裹的运单&…...

编程新知 2026/4/2 13:46:48

3步安全卸载：EdgeRemover的非强制解决方案

3步安全卸载&#xff1a;EdgeRemover的非强制解决方案 【免费下载链接】EdgeRemover PowerShell script to remove Microsoft Edge in a non-forceful manner. 项目地址: https://gitcode.com/gh_mirrors/ed/EdgeRemover Windows Edge卸载过程中如何确保系统安全&#x…...

编程新知 2026/4/2 13:38:42