从输入 URL 到页面加载完成，发生了什么？

需要通过 DNS（域名解析系统）将 URL 解析为对应的 IP 地址，可能会查看缓存，比如本地缓存或者Service Worker的缓存，如果有的话就直接加载资源，不需要再去请求服务器了，然后与这个 IP 地址确定的那台服务器建立起 TCP 网络连接，不过现在很多网站都使用HTTPS，所以在TCP连接之后还会有TLS握手，建立安全连接，随后我们向服务端抛出我们的 HTTP 请求，服务端处理完我们的请求之后，把目标数据放在 HTTP 响应里返回给客户端，拿到响应数据的浏览器就可以开始走一个渲染的流程。渲染完毕，页面便呈现给了用户，并时刻等待响应用户的操作。

1.URL 解析

输入处理：浏览器判断输入是 URL 还是搜索内容（若为搜索词，调用默认搜索引擎）。
协议补全：自动补全协议（如 http:// 或 https://）。
编码检查：对非 ASCII 字符进行 Punycode 编码（如中文域名）。

2.缓存检查

浏览器缓存：检查资源是否在本地缓存（强缓存 Cache-Control / Expires）。
Service Worker：若注册了 Service Worker，可能拦截请求并返回缓存内容（如 PWA 应用）。
HSTS 强制跳转：如果域名在 HSTS 预加载列表中，强制使用 HTTPS。

3.DNS 查询

本地缓存：依次检查浏览器缓存 → 操作系统缓存（如 hosts 文件） → 路由器缓存。
递归查询：若缓存未命中，向 DNS 服务器发起请求（如 8.8.8.8），过程包括：
根域名服务器 → 顶级域服务器（如 .com） → 权威域名服务器。
DNS 预取：某些浏览器会提前解析页面中的域名。

4.建立 TCP 连接

三次握手：
客户端发送 SYN 包（序列号 x）。
服务器返回 SYN-ACK（序列号 y，确认号 x+1）。
客户端发送 ACK（确认号 y+1）。
优化：TFO（TCP Fast Open）允许在首次 SYN 时携带数据。

5.TLS 握手（HTTPS）

协商加密套件：客户端发送支持的 TLS 版本和加密算法。
证书验证：服务器返回证书链，浏览器验证证书合法性（是否过期、是否由信任的 CA 签发）。
密钥交换：通过 ECDHE 算法生成会话密钥，后续通信使用对称加密。

6.发送 HTTP 请求

请求头构造：包含 Method、Path、User-Agent、Cookie、Accept-* 等字段。
Cookie 策略：根据同源策略和 SameSite 属性决定是否携带 Cookie。
HTTP/2 优化：多路复用、头部压缩、服务器推送（Server Push）。

7.服务器处理请求

负载均衡：请求可能被反向代理（如 Nginx）转发到具体服务器。
后端逻辑：执行数据库查询、API 调用等操作。
响应生成：返回状态码（如 200 OK、302 Redirect）、响应头和 HTML 内容。

8.浏览器解析与渲染

流式解析：边下载 HTML 边解析，无需等待全部内容。
构建 DOM 树：将 HTML 标签转换为树形结构，遇到

9.加载动态内容

异步请求：通过 fetch() 或 XMLHttpRequest 加载数据。
DOM 更新：触发重绘（Repaint）或回流（Reflow），如使用 Virtual DOM 减少操作次数。

10.加载完成

DOMContentLoaded 事件：当 DOM 解析完成时触发。
load 事件：页面所有资源（图片、样式表）加载完成后触发。
预加载与预渲染：通过 提前加载后续页面资源。