浏览器事件循环 (event loop)

进程与线程

进程

进程的概念

进程是操作系统中的一个程序或者一个程序的一次执行过程,是一个动态的概念,是程序在执行过程中分配和管理资源的基本单位,是操作系统结构的基础。

简单的来说,就是一个程序运行开辟的一块内存空间,值得注意的是,一个程序至少有一个进程,进程之间是相互独立的。

线程

线程的概念

线程是进程中的一个实体,是被系统独立调度和分派的基本单位,是比进程更小的能独立运行的基本单位。

简单的来说,就是执行程序的通道,一个进程至少有一个线程,在进程开启后自动创建一个线程,这个线程称为主线程,线程之间是共享进程的内存空间的。

浏览器进程与线程

浏览器是一个多进程``多线程的应用程序

这是因为浏览器防止连环崩坏,避免相互影响,其中重要的进程有:浏览器进程、渲染进程、网络进程等。

每个标签页都是一个渲染进程,每个进程都是独立的,互不影响,所以当一个标签页崩溃时,不会影响其他标签页。

注:现在浏览器的渲染进程改变了,不再是一个标签一个进程,转换为相同站点为一个进程 时间2023/10/25

浏览器进程

浏览器进程

主要负责界面显示(标签、前进、后退、导航栏等)、用户交互、子进程管理(网络、渲染进程等)、提供存储等功能。内部会启动多个线程处理不同的任务。

网络进程

负责网络加载资源,主要是通过网络请求获取数据,然后传递给渲染进程。内部会启动多个线程处理不同的任务。

渲染进程

渲染进程启动后,会开启一个渲染主线程,负责执行 HTML、CSS、JavaScript。

渲染主线程

渲染主线程负责:

  • 解析 HTML,生成 DOM 树
  • 解析 CSS,生成 CSSOM 树
  • 计算样式
  • 布局
  • 处理图层
  • 每秒把页面渲染到屏幕上 60 次(不同的设备刷新率不同)
  • 执行全局JS代码
  • 执行事件处理函数
  • 执行计时器的回调函数

为什么渲染进程不适合多个线程?

如果渲染进程有多个线程,那么多个线程会共享渲染进程的内存空间,这样会导致多个线程之间相互影响,造成页面崩溃。

浏览器事件循环

在渲染主进程中的多个任务执行,如何做到任务调度 ===> 排队执行

任务队列

任务队列是一个先进先出的队列,用来存储将要执行的任务,渲染主线程,从任务队列拿任务执行。

任务队列

渲染主线程流程:

  1. 进入无限循环,不断从任务队列中取出任务执行
  2. 每次检查任务队列是否有任务,如果有,就取出任务执行,没有就等待任务加入任务队列
  3. 其他线程的任务可随时加入任务队列末尾

异步任务

代码在执行过程中,会遇到一些无法立即处理的任务,比如:

  • 计时完成后需要执行的任务:setTimeout、setInterval
  • 网络通讯完成后需要执行的任务:XHR、Fetch
  • 用户操作后需要执行的任务:addEvaentListener

如果让渲染主线程等待这些任务的执行,将会导致主线程长期处于阻塞状态,导致浏览器奔溃

同步阻塞

这里使用异步的方式保证主线程不阻塞

异步

如何理解 JS 的异步?

JS是一门单线程的语言,因为JS执行在渲染主线程中,为了防止渲染主线程的阻塞,采用异步的方式,碰到耗时任务时交给其他线程处理,自生立即结束当前任务,执行后续任务,而耗时任务的回调函数包装成任务,加到任务队列中末尾,等待调度执行

任务优先级

任务没有优先级,但是任务队列是有优先级的

  • 每个任务都有一个任务类型,同一个类型的任务必须在同一个队列,不同类型的任务可分属于不同的队列(也可以将两种或多种类型的任务放在同一个队列)
    在一次事件循环中,浏览器可以根据实际情况从不同的队列中取出任务执行
  • 浏览器必须有一个微任务队列,优先执行微任务队列里的任务

