这是一个接触前端 100% 会被问到的问题，
但也是一个90% 的人答不完整的问题。

你可能会说：

• “DNS 解析”

• “请求 HTML”

• “解析 DOM”

• “渲染页面”

👉 但如果继续追问：

• CSS 为什么会阻塞渲染？

• JS 为什么会卡住页面？

• 回流和重绘到底差在哪？

• 浏览器内核到底在干嘛？

很多人就开始“凭感觉回答了”。

这篇文章，我会用尽量通俗、不堆术语的方式，带你完整走一遍：

从你敲下回车，到页面真正出现在屏幕上，中间到底发生了什么？

一、先给结论：浏览器做了哪几件大事？

把「好记的域名」翻译成「真实的 IP 地址」

流程非常简单：

你输入 juejin.cn
↓
DNS 查询
↓
得到一个 IP
↓
浏览器去这个 IP 对应的服务器请求资源

4️⃣ 公网 IP 和私有 IP 的区别

公网 IP

• 全网唯一

• 能被外部访问

• 私有 IP

• 只在局域网内有效

• 学校 / 公司 / 家庭常见

三、为什么浏览器一上来就请求 index.html？

我明明只输入了域名，
为什么服务器知道要返回 index.html？

原因很简单：

• 浏览器访问服务器后

• 默认请求一个入口文件

• 这个文件几乎永远叫：index.html

所以你会发现：

• Vue / React 项目最终都会打包出 index.html

• 服务器部署的，其实是一堆静态资源

• HTML 是一切渲染的起点

四、浏览器内核到底是什么？为什么老爱被问？

很多人会说：

• Chrome 是 Blink 内核

• Firefox 是 Gecko

• Safari 是 WebKit

那内核到底是啥？

一句话解释：

浏览器内核 = 负责解析 HTML / CSS / JS，并把页面渲染出来的核心模块

也叫：渲染引擎（Rendering Engine）

常见关系👇

五、浏览器是如何一步步把页面“画”出来的？

这一部分是整个问题的核心。

1️⃣ 解析 HTML → DOM Tree

• HTML 会被拆成一个个标签

• 标签会被转换成节点

• 最终形成一棵 DOM 树

👉 DOM 树描述的是：页面的结构

2️⃣ 解析 CSS → CSSOM Tree

• 遇到 <link>，浏览器会下载 CSS

• CSS 会被解析成 CSSOM 树

⚠️ 重点来了：

3️⃣ DOM + CSSOM → Render Tree

• Render Tree 只包含需要显示的节点
• display: none 的元素不会进入渲染树

👉 Render Tree 描述的是：页面真正要画什么

4️⃣ Layout：计算位置和大小

5️⃣ Paint：真正开始画了

把布局结果，转换为屏幕上的像素

6️⃣ Composite：图层合成（性能关键）

• 页面会被拆成多个图层
• GPU 参与合成
• transform / opacity / video 等会创建新图层

👉 合理使用能提升性能，滥用会吃内存

六、回流 & 重绘：为什么页面会卡？

🔁 回流（Reflow）

一句话：

元素的位置或尺寸发生变化

常见触发场景：

• 改 width / height

• 改 position / display

• DOM 结构变化

• 读取布局信息（如 getComputedStyle）

⚠️回流一定会触发重绘

🎨 重绘（Repaint）

一句话：

例如：

• color
• background-color
• box-shadow
• opacity

👉 成本比回流小得多

🚀 常见性能优化建议

• 一次性修改样式（class / cssText）

• 减少 DOM 操作

• 避免频繁读取布局信息

• 合理使用 position: absolute / fixed

• 谨慎创建合成层

七、最后用一句话总结

浏览器渲染的本质就是：
HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite

如果你真正理解了这条链路：

• 白屏问题
• 页面卡顿
• 动画掉帧
• script / link 阻塞
• 回流 & 重绘优化

都会变得非常清晰。

参考文章：原文链接