下面是 第 20 题：从输入 URL 到页面渲染全过程
这是前端最最最经典、最全面的高频面试题。
我会用：结构化 + 流程图思维 + 要点总结 + 速记卡片 来讲解。
✅ 第 20 题：从输入 URL 到页面渲染发生了什么？
📘 一、整体流程（面试官希望你说出这些关键步骤）
DNS 解析 → 建立 TCP 连接 → 发送 HTTP 请求 → 服务器处理 → 返回 HTTP 响应
→ 浏览器解析响应 → 构建 DOM → 构建 CSSOM → 渲染树 Render Tree
→ Layout 排版 → Paint 绘制 → Composite 合成 → 页面呈现
面试官听到这些就知道你掌握程度不错。
下面详细展开。
📘 二、第一步：URL 解析
用户在地址栏输入 URL：
- 补全 scheme（如省略 http://）
- 判断是否是搜索查询（例如输入“abc”）
📘 三、第二步：DNS 域名解析
浏览器要将域名解析成 IP 地址。
DNS 查找顺序（从快到慢）：
- 浏览器缓存
- 系统 Hosts
- 本地 DNS 服务器缓存
- 递归 DNS 查询（. → 顶级域名 → 权威域名）
解析成功后得到服务器实际 IP。
📘 四、第三步：建立 TCP 连接（三次握手）
经典三次握手：
- SYN：浏览器 → 服务器
- SYN + ACK：服务器 → 浏览器
- ACK：浏览器 → 服务器
建立连接后才可以发送数据。
⚠️ HTTPS 多了一步：TLS/SSL 握手
（交换证书、对称加密密钥、验证身份）
📘 五、第四步：发送 HTTP 请求
浏览器发送：
- 请求行：GET / POST
- 请求头：cookie、cache-control
- 请求体（POST 才有）
📘 六、第五步：服务器处理请求
服务器进行：
- 鉴权（token, cookie）
- 路由匹配
- 业务逻辑处理
- 操作数据库
- 返回数据（HTML、JSON、静态文件）
📘 七、第六步：浏览器接收响应
服务器返回 HTTP 响应：
- 状态码（200 / 301 / 302 / 304 / 404 / 500 等）
- 响应头（cache-control、content-type）
- 响应体（HTML / CSS / JS / 图片 / json）
如果是 HTML，则进入下一阶段：解析渲染。
📘 七、浏览器渲染阶段（最重要的部分）
浏览器开始解析响应的 HTML。
📌 1. 构建 DOM 树
解析 HTML → 从上到下生成 DOM。
注意：
- 碰到
<script>会阻塞 DOM 构建（同步 script） - 除非 script 设置
defer / async
📌 2. 构建 CSSOM 树
解析所有 CSS 文件、style 标签、内联样式。
CSSOM 构建也会阻塞渲染，因为 JS 可能依赖样式计算。
📌 3. 合并 DOM + CSSOM -> 渲染树（Render Tree）
Render Tree 只包含：
- 可见元素
- 可见部分的样式
例如：
- display:none 元素不会进入渲染树
📌 4. Layout（重排）
计算各元素：
- 大小
- 位置
- 盒模型
📌 5. Paint（重绘）
绘制颜色、字体、边框、阴影等。
📌 6. Composite（合成）
GPU 将图层进行合成（Compositor）。
使用 transform / opacity 会创建合成层，避免重排 → 提高性能。
📘 八、页面绘制完成，但之后会继续触发渲染
用户滚动、JS 更新 DOM 等都会触发：
- Reflow（重排）
- Repaint（重绘）
你上一题已经学过。
📘 九、可能的加分环节：缓存
浏览器缓存可分为：
1. 强缓存（200 from disk/memory）
- Expires
- Cache-Control
2. 协商缓存（304 Not Modified）
- ETag
- Last-Modified
前端必须掌握缓存策略。
📘 十、最终版 10 秒速记卡片（模板可背）
输入 URL →
DNS 解析 →
TCP/HTTPS 握手 →
发送 HTTP 请求 →
服务器处理返回 →
浏览器解析 HTML →
构建 DOM →
构建 CSSOM →
合成渲染树 →
Layout →
Paint →
Composite →
页面呈现
加分内容：
- script 的 async / defer
- 页面资源缓存
- HTTP2 多路复用
- GPU 合成层（transform/opacity）
下面开始 第 23 题（详细加强版）
主题：浏览器渲染流程：从输入 URL → 到页面呈现，全流程讲解（面试 + 工程都常考）
这是前端面试最最常问的十大战题之一，而且许多题（回流/重绘、优化、JS 阻塞、渲染线程、多进程架构）都由它扩展而来，所以我们讲得足够详细，让你一题吃透八题。
✅ 第 23 题：浏览器渲染流程（超详细）
📌 一句话总览（可背）
输入 URL → DNS → 建立 TCP/TLS → 发 HTTP 请求 → 收响应 → 渲染进程处理 → HTML 解析成 DOM → CSS 解析成 CSSOM → 合并 DOM + CSSOM 生成渲染树 → 布局（回流） → 绘制（重绘） → 合成 → GPU 渲染。
🟦 第一部分：从 URL 到网络请求
1. 输入 URL，浏览器判断搜索还是访问协议
- 检查格式是否包含协议（http/https/ftp 等）
- 补全协议（如用户输入
baidu.com→ 自动加http://或自动跳 HTTPS）
2. 开始 DNS 查询（域名 → IP）
DNS 查询顺序（一般情况）：
- 浏览器缓存
- 系统缓存
- 本地 hosts
- 路由器
- ISP DNS
- 最终权威 DNS
性能优化：DNS Prefetch、preconnect、HTTP DNS（by 某些 App）
3. 建立 TCP 连接（三次握手）
客户端：SYN
服务器：SYN-ACK
客户端：ACK
之后双方建立会话。
4.（HTTPS）TLS 握手（证书验证 + 密钥协商）
详见上一题，我们已经展开过，这里只列流程：
TLS1.3：
- ClientHello
- ServerHello（证书链）
- ECDHE 密钥交换
- 计算 session key
- 加密通信
🟩 第二部分：发出 HTTP 请求 → 后端返回响应
浏览器发送请求
包含：
- 请求方法：GET/POST/PUT/DELETE
- 请求头：Cookie / User-Agent / Accept / Content-Type / Origin …
- 请求体（POST）
服务端返回内容
重要头部:
- Content-Type（text/html / js / css / json）
- Cache-Control（缓存策略）
- Content-Encoding（gzip / br）
- Content-Security-Policy 等安全头
- Set-Cookie
🟧 第三部分：浏览器渲染线程接手：解析 HTML
重点：HTML 不是等全部加载完才渲染，而是边解析边构建 DOM。
HTML 解析 → 构建 DOM 树（DOM Tree）
浏览器使用 HTML 解析器做两件事：
- 将 tokens 转成 nodes
- 按层级关系建立 DOM tree
遇到：
<script src>→ 阻塞 HTML 解析（除非async/defer）<link rel="stylesheet">→ 会阻止渲染树构建（因为 CSSOM 需要完成）
🟫 第四部分：CSS 解析 → 构建 CSSOM 树
CSS 是独立解析器解析的，解析出来形成 CSSOM（CSS Object Model）
CSS 解析是阻塞渲染的
因为浏览器在没有 CSSOM 前无法确定元素的样式（无法布局）。
🟪 第五部分：合并 DOM + CSSOM → 渲染树（Render Tree）
渲染树不等于 DOM 树：
- 不可见元素（display:none）不会进入渲染树
- 但 visibility:hidden 会进入（只是不可见）
- 伪元素会加入（::before）
渲染树 = 渲染用的结构。
🟦 第六部分：布局（Layout）——计算位置和大小（回流）
浏览器根据：
- 盒模型（width、padding、margin、border）
- 定位方式（static / absolute / flex / grid）
- 屏幕尺寸、字体等
计算出每个元素的确切位置。
布局阶段非常昂贵，这就是回流（Reflow）。
🟥 第七部分：绘制（Paint）——填充颜色、文字、阴影（重绘）
在已有布局信息的基础上绘制：
- 背景
- 字体
- 边框
- 阴影
重绘不一定触发回流（修改 color、background 等只触发 paint）。
🟩 第八部分：分层（Layering）与合成（Compositing）
Chrome 会把某些元素提升为单独的图层（layer）：
- transform
- opacity
- video
- position: fixed
- will-change
GPU 负责把不同层进行合成，就像 PS 图层叠加一样。
合成线程（Compositor Thread）
独立于主线程，可以 GPU 加速（特别是 transform、opacity 不触发回流）
🟦 最终：GPU 渲染（Rasterization）
合成好的图层被光栅化（rasterize）成位图 → 显示在屏幕上。
🎯 面试非常爱问的扩展（必须知道）
以下每个知识点都源自此题：
✔ 为什么 JS 会阻塞渲染？
因为 JS 可能修改 DOM 结构，浏览器要暂停 HTML 解析，以防 D OM 已改变而造成错乱。
所以 <script> 会阻塞
除非：
- async（下载异步，执行异步）
- defer（下载异步，文档解析后执行）
✔ 为什么 CSS 会阻塞渲染？
因为渲染树必须依赖 CSSOM，没 CSSOM 渲染树不能构建。
✔ 回流（Reflow）和重绘（Repaint）的区别？
回流：重新计算布局 → 很耗性能
重绘：只绘制外观 → 较轻量
✔ 哪些操作会触发回流？
- 改 display
- 改位置（left/top）
- 改尺寸（width/height）
- 改字体大小
- 改内容（innerText）
✔ 如何让动画不回流？
把动画放到 GPU：
transform: translateZ(0);
will-change: transform;
只触发合成，不触发布局（主线程压力小）
📌 10 秒速记卡（可背）
HTML → DOM
CSS → CSSOM
DOM + CSSOM → Render Tree
Render Tree → Layout（回流）
Layout → Paint（重绘）
Paint → Composite → GPU 渲染
JS 阻塞解析
CSS 阻塞渲染
transform/opacity 走合成线程（不会回流）
补充 ---
好的，继续 下一题（前端高频面试题 · 详细版）
前端高频第 23 题：谈谈浏览器的渲染流程（从 URL 输入到页面显示）？
这是前端必考题之一，深度能看出面试者的“全局能力”。
我会讲到非常详细 + 可速记方式。
✅ 浏览器从 URL 输入到页面展示的完整流程（超详细）
① URL 解析（Parsing URL）
用户输入 URL → 浏览器解析为：
- 协议（http/https）
- 域名
- 端口
- 路径
- 查询参数
如果缺端口，浏览器自动补：
- http → 80
- https → 443
② DNS 解析
将域名解析成 IP。
解析顺序（从快到慢）：
- 浏览器缓存
- 系统缓存
- 路由器缓存
- ISP DNS 缓存
- 权威 DNS
如果开启了 HTTPDNS/DoH，会跳过本地 DNS 系统。
③ TCP 连接（3 次握手）
确保：
- Client → Server 可以发
- Server → Client 可以收
- 双方都准备好连接
HTTPS 会紧接在 TCP 后增加一轮 TLS 握手。
④ 发送 HTTP 请求
包含：
- 请求行（GET / POST）
- 请求头（cookie、UA、Accept…）
- 请求体（POST 才有）
⑤ 服务器处理并返回 HTTP 响应
响应包含：
- 状态码（200、301、404…）
- 响应头（Cache-Control、Content-Type…）
- 响应体（HTML）
可能触发：
- 重定向（301、302）
- 缓存命中（304）
⑥ 浏览器接收 HTML，开始解析
浏览器会开始构建：
✦ DOM 树（Document Object Model）
HTML → 词法分析 → DOM 节点。
⑦ 同时下载外部资源（关键）
遇到标签：
<script>（会阻塞 DOM）<link rel="stylesheet"><img>、字体、视频…
浏览器会开线程并行下载。
❗ 重点：JS 会阻塞 HTML 解析
除非：
<script async><script defer>- 放在 body 底部
⑧ CSS 解析 → 构建 CSSOM
CSSOM 是 DOM 的“样式树”。
特点：
- 完全构建后才能进行下一步
- CSS 加载不会阻塞 DOM 构建
- 但会阻塞 render tree 构建
⑨ DOM + CSSOM → Render Tree（渲染树）
渲染树只包含可见节点，比如：
display: none不进入 Render Tree- 伪元素会创建特殊节点
⑩ Layout（回流 reflow）
也叫 reflow：
计算：
- 每个元素的大小
- 每个元素的位置
依赖：
- 父子结构
- CSS 属性
- viewport 尺寸
⑪ Paint（绘制）
把：
- 背景色
- 边框
- 阴影
- 文本
- 图片
绘制到层（layer）上。
⑫ 合成（Composite）
GPU 负责把多个图层进行合成：
- transform
- opacity
- will-change
- 3D 动画
都可以触发独立层，避免回流。
🟦 核心流程大图（速记版）
URL → DNS → TCP → HTTP → HTML
→ DOM
+ CSS → CSSOM
→ Render Tree
→ Layout（回流）
→ Paint（绘制）
→ Composite（合成）
→ 屏幕显示
🟦 面试官常问的跟进点（你要会）
1. 为什么 JS 会阻塞渲染？
因为脚本可能修改 DOM，因此浏览器必须暂停构建 DOM。
2. 哪些操作会触发回流？
- 改变布局（width/height/padding）
- 改变 DOM 结构
- 改变字体
- scroll、resize
3. 如何减少回流？
- 使用
transform代替top/left - 使用
visibility: hidden代替display: none - 批量 DOM 读写（使用 DocumentFragment）
- 采用虚拟列表
4. CSS 加载是否阻塞页面？
阻塞 render tree，但不阻塞 DOM 构建。
🟦 简短速记卡片版
浏览器渲染：
- URL 解析
- DNS 解析
- TCP/HTTPS 握手
- HTTP 请求
- 返回 HTML
- 解析 HTML → DOM
- 加载 CSS/JS
- CSS → CSSOM
- DOM + CSSOM = Render Tree
- Layout（回流）
- Paint（绘制）
- Composite（合成）
- 屏幕显示
核心：
- JS 阻塞 DOM
- CSS 阻塞渲染树
- 回流最耗性能
