知识点深化 · 前端 · 浏览器
浏览器渲染机制：从 URL 到像素、重排重绘
在地址栏敲下回车到页面显示，浏览器做了一串大事：解析 HTML/CSS、构建渲染树、布局、绘制。改 DOM 触发重排（reflow）最贵，改颜色只触发重绘（repaint）。理解这条流水线才能写高性能页面。
① 小白第一课怎么学（4 步走，约 60 分钟）
别急着背代码，先按这四步建立直觉：
1看图建立直觉（10 分钟）
读②③：浏览器怎么把代码变成画面。
2记渲染流水线（15 分钟）
读④：DOM/CSSOM/布局/绘制。
3手推触发（20 分钟）
精读⑤。
4刷题纠错（15 分钟）
做⑦⑩，错题回⑥。
本课小目标学完你要能：① 说出从 URL 到像素的流程；② 区分重排和重绘；③ 知道怎么减少重排。
② 一图看懂：浏览器渲染全地图
读法：中心是渲染，左解析右布局绘制，下是重排重绘与优化。
③ 本质直觉：浏览器把代码逐层变成画面
渲染流水线：① 解析 HTML 成 DOM 树；② 解析 CSS 成 CSSOM 树；③ 两者合并成渲染树（只含可见元素）；④ 布局 Layout：算出每个元素位置大小；⑤ 绘制 Paint：填色上屏。
重排（reflow）：改了元素的几何属性（宽高、位置、增删节点），浏览器要重新算布局，最贵。重绘（repaint）：只改颜色、背景等外观，位置不变，便宜点。
优化：用 transform/opacity 走合成器线程，不触发重排重绘。
CSS 阻塞渲染CSS 是渲染阻塞资源——CSSOM 没建好不会渲染，所以 CSS 要放 head 尽早加载。JS 会阻塞 DOM 解析（默认），放底部或加 async/defer。
④ 完整体系与对比表
重排 vs 重绘 vs 合成
| 操作 | 触发 | 代价 |
|---|
| 重排 Layout | 改宽高、位置、增删节点、读 offsetWidth | 最贵，重新布局 |
| 重绘 Paint | 改颜色、背景、可见性 | 次之，位置不变 |
| 合成 Composite | transform、opacity | 最便宜，GPU 线程 |
性能优化要点
① 批量修改 DOM（先 display:none 改完再显示）；② 避免频繁读 offsetWidth 强制同步布局；③ 动画用 transform/opacity；④ 用 documentFragment 批量插入；⑤ CSS 放 head，JS 放底部或 defer。
⑤ 用法场景与典型例题
例1（重排）改元素 width 触发什么？
改了几何尺寸。
width 是几何属性 → 重排 reflow，要重新算布局。
例2（重绘）改 color 触发什么？
只改外观。
color 不改位置 → 重绘 repaint，不重新布局。
例3（合成）用 transform 做位移动画为什么流畅？
不触发布局和绘制。
transform 由合成器线程处理，跳过 Layout 和 Paint，不阻塞主线程，60fps 流畅。
做题心法改几何必重排最贵，改颜色只重绘，transform/opacity 走合成最省。
⑥ 高频错误诊断（4 条）
错误1：以为改 CSS 都一样贵改 width 重排很贵，改 transform 走合成很便宜，差别巨大。
错误2：循环里反复读 offsetWidth读布局属性会强制浏览器同步重排，把批量读改缓存成一次。
错误3：频繁一个个改 DOM每次改都可能重排，应批量改完再上屏。
错误4：JS 放 head 阻塞渲染JS 默认阻塞 DOM 解析，放 body 底部或加 defer/async。
⑦ 考点真题演练（4 题）
考点分布
| 考法 | 出题形式 | 应对 |
|---|
| 渲染流程 | URL 到像素几步 | 解析→渲染树→布局→绘制 |
| 重排 | 改什么触发 | 几何属性 |
| 重绘 | 改什么触发 | 颜色外观 |
| 优化 | 动画用什么 | transform/opacity |
真题基础1. 修改元素的 width 会触发？
真题中档2. 修改元素的 background-color 会触发？
真题中档3. CSSOM 是什么？
真题拔高4. 做位移动画最流畅、不触发重排的方式是？
⑧ 必背知识点卡
流水线：DOM+CSSOM→渲染树→布局→绘制
重排：改几何尺寸位置，最贵 width/height
重绘：改颜色外观，次之 color/background
合成：transform/opacity，最便宜 GPU
CSS：渲染阻塞，放 head
JS：阻塞解析，放底/defer
优化：批量改、缓存读、transform
⑨ 应用输出：优化一个卡顿的列表动画
场景：网页上一个列表项用 JS 动画移动，但掉帧卡顿。
① 定位：动画用了 element.style.left += ...，每帧改 left 触发重排。
② 改造：改用 transform: translateX()，走合成器线程。
③ 批量：列表项先 display:none 隐藏，批量改完再显示，避免多次重排。
④ 缓存：需要读布局值时一次读完缓存，别在循环里反复读。
⑤ 效果：从卡顿掉到 60fps 流畅。
口述思路合上书说："动画卡顿多半是每帧重排，改走 transform 合成层。"
⑩ 分层练习（基础 + 中档 + 拔高）
▍基础 6 题
基础1渲染树由什么合成？
DOM + CSSOM。
基础2改 width 触发重排还是重绘？
重排。
基础4最流畅的动画用什么？
transform/opacity。
基础5CSS 阻塞渲染吗？
阻塞，要放 head。
▍中档 6 题
中档7JS 默认会阻塞 DOM 解析吗？
会，同步脚本暂停解析。
中档8怎么让 JS 不阻塞？
放 body 底部，或加 defer/async。
中档9读 offsetWidth 会导致什么？
强制同步重排。
中档10documentFragment 作用？
批量插入 DOM，只触发一次重排。
中档11渲染树包含 display:none 的元素吗？
不包含。
中档12visibility:hidden 的元素在渲染树里吗？
在（占空间），只是不可见。
▍拔高 6 题
拔高13什么是合成层？
GPU 独立图层，transform/opacity 元素自动提升，跳过重排重绘。
拔高14为什么读 offsetWidth 强制重排？
浏览器要返回最新布局，被迫先把队列里的修改重排掉。
拔高15defer 和 async 区别？
defer 按序在 DOM 解析完后执行；async 加载完就执行无序。
拔高16Reflow 一定伴随 Repaint 吗？
重排后必然重绘；重绘不一定重排。
拔高17怎么批量改 DOM 减少重排？
离屏元素改完再 attach，或改 className 一次切换。
拔高18为什么 transform 不触发重排？
它不影响文档流位置，由合成器直接位移位图。
⑪ 记忆口诀 + 7 天复习计划
三句口诀① DOM CSSOM 合成渲染树，布局再绘制。② 改几何必重排最贵，改颜色重绘，transform 走合成最省。③ CSS 放 head JS 放底，批量改 DOM。
| 天 | 任务 | 自检 |
|---|
| 第 1 天 | 读②③④，画渲染流水线 | 四步对 |
| 第 2 天 | 背重排重绘 + 基础 1-6 | 触发条件对 |
| 第 3 天 | 做中档 7-12，区分 defer/async | 能说清 |
| 第 4 天 | 做拔高 13-18，讲合成层 | 能讲清 |
| 第 5 天 | 做⑦真题 4 题 | 限时每题 2 分钟 |
| 第 6-7 天 | 合上书默写流水线 | 不看资料全默对 |
← 返回软件技术总览