你有没有想过这样一个问题：当你在浏览器里输入一个网址，按下回车，短短一两秒之后，一个完整的网页就出现在你眼前了——有文字、有图片、有颜色，还可以点击、滚动。这一切究竟是怎么发生的？

其实，浏览器就像一座“代码加工厂”。它拿到的是纯文本格式的HTML、CSS和JavaScript代码，这些代码本身只是一堆字符，完全不是我们看到的那个精美页面。而浏览器的核心工作，就是把这些“半成品”代码，一步步加工成用户眼前那个可以交互的网页。这个过程，通常被称为“渲染”。

一、先把“图纸”搭起来

浏览器拿到HTML文件后，做的第一件事是“读懂”它。HTML代码里满是各种尖括号标签，浏览器没法直接看懂，需要先把它转换成一个自己能理解的树状结构，这棵“树”叫DOM树。

你可以把这棵DOM树想象成盖房子时搭的“钢架结构”。它标明了哪里是“门”（比如<div>）、哪里是“墙”（比如<section>）、哪里放什么内容，但这时候的架子还是灰蒙蒙的，没有任何样式。

几乎在同一时间，浏览器也在处理CSS代码。它会把所有样式规则整理成另一棵树——CSSOM树。如果说DOM树是“骨架”，那CSSOM树就是一份“装修明细清单”，上面写着“客厅墙面刷白色”“卧室窗帘用蓝色”。

二、把骨架和装修合在一起

有了DOM树和CSSOM树之后，浏览器就要把这两份图纸合并起来，生成一棵新的树，叫作渲染树（Render Tree）。这一步相当于把钢架和装修清单对起来——这面墙要刷漆，那扇窗要装帘。

值得一提的是，渲染树里只包含“能看得见”的东西。如果一个元素被CSS设置了display:none，它虽然在原始的DOM树里存在，但在渲染树里会被直接扔掉，因为它不需要被画出来。

三、计算位置：每个零件该放哪儿

合并完成后，浏览器需要回答一个关键问题：这些东西具体放在屏幕的什么位置？宽是多少？高是多少？这就是“布局”阶段要干的事。

布局阶段会计算出每个元素在屏幕上精确的坐标和尺寸。这是一项相当复杂的“数学活”，尤其当页面结构嵌套很深时，计算量会很大。这也是为什么后期修改某个元素的宽高，可能会牵一发而动全身，甚至导致整个页面重新计算——这个现象有个专业的名字叫“重排”或“回流”。

四、开始作画：把指令变成像素

位置确定之后，浏览器终于可以开始“画画”了。这个阶段叫作“绘制”。不过这里的“画”不是直接把颜色涂到屏幕上，而是先生成一系列“绘制指令”——相当于一张非常详细的动作清单，写着“在这个坐标画一个红色的圆”“在这个区域写一行黑色的字”。

你以为这就完了？其实还没有。为了提高效率，浏览器还会玩很多“花活”。它会把这些绘制指令交给专门的“合成线程”，这个线程会把大块区域切割成小块（分块），优先处理你当前能看到的那部分（视口附近），然后借助显卡（GPU）快速完成位图的生成，最终把图像显示在屏幕上。

五、一个“绊脚石”：JavaScript

整个流程中有一个“不确定因素”——JavaScript。当浏览器在解析HTML、构建DOM树的过程中，如果遇到<script>标签，它会立刻暂停所有工作，先把手头的活儿放下，去下载并执行这段JS代码，执行完才能继续之前的工作。

原因很简单：JS代码可能会修改DOM树（比如用document.write往页面里加新内容）。如果浏览器不管不顾地继续往后解析，JS突然在中间插了一手，前面的工作可能就白费了。所以，浏览器宁可“停下来等一等”。

当然，开发者可以通过给<script>标签加上async或defer属性来改变这种默认行为，但那是另一个话题了。