浏览器渲染基础笔记：理解页面是怎么被画出来的
前端开发做久了以后，性能问题、样式问题、交互问题，最后都会回到一个基础问题：浏览器到底是怎么把页面画出来的？
如果对这个过程完全没有概念，很多优化只能停留在“知道有这个技巧”，但不知道为什么有效。
从 HTML 到页面展示，中间发生了什么
浏览器拿到页面内容后，并不是一下子就把整个页面显示出来。
它通常会经历几个关键步骤：
- 解析 HTML，构建 DOM
- 解析 CSS，构建 CSSOM
- 合并形成渲染树
- 计算布局
- 绘制页面
这几个步骤看起来抽象，但它们直接影响到前端开发中的很多实际问题。
为什么 CSS 会影响渲染
浏览器在构建渲染树之前，需要知道每个节点最终该长什么样。
也就是说，HTML 不够，CSS 也得准备好。
所以当样式资源还没准备完时，某些渲染工作就不能完全继续。这也是阻塞渲染的 CSS 文件会影响首屏展示的原因。
布局阶段在做什么
布局的核心，就是确定每个元素在页面上的位置和尺寸。
例如：
- 它有多宽
- 它有多高
- 它在父元素中的位置
- 它是否换行
一旦页面结构复杂、元素多、布局关系密集，这一步的成本就会上升。
什么是重排
当某些改动会影响布局时，浏览器就需要重新计算相关元素的位置和尺寸，这个过程通常被称为重排。
例如修改：
- 宽高
- 边距
- 定位
- 字体大小
这些都可能触发布局重新计算。
如果页面频繁发生这种变化，性能就容易受到影响。
什么是重绘
如果改动不影响布局，但影响元素外观，例如：
- 颜色
- 背景
- 阴影
浏览器可能只需要重新绘制，而不必重新计算布局。
重绘通常比重排轻，但如果发生得太频繁，同样会带来性能负担。
为什么频繁操作 DOM 容易卡
因为每次修改 DOM，都有可能影响后续渲染流程。
如果代码里不断读取布局信息、又不断改样式，就容易让浏览器频繁进入重新计算状态。
这也是为什么很多性能优化建议都会强调：
- 批量更新 DOM
- 减少无意义布局读取
- 避免在循环里不断改样式
JavaScript 为什么会影响页面渲染
因为浏览器主线程既要执行 JavaScript，也要处理布局和绘制。
如果 JavaScript 长时间占住主线程，渲染相关工作就会被推迟，用户看到的就是卡顿、掉帧、响应慢。
所以前端性能优化不只是资源优化，也包括控制主线程负载。
建立基础认知比记技巧更重要
理解浏览器渲染流程最大的价值，不是让你背术语，而是帮助你判断：
- 某种改动大概会影响哪一层
- 某个性能问题更可能出在什么阶段
- 哪些优化建议是真的有因果关系
写在最后
浏览器渲染机制看起来是底层知识，但它和日常前端开发关系非常紧密。
只要你理解了 DOM、CSSOM、布局和绘制之间的关系，很多性能和样式问题都会更容易分析。基础认知建立起来之后，优化才不只是“照着做”，而是“知道为什么这么做”。