作为前端开发者，浏览器从URL输入到页面最终渲染的完整流程，是面试高频考点、日常排障核心依据，更是理解前端性能优化的底层逻辑。
这篇文章带你从零梳理全流程，把网络、解析、渲染三大阶段拆透，吃透浏览器的“工作原理”。
一、流程总览
整个过程可以分为两大核心阶段：
- 网络阶段：输入URL → DNS解析 → TCP连接 → HTTP请求 → 服务器响应
- 渲染阶段：解析HTML → 构建DOM/CSSOM → 生成渲染树 → 布局 → 绘制 → 合成
下面逐步骤拆解。
二、第一步：输入URL，浏览器开始工作
当你在地址栏输入网址并回车后，浏览器第一件事不是发请求，而是处理URL：
1. 校验URL合法性
– 是合法域名/IP → 按网址处理
– 不是合法URL → 拼接成搜索引擎搜索地址
2. 拼接协议
未手动写协议时，浏览器默认补充 http/https（现代浏览器优先HTTPS）。
3. 查看缓存
浏览器会先查强缓存/协商缓存，命中则直接读取本地资源，不发网络请求。
三、第二步：DNS域名解析（域名 → IP）
网络通信靠IP地址，但我们记的是域名，所以需要DNS解析：
1. 解析顺序（缓存优先，逐级查询）
浏览器缓存 → 操作系统缓存（hosts） → 路由器缓存 → ISP运营商DNS缓存 → 递归查询根DNS/顶级DNS/权威DNS
2. 最终结果
把域名（如 www.baidu.com）转换成服务器IP，为建立连接做准备。
小优化：DNS预解析
dns-prefetch，提前解析关键域名，减少首屏等待。
四、第三步：建立TCP连接（三次握手）
拿到IP后，浏览器通过TCP协议与服务器建立可靠连接：
1. 客户端：“我可以发数据吗？”（SYN）
第一次握手由客户端发送资源包给到服务端，若该过程正常，则得出结论：服务端接收、客户端发送服务正常
2. 服务器：“可以，你能收吗？”（SYN+ACK）
第二次握手由服务端发送资源包给到客户端，若该过程正常，则得出结论：服务端发送、客户端接收服务正常
3. 客户端：“我能收，开始传输！”（ACK）
第三次握手由客户端发送资源包给到服务端，若该过程正常，则得出结论：服务端接收、客户端发送服务正常
HTTPS 额外流程
HTTPS会在TCP后，进行TLS四次握手，协商加密套件、交换密钥，保证传输安全。
五、第四步：发送HTTP/HTTPS请求
连接建立后，浏览器发送请求报文：
- 请求行：方法（GET/POST）、URL、协议版本
- 请求头：Cookie、User-Agent、Accept 等信息
- 请求体：POST/PUT 等方法携带的参数
服务器接收请求，处理业务逻辑、查询数据库后，返回响应报文：
- 状态码：200（成功）、301/302（重定向）、404（找不到）、500（服务错误）
- 响应头：缓存策略、Content-Type、CORS 等
- 响应体：核心的 HTML、CSS、JS、图片 等资源
六、第五步：关闭TCP连接（四次挥手）
数据传输完成后，断开TCP连接：
- 客户端：“我发完了”（FIN）
- 服务器：“收到，我处理完告诉你”（ACK）
- 服务器：“我也发完了”（FIN）
- 客户端：“收到，断开！”（ACK）
七、第六步：浏览器解析与渲染（核心！）
拿到HTML后，浏览器开始解析+渲染，这是前端最关键的部分。
1. 解析HTML，构建 DOM 树
- 浏览器自上而下读取HTML字节流 → 转字符串 → 转Token → 生成DOM树
- DOM树：描述页面结构与节点关系
2. 解析CSS，构建 CSSOM 树
- 解析内联、外链、嵌入式CSS → 生成CSSOM树
- CSSOM：描述节点样式规则与继承关系，只读不可直接修改
重点：
CSS加载阻塞渲染，不阻塞DOM解析
CSSOM未构建完成，不会进入下一步渲染
3. 生成渲染树（Render Tree）
将 DOM + CSSOM 合并，只保留可见节点：
- 排除：
display:none、<head>、注释节点 - 保留：可见节点 + 对应样式
渲染树 = 页面“长什么样”的蓝图。
4. 布局（Layout / Reflow）
遍历渲染树，计算每个节点的几何信息：
- 位置：x、y坐标
- 尺寸：宽高、边距、盒模型
首次布局叫布局，后续更新叫重排。
5. 绘制（Paint）
根据布局结果，填充像素信息：
- 颜色、背景、边框、阴影、文字、图片等
- 绘制会分层进行，提升效率
6. 合成（Composite）
将多个绘制图层按顺序合成，最终输出到屏幕。
性能关键点：
重排 → 重绘 → 合成，开销递减
transform / opacity只触发合成，不触发重排重绘，是最优动画属性
八、JS对解析渲染的阻塞
这是面试&开发必坑点：
- 默认情况下，JS阻塞DOM解析和渲染
浏览器遇到<script>会暂停解析HTML，先下载、执行JS
→ 因为JS可修改DOM/CSSOM，浏览器必须保证执行顺序 - 解决方案：
defer：异步下载，HTML解析完再顺序执行async：异步下载，下载完立即执行，无序- 脚本放
<body>底部
九、全流程极简总结（面试背诵版）
- 输入URL，浏览器校验并处理地址
- DNS解析域名，拿到服务器IP
- TCP三次握手建立连接，HTTPS完成TLS握手
- 发送HTTP请求，服务器返回HTML
- 浏览器解析HTML构建DOM，解析CSS构建CSSOM
- 合并生成渲染树，计算节点布局
- 绘制图层，合成后显示到页面
十、写在最后
吃透这个流程，你就能理解：
- 为什么要做资源懒加载、DNS预解析
- 为什么CSS要放头部、JS放底部
- 为什么
transform动画更流畅 - 页面白屏、卡顿、闪屏的底层原因
这是前端从“会写页面”到“懂原理”的必经之路。
需要我帮你把这篇博客适配成掘金/思否的Markdown发布格式，直接复制就能发吗？
