[特殊字符] 在浏览器地址栏输入 URL 后，页面是怎么一步步显示出来的？

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

你可能会说：

• “DNS 解析
  ”
• “请求 HTML”
• “解析 DOM”
• “渲染页面”

👉但如果继续追问：

• CSS 为什么会阻塞渲染？
• JS 为什么会卡住页面？
• 
  回流和重绘
  到底差在哪？
• 
  浏览器内核到底在干嘛？

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

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

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

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

不讲细节，先给你一条完整主线👇

输入 URL → 页面展示，大致分 9 步：

1. 解析 URL（域名 / IP）
2. DNS 解析（域名 → IP）
3. 向服务器请求 HTML（通常是 index.html）
4. 解析 HTML，生成 DOM Tree
5. 解析 CSS，生成 CSSOM Tree
6. DOM + CSSOM → Render Tree
7. Layout（计算位置和大小）
8. Paint（绘制像素）
9. Composite（图层合成，GPU 加速）

你现在只需要记住一句话：

浏览器做的事情，本质上就是：
把“代码”一步步变成“像素”。

后面我们逐个拆。

二、URL、域名、IP、DNS：浏览器是怎么找到服务器的？

1️⃣ IP 是什么？

一句话：

IP 地址 = 服务器在互联网上的门牌号

比如：
101.34.243.124

• 公网 IP 在整个互联网中是唯一的
• 只要你知道 IP，就能直接访问服务器

2️⃣ 那为什么还要域名？

因为 IP：

• 难记
• 不符合人类直觉

所以就有了：

• google.com
• baidu.com
• juejin.cn

👉域名，本质上就是 IP 的“别名”

3️⃣ DNS 到底在干嘛？

DNS 只干一件事：

把「好记的域名」翻译成「真实的 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）

常见关系👇

浏览器	内核
Chrome / Edge / Opera	Blink
Safari	WebKit
Firefox	Gecko
IE	Trident（已淘汰）

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

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

1️⃣ 解析 HTML → DOM Tree

• HTML 会被拆成一个个标签
• 标签会被转换成节点
• 最终形成一棵DOM 树

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

2️⃣ 解析 CSS → CSSOM Tree

• 遇到<link>，浏览器会下载 CSS
• CSS 会被解析成CSSOM 树

⚠️重点来了：

CSS不会阻塞 DOM 的解析
但会阻塞页面的渲染

3️⃣ DOM + CSSOM → Render Tree

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

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

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

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 阻塞
• 回流 & 重绘优化

都会变得非常清晰。