打开浏览器，输入一个网址，页面很快就显示出来了。你有没有想过，这个过程是怎么发生的？其实，网页能被看见，靠的是浏览器对HTML的渲染。
从请求到显示
当你在地址栏按下回车，浏览器先向服务器发起请求，拿到HTML文件。这个文件本质上是一段文本，包含各种标签，比如<h1>、<p>、<img>等。光有这些标签，页面还不能直接显示，需要经过解析和处理。
构建DOM树
浏览器拿到HTML后，会从上到下读取内容，把每个标签转换成对应的节点，形成一个树状结构，叫做DOM（Document Object Model）。比如这段代码：
<html>
<head>
<title>我的网页</title>
</head>
<body>
<h1>欢迎来到</h1>
<p>这是一个段落</p>
</body>
</html>浏览器会把它变成一棵树：html是根节点，下面分出head和body，head里有title，body里有h1和p。这棵树决定了页面的结构。
CSS参与样式计算
光有结构还不够，页面还需要样式。如果HTML里引用了CSS文件，或者内部写了style，浏览器会加载并解析这些样式规则。然后根据选择器匹配对应的DOM节点，算出每个元素应该长什么样——颜色、大小、位置等。这个过程叫“样式计算”。
布局与绘制
接下来是布局（Layout），也叫重排。浏览器知道每个元素的样式后，开始计算它们在页面上的位置和尺寸。比如一个div设了width: 50%，那它占父容器一半宽度。这个阶段完成后，浏览器就知道所有元素该放在哪里。
然后进入绘制（Paint）阶段。浏览器把各个元素拆分成图层，比如背景、文字、边框，分别画到画布上。最后合成（Composite）成一张完整的图像，显示在屏幕上。
JavaScript的影响
如果页面中有JavaScript，情况会更复杂。脚本可能会修改DOM或CSS，比如点击按钮后隐藏一段文字。浏览器必须重新计算样式、重新布局甚至重新绘制，确保画面更新正确。这也是为什么有些网页操作后会有卡顿感——它正在重新渲染。
整个过程非常快，通常在几毫秒内完成。用户感知不到这些步骤，只看到页面“一下子”就出来了。但理解这个流程，有助于写出更高效的网页代码，比如避免频繁触发重排。