从输入URL到页面展示到底发生了什么？--01

在浏览器中输入一个URL并按下回车键后，会发生一系列复杂且有条不紊的步骤，从请求服务器到最终页面展示在你的屏幕上。这个过程可以分为以下几个关键步骤：

1. URL 解析

2. DNS 查询

3. TCP 连接

4. 发送 HTTP 请求

5. 服务器处理请求

6. 接收 HTTP 响应

7. 浏览器渲染页面

8. URL 解析（示例）

URL（Uniform Resource Locator）是一种统一资源定位符，它包含了访问资源所需的所有信息。一个典型的URL格式如下：

http://www.example.com:80/path/to/resource?query=param#fragment

解析过程中，浏览器会将URL拆分为多个部分：

• 协议（Scheme） ：如http或https。
• 主机（Host） ：如www.example.com。
• 端口（Port）：默认为80（HTTP）或443（HTTPS），如果没有显式指定，浏览器会使用默认端口。
• 路径（Path）：服务器上的资源路径。
• 查询参数（Query Parameters） ：以?开头的参数部分。
• 片段标识符（Fragment Identifier） ：以#开头的部分，指向页面内的某个位置。

2. DNS 查询

浏览器需要将URL中的主机名转换为IP地址，这个过程通过DNS（Domain Name System）来完成。DNS 查询的步骤包括：

• 浏览器首先检查本地缓存中是否有该域名的IP地址。
• 如果没有，浏览器会向本地DNS服务器发送查询请求。
• 本地DNS服务器会递归查询其他DNS服务器，直到找到对应的IP地址并返回给浏览器。

3. TCP 连接

得到了IP地址后，浏览器需要与服务器建立连接。这个过程使用TCP（Transmission Control Protocol）完成。TCP连接的过程包括三次握手：

1. 客户端发送SYN（同步）包：请求建立连接。
2. 服务器返回SYN-ACK（同步-确认）包：同意建立连接。
3. 客户端发送ACK（确认）包：确认连接建立。

4. 发送 HTTP 请求

TCP连接建立后，浏览器会发送一个HTTP请求。一个典型的HTTP请求包括以下部分：

• 请求行（Request Line）：包含请求方法（如GET或POST）、请求的URL路径和HTTP版本。
• 请求头（Headers）：包含客户端信息、期望的响应格式等。
• 请求体（Body）：POST请求时可能包含提交的数据。

5. 服务器处理请求

服务器接收到HTTP请求后，会进行处理：

• 解析请求：服务器解析请求行和请求头，提取所需信息。
• 路由请求：根据请求路径和方法，将请求路由到对应的处理程序。
• 生成响应：处理程序处理请求后生成HTTP响应，包括响应行、响应头和响应体。

6. 接收 HTTP 响应

浏览器接收到服务器的HTTP响应后，会进行解析：

• 解析响应行：确定HTTP状态码（如200表示成功，404表示资源未找到）。
• 解析响应头：提取响应的元数据，如内容类型、内容长度等。
• 解析响应体：获取实际的数据内容（如HTML、CSS、JavaScript）。

7. 浏览器渲染页面

浏览器解析并渲染HTML内容的过程包括以下步骤：

• 构建DOM树：解析HTML文档并构建DOM（文档对象模型）树。
• 构建CSSOM树：解析CSS文件并构建CSSOM（CSS对象模型）树。
• 执行JavaScript：如果HTML中包含JavaScript文件，浏览器会下载并执行它们。
• 构建渲染树：将DOM树和CSSOM树结合，构建渲染树。
• 布局和绘制：根据渲染树进行布局计算，将元素的位置和大小确定后进行绘制，将页面内容显示在屏幕上。

这篇博客可以作为面试八股，拱大家使用