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

事件循环（渡一）

news 2026/5/20 14:19:36

一、事件循环

浏览器有哪些进程和线程

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

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

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

其中最主要的进程有：

  • 浏览器进程

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

  • 网络进程

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

  • 渲染进程

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

基于MCP3421高精度ADC的电池电量监测方案设计与实践

1. 项目概述&#xff1a;为什么需要一个专用的电量监测板&#xff1f;在嵌入式开发和物联网设备中&#xff0c;电池供电是常态。无论是手持仪表、无线传感器节点还是便携式医疗设备&#xff0c;准确掌握电池的剩余电量&#xff0c;就像司机需要时刻关注油表一样&#xff0c;是确…...

编程新知 2026/5/20 13:37:26

彻底告别iPhone过热降频！thermalmonitordDisabler让你的设备性能满血释放

彻底告别iPhone过热降频&#xff01;thermalmonitordDisabler让你的设备性能满血释放 【免费下载链接】thermalmonitordDisabler A tool used to disable iOS daemons. 项目地址: https://gitcode.com/gh_mirrors/th/thermalmonitordDisabler 你是否曾经在游戏激战中突然…...

编程新知 2026/5/20 13:34:44

探索Harepacker复活版：打造你的MapleStory创意工坊

探索Harepacker复活版&#xff1a;打造你的MapleStory创意工坊 【免费下载链接】Harepacker-resurrected All in one .wz file/map editor for MapleStory game files 项目地址: https://gitcode.com/gh_mirrors/ha/Harepacker-resurrected 你是否曾经梦想过亲手改造Map…...

编程新知 2026/5/20 12:22:53

新手开发者首次在Taotoken模型广场选型与试用的全过程记录

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 新手开发者首次在Taotoken模型广场选型与试用的全过程记录 作为一名刚开始接触大模型应用的开发者&#xff0c;我最近尝试了Taotok…...

编程新知 2026/5/20 12:01:41

从ST转战小华HC32F448：一个电机控制老兵的实战避坑与快速上手指南

从ST转战小华HC32F448&#xff1a;一个电机控制老兵的实战避坑与快速上手指南 当国产MCU的性价比优势逐渐凸显&#xff0c;越来越多的工程师开始关注小华半导体这类新兴玩家。作为深耕电机控制领域多年的开发者&#xff0c;我最近在变频器项目中尝试了HC32F448这颗芯片&#xf…...

编程新知 2026/5/20 11:50:29

Chrome Regex Search：如何在网页上使用正则表达式快速查找信息

Chrome Regex Search&#xff1a;如何在网页上使用正则表达式快速查找信息 【免费下载链接】chrome-regex-search 项目地址: https://gitcode.com/gh_mirrors/ch/chrome-regex-search 你是否曾经在浏览网页时&#xff0c;需要查找特定格式的信息却无从下手&#xff1f;…...

编程新知 2026/5/20 10:07:07

统计显著性骗局

原文&#xff1a;towardsdatascience.com/the-statistical-significance-scam-db904be36714?sourcecollection_archive---------0-----------------------#2024-11-09 深入剖析科学最爱工具的缺陷 https://medium.com/caiparryjones96?sourcepost_page---byline--db904be367…...

编程新知 2026/5/20 9:36:42

从零部署SAM自动标注工具链：模型转换、交互标注与格式实战

1. 环境准备与项目部署 第一次接触SAM自动标注工具时&#xff0c;我被它强大的零样本分割能力震撼到了。这个由Meta开源的Segment Anything Model&#xff08;SAM&#xff09;确实改变了传统标注工作的游戏规则。下面我就带大家从零开始搭建整套工具链&#xff0c;过程中会分享…...

编程新知 2026/5/20 6:37:30

JetBrains IDE试用期重置插件：简单三步恢复30天完整功能

JetBrains IDE试用期重置插件&#xff1a;简单三步恢复30天完整功能 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 还在为JetBrains IDE试用期到期而烦恼吗&#xff1f;ide-eval-resetter插件是你需要的终极解决…...

编程新知 2026/5/20 5:35:05

DocQuery最佳实践：企业文档自动化处理的10个技巧

DocQuery最佳实践&#xff1a;企业文档自动化处理的10个技巧 【免费下载链接】docquery An easy way to extract information from documents 项目地址: https://gitcode.com/gh_mirrors/do/docquery DocQuery是一款强大的文档信息提取工具&#xff0c;能轻松分析半结构…...

编程新知 2026/5/20 5:08:00