在网页中 HTTP 访问一个网址发生了什么？

简要流程

1. 解析 URL 与安全预处理
2. DNS 解析（目标域名 IP）
3. 建立连接（TCP/80 或 TCP/443；或 QUIC/UDP）
4. TLS 握手（若为 HTTPS）
5. 浏览器发起 HTTP 请求
6. 服务器处理请求（反向代理/应用/数据库/缓存）
7. 返回 HTTP 响应（状态码、响应头与内容）
8. 浏览器解析与渲染页面
9. 缓存与后续优化（前端/CDN/代理）
10. 连接复用或关闭

环节

1. 地址栏输入与预处理

• 自动补全与安全检查：浏览器可能进行历史记录/书签匹配、恶意站点拦截、HTTPS 先行策略（HSTS）。
• 本地命中与拦截：Service Worker 有权拦截同源请求，命中离线缓存或走自定义网络策略。

2. 域名解析（DNS）

• 解析顺序：hosts 文件 浏览器/系统 DNS 缓存 本地域名解析器 递归/权威 DNS。
• 关键记录：A/AAAA（IPv4/IPv6）、CNAME（别名）。CDN 会返回最优边缘节点 IP（ECS/GeoDNS）。
• 安全与隐私：DoH/DoT（HTTPS/TLS 下的 DNS）、DNSSEC 验证。解析结果受 TTL 控制被缓存。

3. 建立传输连接

• TCP 三次握手：SYN SYN-ACK ACK，常用端口 80（HTTP）/ 443（HTTPS）。
• 网络细节：MSS/MTU、慢启动与拥塞控制、Nagle 与延迟确认、NAT/防火墙、企业代理。
• HTTP/3 场景：若启用 QUIC（UDP），连接建立与握手流程与 TCP/TLS 不同，延迟更低。

4. TLS 握手（HTTPS）

• 目标协商：ALPN 协商 HTTP/2 或 HTTP/1.1；HTTP/3 使用 QUIC 内建加密。
• 证书验证：客户端校验服务端证书链与域名（SNI）；可能启用 OCSP Stapling、HSTS 强制 HTTPS。
• 密钥交换与加密：ECDHE 建立会话密钥；TLS 1.3 支持会话复用与 0-RTT（仅幂等请求适用）。
• Cipher Suite 与参数：双方协商加密套件、曲线与压缩（现代 TLS 不再使用压缩以防 CRIME）。

5. 发起 HTTP 请求

• 起始行与方法：GET/POST/PUT/DELETE/HEAD/OPTIONS 等，路径与协议版本。
• 常见请求头：Host、User-Agent、Accept、Accept-Language、Accept-Encoding、Cookie、Referer/Origin、Cache-Control、If-None-Match/If-Modified-Since、Range。
• 请求体与编码：Content-Type、Content-Length 或 Transfer-Encoding: chunked；表单与多媒体上传。
• 连接与多路复用：HTTP/1.1 keep-alive；HTTP/2 多路复用与优先级；HTTP/3 基于 QUIC 的流。
• 重定向与认证：3xx 跳转；401/407（含 Proxy-Authenticate）；跨域策略（CORS 预检与响应头）。

6. 服务器端处理链路

• 前置层：CDN/WAF/反向代理（如 Nginx），L4/L7 负载均衡，路由与重写（rewrite）。
• 静态/缓存命中：静态资源直接返回；命中代理/应用层缓存（如 FastCGI Cache、Redis）。
• 应用层：Nginx 将动态请求转发到应用服务器（如 PHP-FPM/Node.js/Java）。框架路由、认证与业务逻辑执行。
• 数据访问：数据库查询、事务处理、缓存读写、消息队列。必要时调用下游微服务。
• 渲染与压缩：SSR 模板渲染或返回 JSON；按 Accept-Encoding 启用 gzip/br 压缩。
• 观测与审计：生成访问日志，打点指标，TraceID/Span 贯穿链路便于追踪。

7. 返回 HTTP 响应

• 状态码：2xx 成功、3xx 重定向、4xx 客户端错误、5xx 服务端错误。
• 响应头：Content-Type、Content-Length/Transfer-Encoding、Content-Encoding（gzip/br）、Cache-Control/Expires、ETag/Last-Modified、Set-Cookie、Vary、CSP。
• 传输策略：分块传输（chunked）、流式响应；HTTP/2/3 的头部压缩与帧管理。
• 连接管理：keep-alive 保持复用，或按策略关闭；HTTP/2/3 的并发流无需多连接。

8. 浏览器解析与渲染

• 解析阶段：HTML DOM；CSS CSSOM；二者合成 Render Tree。
• 布局与绘制：计算布局（reflow），绘制（repaint），GPU 合成层；避免频繁重排/重绘。
• JS 执行：主线程事件循环；同步脚本阻塞解析；defer/async 优化；模块化与依赖加载。
• 资源调度：preconnect/prefetch/preload；优先级与并发限制；CSP 与子资源完整性（SRI）。
• 字体与图片：字体加载策略（FOIT/FOUT）；图片解码与懒加载；WebAssembly 场景。
• 离线与缓存：Service Worker、Cache Storage；IndexedDB 持久数据。
• 体验指标：FCP/LCP/CLS/TTI 等性能度量与优化。

9. 缓存与重用

• 强缓存与协商缓存：Expires/Cache-Control（max-age）、ETag/Last-Modified；命中 304。
• CDN 与代理缓存：按 Vary/Cache-Key 设计；避免过度碎片化；合理设置 TTL 与刷新。
• Cookie/会话：SameSite、Secure、HttpOnly；CSRF 防护；Session 与 Token 生命周期。

10. 连接复用或关闭

• keep-alive 超时与连接池；HTTP/2/3 的流结束与优雅关闭。
• TCP 关闭（FIN/ACK）或 QUIC 连接迁移与恢复。

小结

• 前端可通过合理的资源优先级、预连接、缓存控制与脚本加载策略显著优化首屏。
• 服务端通过缓存、压缩、连接复用、数据库索引与异步化等手段降低延迟与提升吞吐。
• 安全方面应启用 HTTPS、HSTS、CSP、严格的 Cookie 策略与输入校验，兼顾性能与安全。

https://www.ierchina.com/