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

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

相关文章

【计算机网络笔记】Cookie技术

系列文章目录 什么是计算机网络? 什么是网络协议? 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 分组交换 vs 电路交换 计算机网络性能(1)——速率、带宽、延迟 计算机网络性能(2)…

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…

如何使用手机蓝牙设备作为电脑的解锁工具像动态锁那样,蓝牙接近了电脑,电脑自动解锁无需输入开机密码

环境: Win10 专业版 远程解锁 蓝牙解锁小程序 问题描述: 如何使用手机蓝牙设备作为电脑的解锁工具像动态锁那样,蓝牙接近了电脑,电脑自动解锁无需输入开机密码 手机不需要拿出来,在口袋里就可以自动解锁&#xff…

calcite 校验层总结

1、校验的作用 1)完善语义信息 例如在SQL语句中,如果碰到select * 这样的指令,在SQL的语义当中,“*” 指的是取出对应数据源中所有字段的信息,因此就需要根据元数据信息来展开。 2)结合元数据信息来纠偏…

Java游戏修炼手册:2023 最新学习线路图

前言 有没有一种令人兴奋的学习方法?当然有!绝对有!而且我要告诉你,学习的快乐可以媲美游戏的刺激。 小学时代,我曾深陷于一款名为"八百万勇士的梦"的游戏。每当放学,我总是迫不及待地打开电脑&a…

JSON(详解)

目录 什么是JSON? 哪里会用到JSON? JSON的特点 JSON的优点 JSON的缺点 JSON和cJSON的关系 什么是JSON? JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它以易于阅读和编写的文本格式来存储和表示…

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

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

为什么说大模型微调是每个人都必备的核心技能?

▼最近直播超级多,预约保你有收获 近期直播:《基于开源 LLM 大模型的微调(Fine tuning)实战》 0 — 为什么要对 LLM 大模型进行微调(Fine tuning)? LLM 大模型(比如:Chat…

安全狗安装

安装waf 关闭apache程序及httpd.exe进程; 运行cmd,cd进入apache/bin文件夹目录, 执行httpd.exe -k install -n apache2.4.39; 启动apache,启动phpstudy 安全狗安装服务名称填写apache2.4.39; 安装安全狗之后就会提示报错 网站防护 可以设备黑白名单 漏…

JAVA实现校园二手交易系统 开源

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 二手商品档案管理模块2.3 商品预约管理模块2.4 商品预定管理模块2.5 商品留言板管理模块2.6 商品资讯管理模块 三、实体类设计3.1 用户表3.2 二手商品表3.3 商品预约表3.4 商品预定表3.5 留言表3.6 资讯…

Leo赠书活动-03期 【ChatGPT 驱动软件开发:AI 在软件研发全流程中的革新与实践 】

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: 赠书活动专栏 ✨特色专栏:…

网络协议--TFTP:简单文件传送协议

15.1 引言 TFTP(Trivial File Transfer Protocol)即简单文件传送协议,最初打算用于引导无盘系统(通常是工作站或X终端)。和将在第27章介绍的使用TCP的文件传送协议(FTP)不同,为了保持简单和短小&#xff0…

【微信小程序】数字化会议OA系统之投票模块(附源码)

🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是Java方文山,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的专栏《微信小程序开发实战》。🎯&#x1f3a…

了解单域名证书和通配符证书的区别,选择合适的SSL证书解决方案

随着互联网的不断发展,网站安全性问题一直备受关注,在保护网站数据安全的过程中,SSL证书一直发挥着至关重要的作用。而在选择SSL证书时,单域名证书和通配符证书是两种常见的选择。本文将详细介绍单域名证书和通配符证书的区别&…

【开源框架】Glide的图片加载流程

本篇文章从Glide 4.11源码入手,简单的分析整个图片请求的流程,本着 ”只见树林,不见树木“ 的原则,宏观请求流程,不细究实现细节(细节留坑埋点,之后慢慢写) 引入依赖 以下的所有分…

漏洞复现-jquery-picture-cut 任意文件上传_(CVE-2018-9208)

jquery-picture-cut 任意文件上传_(CVE-2018-9208) 漏洞信息 jQuery Picture Cut v1.1以下版本中存在安全漏洞CVE-2018-9208文件上传漏洞 描述 ​ picture cut是一个jquery插件,以友好和简单的方式处理图像,具有基于bootstrap…

力扣每日一题79:单词搜索

题目描述: 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中,返回 true ;否则,返回 false 。 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中“相邻”单元格…

【1++的Linux】之进程间通信(共享内存)

👍作者主页:进击的1 🤩 专栏链接:【1的Linux】 我们在前面的文章中提到过,进程间的通信本质都是先看到同一块资源,然后通过这同一块资源进行通信,并且是单向的通信,只能一端发&#…

Openssl数据安全传输平台011:秘钥协商客户端

文章目录 0. 代码仓库拷贝jsoncpp库至工程目录下编译protobuf类文件Message.proto VS 2022 设置 0. 代码仓库 https://github.com/Chufeng-Jiang/OpenSSL_Secure_Data_Transmission_Platform/tree/main/Preparation 拷贝jsoncpp库至工程目录下 编译protobuf类文件 VS2022 pr…

宝塔面板安装Python和Flask(新版Python项目)

(一)宝塔面板的项目菜单,打开Python项目的“项目版本管理” 安装Python版本3.10.0。 会创建一个Python版本的文件夹www/server/pyproject_evn/versions/ 会创建一个Python虚拟环境的文件夹www/server/pyproject_evn/python_venv/ &#xf…