从用户在浏览器地址栏输入URL并按下回车键，到页面完全展示，这个过程涉及计算机网络、浏览器引擎、服务器软件等多个技术领域的复杂协作

Ⅰ网络通信流程

1.解析URL

浏览器首先解析URL，确定：

• 协议（HTTP/HTTPS）
• 域名（需要转换为IP地址）
• 资源路径（要请求的具体文件）

2.检查缓存(多方检查)

浏览器在真正发起网络请求前，会进行一系列检查，如果命中任何一层缓存，都可能直接使用本地副本，从而跳过后续步骤：

• ​Service Worker 缓存​：如果网站注册了 Service Worker，浏览器会优先将请求交给它处理，它可以将资源存在缓存中，甚至完全离线工作
• ​浏览器缓存（HTTP Cache）​​：浏览器会检查本地缓存，看是否有这个 URL 的有效副本。检查 Cache-Control、Expires等头部，判断缓存是否新鲜。如果有效，则直接使用缓存，​整个过程结束
• ​Hosts 文件检查​：操作系统会检查本地的 hosts文件，看是否有人为绑定的域名和 IP 地址
• ​路由器缓存​：请求到达路由器，路由器也可能缓存了 DNS 记录

3.DNS域名解析

DNS域名解析过程 – FrontYang’ s Blog

如果缓存未命中，就需要将域名转换成 IP 地址

这是一个递归查询过程：

• 浏览器检查自身 DNS 缓存
• 向本地 DNS 服务器​（通常由 ISP 提供，或你手动设置如 8.8.8.8）发起查询
• 本地 DNS 服务器会依次从根域名服务器、顶级域名服务器​（.com）、权威域名服务器​（example.com）查询，最终获得 www.example.com对应的 IP 地址（如 93.184.216.34）

4.建立TCP连接

浏览器拿到 IP 地址后，会向服务器的 80（HTTP）或 443（HTTPS）端口发起 ​TCP 连接

这个过程就是著名的 ​TCP 三次握手​：

1. 浏览器发送 SYN包（同步序列编号）到服务器
2. 服务器回应 SYN-ACK包
3. 浏览器再回应 ACK包 至此，可靠的 TCP 连接建立成功

5.建立TLS连接(HTTPS)

如果是 HTTPS，在 TCP 连接之上，还需要进行 ​TLS 握手，以建立一个安全的加密通道：

1. ​ClientHello​：浏览器向服务器发送支持的加密算法列表和一个随机数
2. ​ServerHello​：服务器选择加密算法，发送自己的数字证书和一个随机数
3. ​验证证书​：浏览器验证服务器证书的合法性（是否过期、是否由可信机构颁发、域名是否匹配）
4. ​生成会话密钥​：浏览器用证书中的公钥加密一个“预主密钥”发送给服务器
5. ​生成对称密钥​：双方用三个随机数生成相同的对称会话密钥，后续通信都用这个密钥加密解密

6.发送HTTP请求

安全通道建立后，浏览器会构造一个 ​HTTP 请求报文，并通过 TCP 连接发送给服务器

报文包括：

• ​请求行​：GET /index.html HTTP/1.1
• ​请求头​：Host: www.example.com, User-Agent, Accept-Language, Cookie等
• ​请求体​：对于 GET 请求，通常为空；对于 POST 请求，则包含提交的表单数据

7.服务器处理请求

服务器收到请求后，会对其进行处理：

• ​Web 服务器​（如 Nginx、Apache）接收请求，根据路径将请求转发给相应的应用服务器​（如 Tomcat、Django）
• ​应用服务器执行相应的业务逻辑（如查询数据库、处理业务）
• ​应用框架​（如 Spring, Express）最终生成一个 HTTP 响应，通常是 HTML 页面

8.服务器返回HTTP响应

服务器将处理结果封装成 ​HTTP 响应报文发回给浏览器

报文包括：

• ​状态行​：HTTP/1.1 200 OK（表示成功）
• ​响应头​：Content-Type: text/html, Content-Length, Set-Cookie等
• ​响应体​：请求的 HTML 文档内容

9.浏览器接收响应

浏览器开始接收服务器返回的数据

• 如果状态码是 301/302（重定向），浏览器会根据 Location头中的新 URL，​从头开始整个过程
• 检查响应头的缓存信息，决定是否缓存本次响应的资源

10.关闭TCP连接

数据传输完成后，TCP 连接的管理取决于 HTTP 版本和头部设置：

• ​HTTP/1.0​：默认关闭连接（四次挥手）
• ​HTTP/1.1 及以上​：默认使用 ​Keep-Alive​ 长连接 同一个 TCP 连接可以用于发送多个 HTTP 请求/响应，避免频繁建立和断开连接的开销 连接会保持一段时间，或在所有请求完成后关闭

Ⅱ浏览器渲染流程

浏览器渲染原理 – FrontYang’ s Blog

1.解析HTML 构建DOM树

• 过程​：浏览器将 HTML 字节流转换成字符，然后根据 HTML 规范进行词法分析和语法分析，构建出DOM（文档对象模型）树 DOM 是 HTML 文档在内存中的对象表示，它定义了文档的逻辑结构和操作接口
• ​注意​：解析过程是渐进式的，不是等到所有 HTML 下载完才开始

2.解析CSS 构建CSSOM树

• ​过程​：浏览器解析外部 CSS 文件和内联样式，构建 ​CSSOM（CSS 对象模型）树 它包含了所有 CSS 选择器的样式信息
• ​注意​：CSS 解析会阻塞渲染，因为浏览器需要完整的 CSSOM 来确定每个节点的样式

3.构建渲染树

过程​：浏览器将 DOM 树和 CSSOM 树合并成一棵 ​渲染树 这棵树只包含需要在页面上显示的可视元素（不包含 display: none的元素），并计算每个元素的计算样式

4.布局

• ​过程​：也称为重排 浏览器计算渲染树中每个元素在视口内的确切位置和大小（坐标信息） 这个过程是递归进行的，因为一个元素的位置可能依赖于其父元素或子元素
• ​单位转换​：将相对单位（如 px, %, vw）转换为屏幕上的绝对像素

5.绘制

• 过程​：也称为栅格化。浏览器将布局阶段的计算结果转化为屏幕上的实际像素 它遍历渲染树，调用 UI 后端 API（如操作系统 GUI 接口）将每个节点绘制出来 绘制过程包括绘制文本、颜色、图像、边框、阴影等
• ​图层​：为了提高性能，浏览器会将页面分成多个图层，有些图层会由 GPU 加速渲染（硬件加速）

6.合成与显示

过程​：当各个图层都被绘制完成后，浏览器会将它们按照正确的顺序合成为一个完整的页面 最终，这个合成后的页面被显示在屏幕上

7.后续 : 异步加载与交互

• 加载其他资源​：在解析 HTML 时，浏览器会遇到 <img>, <script>, <link>等标签，会再次发起网络请求来加载这些资源（CSS、JS、图片等）非关键资源（如图片）的加载不会阻塞 DOM 构建
• ​执行 JavaScript​：当遇到 <script>标签时，HTML 解析会暂停，直到脚本下载（如果是外部脚本）并执行完成。因此，通常建议将 <script>标签放在 body 底部或使用 async/defer属性
• ​成为可交互的页面​：在所有资源加载完毕，特别是 JavaScript 执行完成后，页面变为完全可交互的状态 浏览器会触发 DOMContentLoaded和 load事件

Ⅲ总结