在 chrome 中,至少包含以下队列:

  • 延时队列:用于存放计时器的回调任务,优先级===》中
  • 交互队列:用于存放用户操作后产生的事件处理任务,优先级===》高
  • 微队列:用于存放需要最快执行的任务,优先级===》最高

添加微队列的方式主要包括:Promise、MutationObserver

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/121126.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RocketMQ事务消息 超时重发还是原来的消息吗?

以下面的一个demo例子来分析一下,探索RocketMQ事务消息原理。 public static final String PRODUCER_GROUP "tran-test";public static final String DEFAULT_NAMESRVADDR "127.0.0.1:9876";public static final String TOPIC "Test&qu…

【CSS】CSS 属性计算过程

1. 概述 我们所书写的任何一个 HTML 元素&#xff0c;实际上都有完整的一整套 CSS 样式。如果没有修改某样式&#xff0c;大概率可能使用默认值。 例如&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…

unity 基于UGUI的无限动态滚动列表

基于UGUI的动态滚动列表&#xff0c;主要支持以下功能&#xff1a; 继承自UGUI的SrollRect&#xff0c;支持ScrollRect的所有功能&#xff1b; 使用对象池来管理列表元素&#xff0c;以实现列表元素的复用&#xff1b; 支持一行多个元素或一列多个元素&#xff1b; 可使用不…

【MyBatis Plus】深入探索 MyBatis Plus 的条件构造器,自定义 SQL语句,Service 接口的实现

文章目录 前言一、条件构造器1.1 什么是条件构造器1.2 QueryWrapper1.3 UpdateWrapper1.4 LambdaWrapper 二、自定义 SQL 语句2.1 自定义 SQL 的基本用法2.2 自定义 SQL 实现多表查询 三、Service 接口3.1 对 Service 接口的认识3.2 实现 Service 接口3.3 实现增删改查功能3.4 …

el-form那些事

vue3element-plus el-form那些事 输入框后拼接文字 输入框后拼接文字 <el-form-item :label"t(location.locationLength)" prop"locationLength"><el-input v-model"form.locationLength" :placeholder"t(location.inputLocation…

Windoes定时任务、设置定时重启系统

步骤一&#xff1a; 打开计算机管理 通过&#xff1a;control(控制面板&#xff09;或者compmgmt.msc(计算机管理&#xff09;打开程序 步骤二&#xff1a;打开——>系统工具 步骤三&#xff1a; 选择——>任务计划程序 步骤四&#xff1a; 可选择创建新文件命名&…

正点原子嵌入式linux驱动开发——Linux PWM驱动

PWM是很常用到功能&#xff0c;可以通过PWM来控制电机速度&#xff0c;也可以使用PWM来控制LCD的背光亮度。本章就来学习一下如何在Linux下进行PWM驱动开发。 PWM驱动解析 不在介绍PWM是什么了&#xff0c;直接进入使用。 给LCD的背光引脚输入一个PWM信号&#xff0c;这样就…

记一次企业微信的(CorpID)和密钥(Secret)泄漏的利用案例

文章目录 一、介绍二、利用过程1、获取AccessToken2、获取企业微信接口IP段3、获取企业微信回调IP段4、通过部门ID,查看返回的ID5、通过部门ID,查看用户列表6、通过便利ID,发现用户信息泄露,可以进行提交报告7、通过添加接口,添加企业账号8、登陆企业账号进行测试三、参考…

【随机过程】布朗运动

这里写目录标题 Brownian motion Brownian motion The brownian motion 1D and brownian motion 2D functions, written with the cumsum command and without for loops, are used to generate a one-dimensional and two-dimensional Brownian motion, respectively. 使用cu…

主动调度是如何发生的

计算机主要处理计算、网络、存储三个方面。计算主要是 CPU 和内存的合作&#xff1b;网络和存储则多是和外部设备的合作&#xff1b;在操作外部设备的时候&#xff0c;往往需要让出 CPU&#xff0c;就像上面两段代码一样&#xff0c;选择调用 schedule() 函数。 上下文切换主要…

