Frontend Academy · 课时

浏览器、DNS 与 HTTP：请求生命周期

跟踪一个 URL 从地址栏开始，经过 DNS 解析、TCP 连接、HTTP 请求和服务器响应，最终返回浏览器的全过程。

第 1 / 4 课13 个步骤

浏览器、DNS 与 HTTP：请求生命周期 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

输入网址时会发生什么

每次访问网站时，浏览器都会启动一套精确的步骤。理解这套流程能帮助您成为更优秀的开发者——您会知道问题可能出在哪里，以及如何加快整个过程。

第 1 步——DNS 解析

DNS（域名系统）就像互联网的电话簿。您的浏览器会向 DNS 解析器询问：“example.com 背后的 IP 地址是什么？”解析器会检查缓存，必要时查询权威名称服务器。

# DNS lookup chain
# Browser cache → OS cache → Router cache → ISP resolver → Root NS → TLD NS → Authoritative NS

第 2 步——TCP 握手

得知 IP 地址后，浏览器会通过三次握手建立TCP 连接：SYN → SYN-ACK → ACK。对于 HTTPS，随后还会进行 TLS 握手来协商加密方式。

第 3 步——HTTP 请求

浏览器会通过 TCP 连接发送HTTP 请求。请求包含方法（GET、POST……）、路径（/index.html）、HTTP 版本，以及主机和接受类型等请求头。

GET /index.html HTTP/1.1
Host: example.com
Accept: text/html
User-Agent: Mozilla/5.0

第 4 步——HTTP 响应

服务器处理请求后会返回响应，其中包括状态代码（200 OK、404 未找到……）、响应头（内容类型、缓存控制）以及正文（HTML、JSON、图像字节）。

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1234

<!DOCTYPE html>...

HTTP/1.1 与 HTTP/2 和 HTTP/3

HTTP/1.1 每个连接只发送一个请求。HTTP/2 可以通过一个连接复用许多请求。HTTP/3 使用 QUIC（基于 UDP），能够降低延迟，在容易丢包的移动网络上尤其明显。

必须了解的状态代码

2xx = 成功（200 OK、201 已创建）。3xx = 重定向（301 永久重定向、304 未修改）。4xx = 客户端错误（400、401、403、404）。5xx = 服务器错误（500、502、503）。

HTTPS 与 TLS

HTTPS 将 HTTP 封装在TLS（传输层安全）中。TLS 提供：加密，确保流量无法被读取；通过证书进行身份验证，确保您确实是在与 example.com 通信；以及完整性保护，确保数据不会被篡改。

缓存：加快重复访问

响应可以包含 Cache-Control: max-age=86400，这样浏览器就能在一天内重复使用缓存副本。ETag 和 Last-Modified 响应头可以让浏览器验证缓存版本是否仍然是最新的。

Cache-Control: max-age=86400, immutable
ETag: "abc123"
Last-Modified: Wed, 01 Jan 2025 00:00:00 GMT

网站标识与会话

服务器会通过 Set-Cookie 响应头设置网站标识。浏览器每次向同一域名发出请求时，都会自动将这些标识发送回去。会话通常由一个保存会话 ID 的标识组成，服务器再将其映射到用户数据。

CDN——内容分发网络

CDN 会将您的资源副本存储在世界各地的数据中心。用户从距离最近的节点下载资源，从而减少延迟。Cloudflare、Fastly 和 AWS CloudFront 是常见的 CDN，大多数大型网站都会使用它们。

快速检查

从服务器请求网页时使用哪种 HTTP 方法？

在交互式课程中回答

回顾：完整的请求生命周期

输入网址 → DNS 将域名解析为 IP → 建立 TCP（+ TLS）连接 → 浏览器发送 HTTP 请求 → 服务器返回状态、请求头和正文 → 浏览器渲染响应。每一步都可以在 DevTools 的网络面板中观察到。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「浏览器、DNS 与 HTTP：请求生命周期」课时是免费的吗？

是的 — 「浏览器、DNS 与 HTTP：请求生命周期」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「浏览器、DNS 与 HTTP：请求生命周期」这节课中我会学到什么？

跟踪一个 URL 从地址栏开始，经过 DNS 解析、TCP 连接、HTTP 请求和服务器响应，最终返回浏览器的全过程。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「浏览器、DNS 与 HTTP：请求生命周期」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy