以下是Google Chrome的网络请求和加载过程深度剖析：
1. 用户操作触发网络请求
- 输入URL启动流程：
在地址栏输入网址（如 `www.example.com` ）→按下回车键→Chrome通过DNS解析域名→获取目标服务器的IP地址（如 `192.0.2.1` ）。
- 点击链接或提交表单：
网页中的超链接（ a 标签）或表单提交（ form 标签）→触发浏览器生成HTTP请求→根据页面编码格式（如UTF-8）封装数据。
2. DNS域名解析阶段
- 本地缓存优先查询：
Chrome首先检查本地DNS缓存→若存在对应IP（如 `example.com→192.0.2.1` ）→直接跳过外部解析→提升速度并减少网络请求。
- 系统级DNS查询：
若本地无缓存，向操作系统请求DNS解析（如Windows的DHCP服务）→查询路由器或ISP的DNS服务器→返回域名对应的IPv4/IPv6地址。
- 自定义DNS设置：
在Chrome设置中可手动指定DNS服务器（如 `8.8.8.8` ）→绕过默认解析→解决某些网站访问受限问题。
3. 建立TCP连接与SSL握手
- 三次握手创建连接：
浏览器向服务器IP发送SYN包→服务器响应SYN-ACK→浏览器回复ACK→完成TCP三次握手（耗时约10-50ms）→建立可靠传输通道。
- TLS加密协商：
若URL以 `https://` 开头→触发SSL/TLS握手→浏览器发送支持的加密套件列表（如AES-GCM、RSA）→服务器选择并返回公钥→生成会话密钥用于数据加密。
4. HTTP请求发送与服务器处理
- 构造HTTP请求头：
Chrome自动添加请求头（如 `User-Agent: Mozilla/5.0` 、 `Accept-Language: zh-CN` ）→根据页面是否刷新决定是否添加 `If-Modified-Since` 或 `Etag` 。
- 服务器响应逻辑：
服务器接收请求→解析URL路径（如 `/api/data` ）→查询数据库或读取文件→生成HTML/JSON等内容→返回状态码（如200 OK、404 Not Found）及响应头。
5. 浏览器渲染与资源加载
- HTML解析构建DOM树：
浏览器从响应体中读取HTML→逐行解析标签（如 body 、 div ）→构建DOM树结构→遇到脚本（ `` ）时暂停解析并执行代码。
- CSS样式合并与计算：
内联样式（如 `style="color:red"` ）优先应用→外部CSS（如 link 引用）按顺序加载→浏览器计算最终样式（如字体大小、位置）并存储在CSSOM中。
- 异步加载图片与字体：
遇到 img 标签时→浏览器发起新HTTP请求获取图片→若设置了 `loading="lazy"` →延迟到页面滚动至可视区域再加载→减少初始资源消耗。
6. JavaScript执行与交互
- 脚本执行时机控制：
位于 head 中的脚本（如广告追踪代码）→阻塞DOM构建→建议将 `` 放在 body 前→避免延长白屏时间。
- 动态XHR请求处理：
通过 `XMLHttpRequest` 或 `fetch` 发起AJAX请求→浏览器复用已建立的TCP连接（Keep-Alive）→减少握手开销→常用于加载API数据或网页局部刷新。
7. 网络优化与异常处理
- 长连接与多路复用：
HTTP/1.1默认开启Connection: keep-alive→同一域名下复用TCP连接→HTTP/2支持多路复用（单个连接并发多个请求）→提升图片、CSS等资源的加载效率。
- 缓存策略实现：
浏览器缓存静态资源（如JS、图片）→根据Cache-Control头判断是否重新请求→强缓存（Expires/max-age）优先于协商缓存（Etag/Last-Modified）。
- 超时重试机制：
若TCP连接超时（默认200ms）→浏览器丢弃当前连接并重新发起请求→连续失败3次后提示用户检查网络→可通过 `chrome://net-internals/sockets` 查看连接状态。