从浏览器进程角度分析从输入URL到页面显示发生了什么?

news2024/12/25 9:17:27

一、处理用户在浏览器地址栏中输入的URL(统一资源定位符)

        用户在地址栏输入内容并按下回车,浏览器会检查输入是否符合 URL 规则,以Chrome为例,它会根据相应的规则,将地址栏输入解析成搜索请求或者URI请求。如果是搜索,解析处搜索关键字,然后与搜索引擎地址组装成一个URI请求;否则,浏览器就会将地址与相关协议HTTP,HTTPs等,组装成一个完整的URI请求;如果已有打开的页面,unload当前页面。解析地址栏输入。回车前,当前页面执行 onbeforeunload 事件; 浏览器进入加载状态。

二、浏览器进程接收到URL,并将其发送到网络进程。

         在触发DNS Lookup 之前(DNS(Domain Name System)是域名系统, 可将域名解析成对应的IP地址,从而用户可以通过域名在英特网上访问特定Web 服务器提供的在线信息或服务。),浏览器会首先确认缓存中是否存在域名的IP地址。浏览器会依次检查浏览器缓存,操作系统缓存,路由缓存和ISP DNS缓存,如果在缓存中找到了域名的IP地址,那么就可以直接使用改IP地址发起网络请求;反之,DNS Lookup就会发生。需要指出的是:并非URI不同,域名就不同,事实上不同的URI可以有相同的域名,也就是所谓相同的源,这个可以参考Web请求的header的origin字段。缓存中不光会有关于域名的信息,也包括网址重定向信息和离线网页信息等。如果缓存中有网址重定向信息,那么就会向重定向的网址发出请求;如果缓存中有离线网页信息,那么会直接打开离线网页。

永久重定向(状态码301),即原域名已经永久修改成新域名,浏览器会缓存永久重定向的DNS解析记录。
临时重定向(状态码302),浏览器不会缓存当前域名的解析记录。

当IP地址被确认后,浏览器会根据这个IP,通过TCP三次握手(TCP three-way handshake)的方式,和服务器建立连接。所谓TCP三次握手:

第一次: 浏览器发送一个TCP 同步包(SYNchronize package)给服务器,等待确认。

第二次: 服务器收到SYN包,并返回一个同步确认包(SYNchronize-ACKnowledgement package)。

第三次: 浏览器收到服务器的SYN-ACK,向服务器发送一个确认包(ACKnowledgement package)。当服务器收到ACK后,TCP的socket连接就建立了。

如果要建立基于HTTPS的安全连接,那么TLS协商(TLS Negotiation)就会发生。浏览器和服务器需要更多次的握手。在TCP连接建立后,浏览器就会向相应的HTTP(S)服务器发送请求。

三、浏览器接受,解析Response数据并渲染

        浏览器接受到response数据后,就会开始解析,一个网页可能需要多个HTTP请求,比如,主体的HTML文件是一个请求,而其相关的CSS,图片和JS文件等也需要一一请求。浏览器并不会等待所有的数据接收完成才开始解析,而只保证所有的数据最终都会被解析,且默认一个页面一个进程;从a打开b,并且是同一站点(相同的协议和根域名),会复用渲染进程。最后,渲染进程将布局和绘制的信息发送给浏览器进程,浏览器进程将其显示在用户界面上,呈现为最终的页面。

        这只是一个简化的浏览器工作流程,实际中会有更多细节和优化。此外,现代浏览器通常采用多进程架构,如Chrome就分别有浏览器进程、渲染进程、网络进程等,这些进程间还会进行通信和协作来提高性能和安全性。

关于渲染的整个过程大概可描述为:

解析HTML标记符号,开始生成DOM树;解析CSS标记符号,开始生成CSSOM树;CSSOM树生成后,JS引擎会解析JS脚本,完成DOM树的创建;合并DOM树和CSSOM树,生成渲染树
基于渲染树和当前浏览器面板,计算页面元素的大小和相对位置,将渲染树里的每个节点,结合Layout的计算结果,渲染引擎将渲染树转换成屏幕上实际的像素,即绘制内容。

【 DOM是Document Object Model的缩写,即文档对象模型。是W3C推荐的一种处理可扩展标志语言的一种标准编程接口。浏览器将机构化的文档HTML/XML读入,将文档中的每个标签建模成一个节点(Node),每个节点有各自的属性(名称,类型,内容等等),节点之间有层级关系(父亲,孩子,兄弟等),从而形成了树形结构。DOM提供的编程接口,支持访问,修改,添加和删除DOM树的节点和内容。
CSSOM树: 类此与DOM树,浏览器会便利CSS文件中所有的规则,创建一棵树,这棵树包含多个节点,基本CSS选择器,这些节点之间也有着层级关系,比如父亲,孩子,兄弟等等
Render树: 将DOM树和CSSOM合并后,就形成了Render树。
Layout: 当渲染树生成后,就会开始layout。Layout负责计算渲染树的每个节点在屏幕上的位置和维度。比如,不同的设备上的浏览器的宽度可能不同,那么,基本屏幕宽度的显示,Layout会得出不同的实际显示宽度。】

