前言

浏览器会经历多个步骤才能找到并加载该网站。以下是这个过程的简要说明： 面试会考

URL解析

根据URL解析出请求的协议以及请求的资源地址,如果协议或者主机名不合法,浏览器将会将输入的内容传递给搜索引擎检索;如果协议及主机名合法,浏览器会将URL中存在的非法字符进行转义

DNS_5">DNS解析

DNS浏览器首先需要将域名,转换为对应的IP地址。这个过程称为DNS(域名系统)解析。如果有缓存则查找缓存

浏览器缓存

浏览器首先检查其内部缓存。如果之前访问过该资源且缓存尚未过期，浏览器将直接使用缓存中的数据来快速显示页面。

操作系统缓存：

如果浏览器缓存中没有找到相关记录，它会询问操作系统的DNS缓存。操作系统通常也会缓存最近查询的域名及其对应的IP地址。

路由器缓存：

如果操作系统中也没有找到，DNS请求将发送到本地网络的路由器。许多路由器都具备DNS缓存功能，可以存储最近的DNS查询结果，以加速当地网络中的访问。

ISP（Internet service provider）缓存

如果以上都没有缓存记录，请求最终会发送到你的互联网服务提供商（ISP），它们通常会有更大范围的DNS缓存

DNS_16">DNS递归解析

如果所有本地缓存查找都失败，DNS查询就变成了一个递归查询过程，涉及到多个DNS服务器

1. 根域名服务器 首先， 尔的DNS查询会被发送到根域名服务器 服务器是最高级别的DNS服务 负责重定向到负责管理顶级域(.com .net) 顶级域名服务器
2. 顶级域名(TLD服务器) 服务器会告诉你的ISP的DNS服务器去查询哪个顶级域名服务器来找到.com域的信息 这个服务器掌握.com域名及其相应服务器的信息
3. 权威域名服务器 一旦你的DNS查询到达了正确的顶级域名服务 会进一步定向到负example.com 权威务器 权威服务器有该域对应的具体IP地址

IP地址的获取

最终，权威域名服务器会提供wwwxample.com域名对应的IP地址（如图中的93.184.216.34），这个信息会被发送回用户的电脑存结果

缓存结果

IP地址被找到，它通常会被存储在浏览器、操作系统、路由器或ISP的DNS缓存中，以便未来的查询可以更快得到解析。

建立TCP连接

具体在这篇文章https://blog.csdn.net/weixin_63625059/article/details/142683822?spm=1001.2014.3001.5501

发送HTTP请求

HTTP(Hypertext Transfer Protocol,超文本传输协议）
它是建立在TCP连接之上的应用层协议。
一旦TCP连接建立，客户端（通常是Web浏览器）就可以通过这个连接发送一个HTTP请求到服务器

这个请求包含了方法（GET、POST等）、URL（统一资源标识符）和协议版本，以及可能包含的请求头和请求体

服务器响应

服务器接收到HTTP请求后，会处理这个请求并返回一个HTTP响应

响应通常包括一个状态码(如200表示成功，404表示未找到),响应头，以及任何响应内容(如请求的HTML文件)

TCP为HTTP提供了一个可靠的通道，确保数据正确 完整地从服务器传输到客户

TCP链接断开

https://blog.csdn.net/weixin_63625059/article/details/142683822?spm=1001.2014.3001.5501

渲染页面

https://i-blog.csdnimg.cn/direct/0a41b20e8bf548ca97642a92cd7fa2cd.png" alt="请添加图片描述" />

解析一 HTML解析过程

因为默认情况下服务器会给浏览器返回index.html文件

所以解析HTML是所有步骤的开始解析HTML，会构建DOMTree

解析二 生成CSS

在解析的过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件

注意：下载CSS文件是不会影响DOM的解析的

浏览器下载完CSS文件后，就会对CSS文件进行解析，解析出对应的规则树
我们可以称之为CSSOM(CSS Obiect Model，CSS对象模型)

解析三 构建Render Tree

当有了DOMTree和CSSOMTree后，就可以两个结合来构建Render Tree

注意一:link元素不会堵塞DOM Tree的构造过程，但是会堵塞Render Tree的构造过程，这是因为Render Tree在构建时，需要对应的CSSOM Tree

解析四 布局(Layout)与绘制(Print)

第四步是在渲染树(RenderTree)上运行布局(Layout)以计算每个节点的几何体
染树会表示显示哪些节点以及其他样式，但是不表示每个节点的尺寸、位置等信息；口布局是确定呈现树中所有节点的宽度、高度和位置信息

第五步是将每个节点绘制（Paint）到屏幕上
在绘制阶段，浏览器将布局阶段计算的每个frame 转为屏幕

包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（比如img）
https://i-blog.csdnimg.cn/direct/88be112a990845ab9bb49da98af2a3ab.png" alt="请添加图片描述" />

Match selectors：浏览器遍历CSSOM 选择器 DOM树中的元素匹面 这个过程决定了那些CSS规则应用于哪些DOM元素

Compute style：在选择器匹配后 浏览器计算每个元素的最终样式！这包括计算具体的样式值，处理继承的样式以及解析因层叠产生的任何冲突

Construct frames：这通常是指生成布局树，它是染树的一部分，仅包含要布局和绘制的元素。这一步骤涉及确定文档的结构层次和包含块

布局树和渲染树是有微小的差异，布局树是渲染树的子集，不包含染树中元素的颜色、 背景、 阴影等信息

文章到这里就结束了 如果对你有所帮助的话 就点个关注吧 会持续更新技术文章