Kafka - 3.x 图解Broker总体工作流程

文章目录 Zk中存储的kafka的信息Kafka Broker总体工作流程1. broker启动后向zk中注册2. Controller谁先启动注册&#xff0c;谁说了算3. 由选举出来的Controller监听brokers节点的变化4. Controller决定leader选举5. Controller将节点信息上传到Zk中6. 其他Controller从zk中同步…

Fourier分析导论——第1章——Fourier分析的起源(E.M. Stein R. Shakarchi)

第 1 章 Fourier分析的起源 (The Genesis of Fourier Analysis) Regarding the researches of dAlembert and Euler could one not add that if they knew this expansion, they made but a very imperfect use of it. They were both persuaded that an arbitrary and d…

jenkins配置gitlab凭据

下载Credentials Binding插件&#xff08;默认是已经安装了&#xff09; 在凭据配置里添加凭据类型 点击保存 Username with password&#xff1a; 用户名和密码 SSH Username with private 在凭据管理里面添加gitlab账号和密码 点击全局 点击添加凭据&#xff08;版本不同…

Go RESTful API 接口开发

文章目录 什么是 RESTful APIGo 流行 Web 框架-GinGo HelloWorldGin 路由和控制器Gin 处理请求参数生成 HTTP 请求响应Gin 的学习内容实战用 Gin 框架开发 RESTful APIOAuth 2.0接口了解用 Go 开发 OAuth2.0 接口示例 编程有一个准则——Don‘t Repeat Yourself&#xff08;不要…

如何在Windows和Linux系统上监听文件夹的变动?

文章目录 如何在Windows和Linux系统上监听文件夹的变动&#xff1f;读写文件文件系统的操作缓冲和流文件改变事件 如何在Windows和Linux系统上监听文件夹的变动&#xff1f; libuv库实现了监听整个文件夹的修改。本文详细介绍libuv库文件读写和监听的的实现方法。libuv库开发了…

Unity的碰撞检测(六)

温馨提示&#xff1a;本文基于前一篇“Unity的碰撞检测(五)”继续探讨两个游戏对象具备刚体的BodyType均为Dynamic&#xff0c;但是Collision Detection属性不同的碰撞检测&#xff0c;阅读本文则默认已阅读前文。 &#xff08;一&#xff09;测试说明 在基于两个游戏对象都具…

TSINGSEE青犀省级高速公路视频上云联网方案:全面实现联网化、共享化、智能化

一、需求背景 随着高速铁路的建设及铁路管理的精细化&#xff0c;原有的模拟安防视频监控系统已经不能满足视频监控需求&#xff0c;越来越多站点在建设时已开始规划高清安防视频监控系统。高速公路视频监控资源非常丰富&#xff0c;需要对其进行综合管理与利用。通过构建监控…

荣电集团与钕希科技签署全面战略合作

10月26日&#xff0c;荣电集团&#xff08;以下简称荣电&#xff09;与钕希科技南京有限公司&#xff08;以下简称钕希科技&#xff09;今天在合肥市签署全面战略合作协议&#xff0c;联合进军混合现实&#xff08;Mixed Reality&#xff0c;以下简称MR&#xff09;空间计算高科…

Java练习题2021-4

"某游戏公司设计了一个奖励活动&#xff0c;给N个用户(1≤N≤10^7)连续编号为1到N&#xff0c;依据用户的编号S发放奖励。 发放奖励规则为&#xff1a; 公司随机设定三个非零正整数x&#xff0c;y&#xff0c;z。 如果S同时是x、y的倍数&#xff0c;奖励2张卡片&#xff1…

如何绘制【逻辑回归】中threshold参数的学习曲线

threshold参数的意义是通过筛选掉低于threshold的参数&#xff0c;来对逻辑回归的特征进行降维。 首先导入相应的模块&#xff1a; from sklearn.linear_model import LogisticRegression as LR from sklearn.datasets import load_breast_cancer from sklearn.model_selecti…