面试官：说说地址栏输入 URL 敲下回车后发生了什么?

浅浅的花香味﹌ 2023-10-14 15:34 50阅读 0赞

## 面试官：说说地址栏输入 URL 敲下回车后发生了什么? ##

![在这里插入图片描述][d513a2a152f84df18e7b921f7222b5c5.png]

### 一、URL解析和DNS查询 ###

当你在浏览器的地址栏中输入一个URL并敲下回车时，浏览器会首先对URL进行解析。URL通常由多个部分组成，包括协议（例如http或https）、域名或IP地址、端口号（如果未指定则使用默认端口）、路径和查询参数等。

浏览器解析URL后，会提取出其中的域名部分，然后进行DNS查询以将域名转换为对应的IP地址。DNS查询是将域名映射到IP地址的过程，浏览器向本地DNS服务器发送查询请求，本地DNS服务器会向根DNS服务器逐级查询，直到找到目标域名对应的IP地址。一旦得到IP地址，浏览器就可以向服务器发送请求。

### 二、TCP连接和HTTP请求 ###

接下来，浏览器需要与目标服务器建立TCP连接。TCP连接是一种面向连接的传输协议，确保数据的可靠传输。在建立TCP连接时，浏览器会经历一个三次握手的过程，确保客户端和服务器之间的连接状态正常。

当TCP连接建立后，浏览器会发送HTTP请求到服务器。HTTP请求包括请求行、请求头和请求体。请求行包含请求方法（例如GET、POST等）和路径信息。请求头包含一些额外的信息，例如浏览器的User-Agent、Accept-Encoding等。请求体包含一些提交的数据，例如表单数据或JSON数据等。

### 三、服务器处理和HTTP响应 ###

服务器收到HTTP请求后，会根据请求的内容进行处理。服务器可能会读取请求体中的数据，查询数据库，执行业务逻辑等操作。

处理完成后，服务器会生成HTTP响应并发送回浏览器。HTTP响应包括状态行、响应头和响应体。状态行包含状态码，表示服务器处理请求的结果。响应头包含一些附加信息，例如服务器类型、响应时间等。响应体包含实际返回的数据，例如HTML页面、JSON数据等。

![在这里插入图片描述][3dc791d1f80f46408a2196727b49fb17.png]

### 四、页面渲染 ###

![在这里插入图片描述][7542405d036843c4a841c6437c92a87c.png]

浏览器收到服务器的响应后，会对返回的资源进行解析和渲染。如果响应是HTML页面，浏览器会构建DOM树和CSS规则树，并最终生成渲染树。然后浏览器会对渲染树进行布局和绘制，最终将页面呈现给用户。

在页面渲染的过程中，浏览器还会下载页面中引用的其他资源，例如CSS文件、JavaScript文件、图片等，并对这些资源进行相同的解析和渲染过程。

#### 1. 解析HTML ####

浏览器从服务器接收到HTML文档后，会进行解析，构建DOM树（文档对象模型）。DOM树是文档的逻辑结构表示，每个HTML标签都会被解析成DOM树的一个节点，标签之间的嵌套关系则对应着DOM树中的父子关系。

#### 2. 解析CSS ####

解析CSS样式表，生成CSS规则树（样式表对象模型）。CSS规则树描述了文档中各个元素应用的样式信息。DOM树和CSS规则树结合后形成渲染树（Render Tree），渲染树只包含需要显示的节点和其对应的样式信息。

#### 3. 布局（Layout） ####

渲染树中的每个节点都有对应的几何信息，例如位置、大小等。布局阶段会根据渲染树中每个节点的几何信息计算节点在页面中的精确位置，确定每个元素在屏幕上的显示位置。

#### 4. 绘制（Paint） ####

在布局完成后，浏览器将根据渲染树和布局阶段得到的几何信息来绘制页面。这个过程将把页面的每个节点转换为屏幕上的实际像素，创建一个包含所有像素信息的位图。

#### 5. 合成（Composite） ####

绘制阶段完成后，浏览器会将各个图层（Layer）按照合成顺序进行合并，形成最终的页面图像。合成是将各个图层的像素信息进行组合，以最终形成用户所见的页面。

值得注意的是，现代浏览器为了提高性能和用户体验，会采用一些优化技术，例如异步加载脚本、懒加载图片、预渲染等。这些优化技术可以减少页面加载时间和渲染时间，提高页面的显示速度和响应性。

页面渲染是整个过程中较为复杂的一部分，它涉及到浏览器的多个模块协同工作，确保用户能够快速、流畅地浏览网页内容。

### 五、总结 ###

整个过程可以总结为：

1.  URL解析和DNS查询，将域名解析为IP地址；
2.  建立TCP连接，确保数据传输的可靠性；
3.  发送HTTP请求，向服务器请求资源；
4.  服务器处理请求并发送HTTP响应；
5.  浏览器解析和渲染页面，显示给用户。

这些步骤使得用户可以通过浏览器访问互联网上的各种资源，从而实现网页浏览、数据传输等功能。

### 参考文献 ###

*  https://github.com/febobo/web-interview/issues/141
 *  https://zhuanlan.zhihu.com/p/80551769

[d513a2a152f84df18e7b921f7222b5c5.png]: https://img-blog.csdnimg.cn/d513a2a152f84df18e7b921f7222b5c5.png
[3dc791d1f80f46408a2196727b49fb17.png]: https://img-blog.csdnimg.cn/3dc791d1f80f46408a2196727b49fb17.png
[7542405d036843c4a841c6437c92a87c.png]: https://img-blog.csdnimg.cn/7542405d036843c4a841c6437c92a87c.png