前端页面加载过程是一个复杂的流程，涉及多个阶段和技术的协同工作。以下是详细的流程分析，涵盖从用户发起请求到页面完全渲染的全过程：
一、导航阶段（Navigation Phase）
用户输入URL
浏览器检查URL合法性（协议/域名等）。
若输入为搜索关键词，调用默认搜索引擎。
读取缓存
Service Worker 缓存：优先检查Service Worker是否缓存了资源（若有，直接返回）。
HTTP缓存：检查内存缓存（Memory Cache）和磁盘缓存（Disk Cache）：
强缓存（Cache-Control / Expires）：未过期直接使用缓存。
协商缓存（ETag / Last-Modified）：向服务器验证资源是否更新。
DNS解析
查询域名对应的IP地址：
浏览器缓存 → 系统缓存（hosts文件） → 路由器缓存 → ISP DNS服务器 → 递归查询（根域名→顶级域名→权威DNS）。
优化：DNS预解析（）。
建立TCP连接
三次握手（SYN → SYN-ACK → ACK）建立可靠连接。
优化：Keep-Alive复用连接（HTTP/1.1默认）。
TLS握手（HTTPS）
协商加密算法 → 验证证书 → 交换密钥（非对称加密）→ 生成会话密钥（对称加密）。
优化：TLS False Start（提前发送数据）。
二、资源请求阶段（Resource Request Phase）
发送HTTP请求
浏览器构造HTTP请求报文：
请求行（方法、URL、协议版本）。
请求头（Cookie、User-Agent、Accept-*等）。
请求体（POST数据）。
服务器处理请求
后端应用处理逻辑（路由、数据库查询等）。
返回HTTP响应（状态码、响应头、响应体）。
接收响应
浏览器根据状态码处理：
3xx：重定向（按Location头重新请求）。
200：解析响应内容（如HTML）。
三、解析与渲染阶段（Parsing & Rendering Phase）
构建DOM树
流程：graph LR
A[字节流] --> B[字符流] --> C[令牌化 Tokenization] --> D[生成DOM节点] --> E[构建DOM树]
阻塞问题：