二、现在浏览器为什么大多都是多进程,多进程之后这个过程又有什么变化?

现代浏览器普遍采用多进程架构的主要原因是为了提高性能、安全性和稳定性。

  1. 性能提升:多进程可以充分利用多核处理器的优势,将不同的任务分配给不同的进程并行处理。例如,渲染进程可以独立于浏览器进程运行,可以更快地响应用户操作,使页面加载更快,提升用户体验。

  2. 安全性增强:多进程架构通过进程隔离实现了沙盒机制,每个进程都运行在独立的环境中,互相之间无法访问对方的内存,从而有效地隔离恶意网站或插件对系统的攻击。即使一个进程崩溃或受到攻击,其他进程仍然可以正常工作,增加了整体系统的稳定性和安全性。

  3. 故障隔离:多进程架构降低了单一进程故障对整个浏览器的影响范围。如果一个标签页或插件崩溃,只会影响到相应的渲染进程或插件进程,而不会导致整个浏览器崩溃。

  4. 资源管理:多进程可以更好地管理系统资源,每个进程都有自己的内存空间和资源限制。这样可以避免某个页面或插件占用过多的内存导致浏览器整体性能下降。

在多进程架构下,从输入URL到页面显示的基本流程与单进程模型相似,但具体实现上会有一些变化:

  • 浏览器进程负责接收用户输入,并将请求发送给适当的子进程(如渲染进程、网络进程、插件进程等)。
  • 渲染进程负责解析HTML、构建DOM和CSSOM、进行布局和绘制,然后将渲染结果发送给浏览器进程进行显示。
  • 网络进程负责处理网络请求和响应,但实际数据的传输可能会由操作系统的网络栈处理。
  • 插件进程负责加载和运行浏览器插件,独立于其他进程运行。

通过多进程架构,浏览器可以更高效地处理复杂的网页和多个任务,并提供更好的安全性和稳定性。

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

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

相关文章

YOLOv8实战垃圾分类目标检测 (视频课程)

课程链接:https://edu.csdn.net/course/detail/38804 垃圾分类是一项利国利民的民生工程,需要全社会的共同参与。 YOLOv8是前沿的目标检测技术,它基于先前 YOLO 版本在目标检测任务上的成功,进一步提升性能和灵活性。 本课程将手…

已解决 BrokenPipeError: [Errno 32] Broken pipe

作者主页:爱笑的男孩。的博客_CSDN博客-深度学习,活动,python领域博主爱笑的男孩。擅长深度学习,活动,python,等方面的知识,爱笑的男孩。关注算法,python,计算机视觉,图像处理,深度学习,pytorch,神经网络,opencv领域.https://blog.csdn.net/Code_and516?typeblog个…

第三次CCF计算机软件能力认证

第一题:门禁系统 涛涛最近要负责图书馆的管理工作,需要记录下每天读者的到访情况。 每位读者有一个编号,每条记录用读者的编号来表示。 给出读者的来访记录,请问每一条记录中的读者是第几次出现。 输入格式 输入的第一行包含一个整…

《前端开发 实践之 腾讯地图API 学习》

目录 腾讯地图基础入门方式一方式二 事件监听监听地图瓦片加载完成事件 移除缩放控件 & 旋转控件 & 比例尺控件初始化marker图层创建信息窗点击地图拾取坐标打点标记反解析成详细地址根据输入详细地址 反解析成经纬度 腾讯地图 腾讯地图API学习-官方地址:ht…

浅谈Web前端开发软件包管理器—Bower的基本使用

前言 Bower 是一个客户端的软件包管理器,它可用于搜索、安装和卸载如 JavaScript、HTML、CSS 之类的网络资源,Bower 是 Web 开发中的一个前端文件包管理器,类似于 Node 模块的 npm 包管理器,bower 依赖于 Git、Node 和 npm。 安…

HarmonyOS课程尝鲜计划,优享特权大礼包

报名入口:https://developer.huawei.com/consumer/cn/activity/901689042385499023

Mendix Excel导入组件的分析和应用

一、前言 企业在发展的过程中会使用各种各样的系统,其中很多系统用了5-10年,我们称之为遗留系统存在诸多风险:维护耗时、中断频繁、用户不友好、与新软件的兼容性问题等。总有一天,这些庞大的问题会垄断IT资源,使数字…

事物的属性与观察者有关吗?

