web前端开发，一次完整的Http请求包含哪些过程 - 指南

声明：本文内容来自Deepseek。

提问：web前端开发，一次完整的Http请求包含哪些过程

Deepseek的回答

这是一个非常核心的Web前端面试题，也是理解Web工作原理的基础。一次完整的HTTP请求是一个非常平台和困难的过程，它涉及到前端、网络、后端服务器等多个层面的协作。

我们能够将该过程分为以下几个关键阶段：

  1. URL解析

  2. DNS域名解析

  3. 建立TCP连接

  4. 发送HTTP请求

  5. 服务器处理请求并返回HTTP响应

  6. 浏览器解析并渲染页面

  7. 断开TCP连接

下面我们来详细分解每一个步骤。

1. URL解析

当你在浏览器地址栏输入 https://www.example.com/index.html 并按下回车时，浏览器首先会解析这个URL。

  • 协议： https， 浏览器知道需要使用加密的HTTPS协议。

  • 域名： www.example.com， 这是目标服务器的地址。

  • 资源路径： /index.html， 表示要请求服务器上的哪个资源。

  • （可选）端口80。如果URL中没有指定，则使用默认端口。就是： HTTPS默认是443， HTTP默认

浏览器还会检查输入的内容是否是一个合法的URL，如果不是，它可能会将其作为搜索查询交给默认的搜索引擎。

2. DNS域名解析

浏览器通过网络只能使用IP地址（如 192.0.2.1）来定位服务器，而不是人类可读的域名。因此，它需要将域名 www.example.com 转换成IP地址。这个过程就是DNS查询。

DNS查询是一个递归过程，通常遵循以下顺序：

  1. 浏览器缓存否有这个域名对应的IP地址。就是： 浏览器开始检查自己的缓存中

  2. 操作系统缓存： 如果浏览器缓存没有，它会去检查操作系统的 hosts 文件和DNS缓存。

  3. 路由器缓存： 请求会发送到路由器，路由器也可能有自己的DNS缓存。

  4. ISP的DNS服务器： 如果以上都没有，请求会到达你的网络服务提供商（如电信、联通）的DNS服务器。这是最常用的一步。

  5. 递归查询： 如果ISP的DNS服务器也没有缓存，它会从DNS根域名服务器（.）开始，依次查询 .com 顶级域名服务器，最后查询 example.com 的权威域名服务器，最终拿到IP地址，并逐级缓存下来。

注意： 为了性能，现代浏览器和操作系统都支持DNS预解析，它会分析页面中的链接，提前对可能访问的域名进行DNS解析。

3. 建立TCP连接

拿到服务器的IP地址后，浏览器会通过操作系统的网络接口，与服务器通过“三次握手”建立TCP连接。TCP连接提供了可靠、有序、 error-checked 的字节流通道。

三次握手过程：

  1. SYN： 客户端向服务器发送一个SYN包（序列号 = x），表示请求建立连接。

  2. SYN-ACK： 服务器收到后，回复一个SYN-ACK包（序列号 = y， 确认号 = x+1）。

  3. ACK： 客户端再向服务器发送一个ACK包（确认号 = y+1），连接建立成功。

HTTPS请求就是假设，在TCP连接建立后，还需要进行TLS握手，以协商加密密钥、验证服务器身份，建立安全的加密通道。

4. 发送HTTP请求

TCP连接建立好后，浏览器就能够利用该连接向服务器发送一个HTTP请求报文了。一个请求报文通常囊括以下部分：

  • 请求行： 包含请求方法（GET, POST等）、请求的URL路径、HTTP协议版本。

    • 例如： GET /index.html HTTP/1.1

  • 请求头： 包含关于客户端环境、请求的附加信息的一系列键值对。

    • 常见头部： Host, User-Agent, Accept, Cookie, Content-Type（用于POST）等。

  • 请求体： 通常在POST或PUT等方法中携带，具备要发送给服务器的数据（如表单数据、JSON等）。GET请求没有请求体。

5. 服务器处理请求并返回HTTP响应

服务器收到请求后，会根据请求的URL、方法、头部等信息进行处理（例如，调用后端应用程序、查询数据库等）。处理完毕后，返回一个HTTP响应报文。

响应报文包含：

  • 状态行： 包含HTTP协议版本、状态码和状态描述。

    • 例如： HTTP/1.1 200 OK

  • 响应头： 包含关于服务器、响应内容的描述信息。

    • 常见头部： Content-Type, Content-Length, Server, Set-Cookie, Cache-Control 等。

  • 响应体： 包含服务器返回的实际材料，如HTML文档、图片、JSON信息等。

6. 浏览器解析并渲染页面

这是前端工程师最关心的部分。浏览器拿到响应体（通常是HTML）后，会开始解析和渲染，这个过程是渐进式的。

  1. 解析HTML，构建DOM树： 浏览器将HTML字节流转换为字符，然后利用词法分析和语法分析，构建出一棵DOM（文档对象模型）树。

  2. 解析CSS，构建CSSOM树： 同时，浏览器会解析外部CSS资料和内联样式，构建出CSSOM（CSS对象模型）树。

  3. 合并DOM和CSSOM，构建渲染树： 将DOM树和CSSOM树合并，排除像 <head> 或 display: none 这样的非视觉节点，形成一棵只包含可见节点及其样式的渲染树。

  4. 布局： 计算渲染树中每个节点在视口（viewport）中的确切位置和大小。这个阶段也称为“重排”。

  5. 绘制： 将布局计算后的每个节点转换成屏幕上的实际像素。包括绘制文本、颜色、图像、边框和阴影等。

  6. 合成： 将各层绘制结果合并到一起，显示在屏幕上。

注意：

  • 在解析HTML时，如果遇到 <script> 标签（没有 async 或 defer 属性），会停止HTML解析，立即加载并执行JavaScript代码，因为JS可能会修改DOM结构。

  • 遇到 <link> 标签加载CSS文件时，不会阻塞HTML解析，但会阻塞渲染，以防止样式闪烁。

7. 断开TCP连接

当页面和所有依赖资源都加载完成后，为了节省资源，浏览器可能会关闭TCP连接。这个过程使用“四次挥手”。

四次挥手过程：

  1. FIN： 客户端（或服务器）发送一个FIN包，表示自己没有数据要发送了。

  2. ACK： 对方收到FIN后，发送一个ACK包进行确认。

  3. （等待对方资料发送完毕）： 对方在发送完所有数据后，也会发送一个FIN包。

  4. ACK： 客户端（或服务器）再发送一个ACK包确认，连接完全关闭。

HTTP/1.1 默认使用持久连接通过每次请求都重新建立和断开连接，这大大提高了性能。HTTP/2 更进一步，支持多路复用，可以在一个连接上并行交错地发送多个请求和响应。就是，即一个TCP连接能够用于多次HTTP请求/响应，而不

总结流程图

理解这个过程，对于前端性能优化（如减少DNS查询、利用缓存、减少重排重绘、优化关键渲染路径等）至关重要。

posted on 2025-10-27 22:14  wgwyanfs  阅读(2)  评论(0)    收藏  举报

导航