从浏览器输入URL到页面展现的全过程深度解析

一、URL解析与预处理阶段

1. 地址解析：

   • 浏览器解析URL结构（协议/域名/端口/路径等）

   • 检查地址合法性，自动补全（如添加https://）

   • 处理特殊字符编码（百分号编码）

2. HSTS预加载检查：

   • 查询内置的HSTS列表（强制HTTPS的域名）

   • 存在则自动将HTTP请求升级为HTTPS

3. 缓存查询：

   • 检查浏览器缓存（强缓存/协商缓存）

   • 查看Service Worker是否拦截请求

二、DNS解析阶段

1. 本地查询：

   • 浏览器缓存 → 系统hosts文件 → 本地DNS缓存

   • 现代浏览器DNS缓存时间约1分钟左右

2. 递归查询：

   • 本地DNS服务器 → 根域名服务器 → 顶级域名服务器 → 权威域名服务器

   • 使用UDP协议（端口53）进行查询

3. 优化策略：

   • DNS预解析（<link rel="dns-prefetch">）

   • 新兴技术：DoH（DNS over HTTPS）

三、TCP连接建立阶段

1. 三次握手：

   • 客户端发送SYN → 服务端响应SYN+ACK → 客户端发送ACK

   • 平均RTT时间影响连接建立延迟

2. HTTPS特殊处理：

   • TLS握手（ClientHello → ServerHello → 密钥交换）

   • 额外消耗1-2个RTT时间

   • 会话恢复机制（Session ID/Ticket）优化

3. 性能优化：

   • TCP Fast Open（TFO）

   • HTTP/2多路复用减少连接数

四、HTTP请求与响应阶段

1. 请求构造：

   • 组装请求行/头/体

   • 自动添加必要头（Host、User-Agent等）

   • 处理Cookie（同源策略限制）

2. 网络处理：

   • 经过路由选择、NAT转换等网络设备

   • 可能触发代理服务器（PAC脚本）

3. 服务端处理：

   • 负载均衡（LVS/Nginx）

   • 后端应用处理（如Tomcat解析请求）

   • 数据库查询/缓存读取

五、浏览器渲染阶段

1. 关键路径：

   HTML解析 → DOM树构建 → CSSOM构建 → Render树 → 布局 → 绘制
          ↓
   JavaScript执行（可能阻塞解析）

2. 渐进式渲染：

   • 流式处理HTML（无需等待完整下载）

   • 预加载扫描器提前发现资源

3. 现代优化：

   • 关键CSS内联

   • 异步/延迟加载非关键JS

   • 图像懒加载

六、回答技巧

1. 分层叙述：
   整个过程可分为网络层面和浏览器层面：网络层面包括DNS解析、TCP连接、HTTP传输；浏览器层面包括解析、渲染、执行等

2. 突出深度：
   在HTTPS握手阶段，除了密钥交换，现代浏览器还会使用OCSP装订来避免额外的证书状态查询

3. 性能意识：
   项目通过以下优化将首屏时间降低：

   • 域名分片突破连接数限制

   • 资源预加载提示（preload/prefetch）

   • 服务端渲染减少关键路径依赖

4. 安全关联：
   整个过程涉及多种安全机制：

   • CSP防止XSS

   • SRI校验资源完整性

   • SameSite Cookie防御CSRF

5. 数据量化：
   根据WebPageTest数据，典型3G网络下：

   • DNS查询：100-300ms

   • TCP+TLS握手：300-500ms

   • TTFB：200-1000ms

   • 渲染阻塞：取决于CSS/JS复杂度