我们通常对世界的看法是以分析和概念为基础的,我们倾向于将事物划分为各种相对的存在和概念。然而,有些领域超越了这种相对的观点,揭示了所有现象的无常性、空虚性和无自性,认识到它们的真实本质。如在人机环境系统中就认为&#…

【车载Android】多用户(一) - Linux用户与Android多用户

现如今手机这样的移动设备已经是人手一台了,但是汽车依然是以家庭为单位使用,不同的家庭成员对于汽车的使用存在着差异,比如空间、功能、影音风格等。因此,“智能汽车”需要具备千人千面的特性,能够适应不同的用户和场…

Linux中Makefile详细教程

目录 Makefile Makefile的介绍 Makefile简单的编写 .PHONY 问题: 如果只执行make,它执行的是Makefile里哪一段语句呢? 怎么知道我的可执行程序是最新的呢? Makefile编译多个文件 进度条小程序 Makefile Makefile的介绍 …

Acwing.860 染色法判定二分图(二分图染色法)

题目 给定一个n个点m条边的无向图,图中可能存在重边和自环。 请你判断这个图是否是二分图。 输入格式 第一行包含两个整数n和m。 接下来m行,每行包含两个整数u和v,表示点u和点v之间存在一条边。 输出格式 如果给定图是二分图&#xff0c…

openpnp - 汇川 Inovance IS620PS2R8I-IAB-C的参数读取

文章目录 openpnp - 汇川 Inovance IS620PS2R8I-IAB-C的参数读取概述笔记伺服和配套电机型号官方伺服调试软件笔记H00H01H02H03H04H05H06H07H08H09H0AH0BH0CH0DH0FH11H12H16H17H30H31自定义组备注END openpnp - 汇川 Inovance IS620PS2R8I-IAB-C的参数读取 概述 设备中用到了…

Enterprise:使用 MySQL connector 同步 MySQL 数据到 Elasticsearch

Elastic MySQL 连接器是 MySQL 数据源的连接器。它可以帮我们把 MySQL 里的数据同步到 Elasticsearch 中去。在今天的文章里,我来详细地描述如何一步一步地实现。 在下面的展示中,我将使用 Elastic Stack 8.8.2 来进行展示。 无缝集成:将 Ela…

两只小企鹅(Python实现)

目录 1 和她浪漫的昨天 2 未来的旖旎风景 3 Python完整代码 1 和她浪漫的昨天 是的,春天需要你。经常会有一颗星等着你抬头去看; 和她一起吹晚风吗﹖在春天的柏油路夏日的桥头秋季的公园寒冬的阳台; 这世界不停开花,我想放进你心里一朵&#…

docker 里面各种 command not found 总结

一、ip:command not found 执行命令: apt-get update & apt-get install -y iproute2 二、yum:command not found 执行命令: apt-get update & apt-get install -y yum 三、ping:command not found 执行命…

113、基于51单片机的智能电子密码锁控制系统设计(程序+原理图+PCB源文件+Proteus仿真+参考论文+开题报告+设计资料+焊接指导书+元器件清单等)

摘 要 在日常的生活和工作中, 住宅与部门的安全防范、单位的文件档案、财务报表以及一些个人资料的保存多以加锁的办法来解决。具有防盗报警等功能的电子密码锁代替密码量少、安全性差的机械式密码锁已是必然趋势。随着科学技术的不断发展,人们对日常生活中的安全保…

多元融合:流媒体传输网络的全盘解法

我们在寻找「网络」的全盘解法。 音视频数字化在消费领域的红利俨然见顶,而产业级视频应用激活了更多场景下的业务模式。与此同时,音视频客户也从单一的业务需求,趋向于多种业务并行存在的需求。 固有的网络能满足新兴的业态吗?延…

帧同步实现PuppetMaster布娃娃系统的问题

1)帧同步实现PuppetMaster布娃娃系统的问题 ​2)如何屏蔽Unity打包在IQOO安卓手机上出现一侧是黑边的现象 3)SLG或者策略游戏的联盟边界线是如何实现的 这是第343篇UWA技术知识分享的推送,精选了UWA社区的热门话题,涵盖…

Acwing算法基础 前缀和与差分

前缀和与差分 AcWing 795. 前缀和 import java.util.*; public class Main{public static void main(String[] args ){Scanner scnew Scanner(System.in);int nsc.nextInt();int msc.nextInt();int[] arrnew int[n1];arr[0]0;for(int i1;i<n;i) {arr[i]sc.nextInt()arr[i-1…

基于Java+Swing实现表白墙的效果

JavaSwingmysql员工工资管理系统 一、系统介绍二、功能展示1.效果展示 三、系统实现1.salary.java 四、其它系统五、获取源码 一、系统介绍 使用javaswing桌面编程技术实现的一个表白墙的效果 二、功能展示 1.效果展示 基于javaswing表白墙的效果 三、系统实现 1.salary.ja…