访问网页的全过程（分步骤的详细解析）

目录

1. 输入URL并解析

2. 检查缓存

3. DNS解析

4. 建立TCP连接

5. TLS握手（HTTPS）

6. 发送HTTP请求

7. 服务器处理请求

8. 接收HTTP响应

9. 浏览器解析与渲染

10. 加载子资源

11. 执行JavaScript

12. 持续交互

1. 输入URL并解析

• 用户行为：在浏览器地址栏输入 https://www.example.com/index.html
• URL解析：
  • 浏览器解析协议（https）、域名（www.example.com）、路径（/index.html）
  • 若地址含非法字符，浏览器会调用默认搜索引擎（如输入 apple 会跳转搜索）

2. 检查缓存

• DNS缓存：
  • 浏览器缓存 → 系统缓存（hosts文件） → 路由器缓存 → ISP DNS缓存
  • 若缓存命中直接返回IP地址
• 资源缓存：
  • 检查 Cache-Control/Expires 头，可能直接使用本地缓存（状态码304）

3. DNS解析

• 递归查询流程：
  浏览器 → 本地DNS服务器 → 根DNS（.） → 顶级DNS（.com） → 权威DNS（example.com）
• 最终获取：www.example.com 对应的IP地址（如 93.184.216.34）

4. 建立TCP连接

• 三次握手：
  1. 客户端发送 SYN=1, Seq=x
  2. 服务端响应 SYN=1, ACK=1, Seq=y, Ack=x+1
  3. 客户端确认 ACK=1, Seq=x+1, Ack=y+1
• 优化技术：
  • 若启用Keep-Alive，TCP连接可复用
  • 若使用HTTP/2或HTTP/3，连接机制不同

5. TLS握手（HTTPS）

• 关键步骤：
  1. 客户端发送 ClientHello（支持的TLS版本、加密套件）
  2. 服务端返回 ServerHello（选定加密套件）+ 证书链
  3. 客户端验证证书（CA链校验、有效期检查）
  4. 生成会话密钥（ECDHE密钥交换）
  5. 完成加密通道建立

6. 发送HTTP请求

• 请求报文结构：
  GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 Accept: text/html Cookie: session_id=abc123
• 关键头信息：
  • Connection: keep-alive（长连接）
  • Accept-Encoding: gzip（压缩支持）
  • Cache-Control: max-age=0（缓存策略）

7. 服务器处理请求

• 典型架构：
  负载均衡（Nginx） → Web服务器（Node.js） → 应用服务器 → 数据库（MySQL）
• 处理流程：
  1. 验证请求合法性（防火墙、WAF）
  2. 路由到对应处理程序（如REST API路由）
  3. 可能涉及数据库查询（如用户登录状态）
  4. 生成动态内容（如JSP/PHP渲染）

8. 接收HTTP响应

• 响应报文示例：
  HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Set-Cookie: session_id=def456
• 关键状态码：
  • 301 Moved Permanently（永久重定向）
  • 404 Not Found（资源不存在）
  • 503 Service Unavailable（服务器过载）

9. 浏览器解析与渲染

• 关键流程：

  1. 构建DOM树：解析HTML生成文档对象模型
  2. 构建CSSOM：解析CSS样式表
  3. 合并Render树：组合DOM和CSSOM
  4. 布局（Layout）：计算元素位置/尺寸
  5. 绘制（Painting）：像素级渲染
  6. 合成（Compositing）：GPU加速层合并

• 优化触发：

  • async/defer 控制JS加载
  • 关键渲染路径优化（Critical CSS）
  • 使用will-change提示浏览器优化

10. 加载子资源

• 并行加载：
  • 图片（<img src="logo.png">）
  • 脚本（<script src="app.js">）
  • 样式表（<link rel="stylesheet">）
• 优先级策略：
  • 高优先级：视口内图片、关键CSS/JS
  • 低优先级：异步脚本、延迟加载图片

11. 执行JavaScript

• 执行阶段：
  1. 解析AST（抽象语法树）
  2. 创建执行上下文
  3. 事件循环处理（宏任务/微任务）
  4. 触发DOMContentLoaded事件
  5. 最终触发load事件

12. 持续交互

• 长连接技术：
  • WebSocket实时通信
  • Server-Sent Events（SSE）
• 性能监控：
  • 使用Performance API采集指标
  • 上报FCP（首次内容绘制）、LCP（最大内容绘制）等Web Vitals