浏览器事件循环 (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.hqwc.cn/news/151192.html

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

相关文章

win10 + VS2017 编译libjpeg(jpeg-9b)--更新

刚刚写了一篇“win10 VS2017 编译libjpeg(jpeg-9b)”, 然后就发现,还有一个更好的方法。因此,重新更新了一篇,作为对比与参考。 需要用到的文件: jpeg-9b.zip win32.mak 下载链接链接…

数据挖掘神器Orange初步使用

文章目录 安装示例项目展示鸢尾花数据 安装 可以在官网下载,地址为Orange,如果已经装了Anaconda,则可在Anaconda Navigator中找到一个非常猥琐的图标,下面写着Orange3,可以点击Install,装完之后点Launch就…

【鸿蒙软件开发】ArkTS基础组件之Gauge(环形图表)、LoadingProgress(动态加载)

文章目录 前言一、Gauge环形图表1.1 子组件1.2 接口参数介绍 1.2 属性1.3 示例代码二、LoadingProgress2.1 子组件2.2 接口2.3 属性2.4 示例代码 总结 前言 Gauge:数据量规图表组件,用于将数据展示为环形图表。 LoadingProgress:用于显示加载…

CDR和AI哪个软件更好用?

设计软件市场中,CorelDRAW和Adobe Illustrator(简称AI)无疑是两大重量级选手。它们各自拥有庞大的用户群和丰富的功能,但究竟哪一个更好用?本文将从多个角度出发,对这两款软件进行全面而深入的比较&#xf…

C#,数值计算——分类与推理,基座向量机高斯核(Svmgausskernel)的计算方法与源程序

No logical, not an AI. 你现在能阅读到的大量AI都是假AI,包括 。。。GPT 在内,没有任何鸟用。凡为 ...GPT 发声者均为假学者。 No log, no AI. 1 文本格式 using System; namespace Legalsoft.Truffer { public class Svmgausskernel : Svmgen…

蓝桥杯第 2 场算法双周赛 第2题 铺地板【算法赛】c++ 数学思维

题目 铺地板https://www.lanqiao.cn/problems/5887/learning/?contest_id145 问题描述 小蓝家要装修了,小蓝爸爸买来了很多块(你可以理解为数量无限)2323 规格的地砖,小蓝家的地板是 nm 规格的,小蓝想问你&#xf…

树莓派4b,应用窗口/最小化后在任务栏不显示

最近树莓派价格下降,入手了一个树莓派4B 8G版,安装的是64位的官方bullseye系统, 和自己家里吃灰的树莓派2b比较起来,真是香太多~ 由于还不熟悉新系统,一不小心把任务栏给删掉了, 重新添加任务栏…

【Qt之QtConcurrent】描述及使用

描述 QtConcurrent是一个Qt库中的模块&#xff0c;用于实现多线程并发编程。它提供了一些高级API&#xff0c;使得在多核处理器上并行执行代码变得更加容易。 示例&#xff1a; 使用的话&#xff0c; 需要在pro文件中添加&#xff1a;QT concurrent模块。 #include <QC…

2023年MathorCup高校数学建模挑战赛大数据挑战赛赛题浅析

比赛时长为期7天的妈杯大数据挑战赛如期开赛&#xff0c;为了帮助大家更好的选题&#xff0c;首先给大家带来赛题浅析&#xff0c;为了方便大家更好的选题。 赛道 A&#xff1a;基于计算机视觉的坑洼道路检测和识别 A题&#xff0c;图像处理类题目。这种题目的难度数模独一档…

国际腾讯云直播推流配置教程!

云直播的服务本质是一个广播的过程&#xff0c;类似于电视台的直播节目通过有线电视网发送给千家万户。为了完成这个过程&#xff0c;云直播需要有采集和推流设备&#xff08;类似摄像头&#xff09;、云直播服务&#xff08;类似电视台的有线电视网&#xff09;和播放设备&…

ChatGLM3 本地部署的解决方案

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

【Acwing167】木棒(dfs+剪枝)超级详细题解!

题目描述 统一说明 本题思路来源于acwing算法提高课 木棍指题目输入数据所指的东西 木棒指最后由木棍拼接而成的最长的东西 看本文需要准备的知识 1.dfs基本思想 2.对“剪枝”这个词汇有一个基本的认识即可 整体分析 这个题目最终是求木棒的最短长度&#xff0c;所以我…