访问网页的全过程（分步骤的详细解析）
目录
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连接
- 三次握手：
- 客户端发送
SYN=1, Seq=x - 服务端响应
SYN=1, ACK=1, Seq=y, Ack=x+1 - 客户端确认
ACK=1, Seq=x+1, Ack=y+1
- 客户端发送
- 优化技术：
- 若启用
Keep-Alive，TCP连接可复用 - 若使用HTTP/2或HTTP/3，连接机制不同
- 若启用
5. TLS握手（HTTPS）
- 关键步骤：
- 客户端发送
ClientHello（支持的TLS版本、加密套件） - 服务端返回
ServerHello（选定加密套件）+ 证书链 - 客户端验证证书（CA链校验、有效期检查）
- 生成会话密钥（ECDHE密钥交换）
- 完成加密通道建立
- 客户端发送
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） - 处理流程：
- 验证请求合法性（防火墙、WAF）
- 路由到对应处理程序（如REST API路由）
- 可能涉及数据库查询（如用户登录状态）
- 生成动态内容（如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. 浏览器解析与渲染
-
关键流程：
- 构建DOM树：解析HTML生成文档对象模型
- 构建CSSOM：解析CSS样式表
- 合并Render树：组合DOM和CSSOM
- 布局（Layout）：计算元素位置/尺寸
- 绘制（Painting）：像素级渲染
- 合成（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
- 执行阶段：
- 解析AST（抽象语法树）
- 创建执行上下文
- 事件循环处理（宏任务/微任务）
- 触发DOMContentLoaded事件
- 最终触发load事件
12. 持续交互
- 长连接技术：
- WebSocket实时通信
- Server-Sent Events（SSE）
- 性能监控：
- 使用
Performance API采集指标 - 上报FCP（首次内容绘制）、LCP（最大内容绘制）等Web Vitals
- 使用