❌

阅读视图

发现新文章，点击刷新页面。

🔥 在浏览器地址栏输入 URL 后，页面是怎么一步步显示出来的？

✇掘金 前端
swipe

这是一个前端面试 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 阻塞
  • 回流 & 重绘优化

都会变得非常清晰。

下篇预告

这篇我们讲的是：

浏览器 & 渲染引擎

但还有一个主角没登场：

👉 JavaScript 引擎（V8）

下篇会聊：

  • JS 是谁执行的？
  • JS 为什么会阻塞渲染？
  • 浏览器内核和 JS 引擎的关系？
❌