你打开浏览器，输入一个网址，几秒钟后页面就完整展现在眼前。这个过程看似简单，背后却有一套精密的机制在运作——那就是网页渲染引擎。
从代码到画面：第一步是解析HTML
当你访问一个网页时，浏览器会先下载它的HTML文件。渲染引擎拿到这份代码后，就开始逐行读取，把标签转换成一个个节点，最终构建出一棵叫‘DOM’（文档对象模型）的树状结构。比如下面这段代码：
<html>
<head>
<title>我的主页</title>
</head>
<body>
<h1>欢迎光临</h1>
<p class="intro">这是我的第一个段落。</p>
</body>
</html>渲染引擎会把它变成一个有层次的结构，知道<h1>和<p>是<body>的孩子，而<title>属于<head>。这一步就像是看建筑图纸，搞清楚房子该有哪些房间、怎么分布。
CSS进来后，样式也得建模
光有结构还不够，网页还得好看。浏览器会加载页面引用的CSS文件，同样进行解析，生成另一棵树——CSSOM（CSS对象模型）。它记录了每个元素的颜色、字体、边距等样式信息。
DOM和CSSOM各自独立生成，但它们必须合并起来才能继续。两者结合后形成渲染树（Render Tree），这棵树只包含需要显示的元素（比如不包括被display: none隐藏的节点），并确定它们的视觉样式。
布局：计算位置和大小
有了渲染树，引擎就知道该画什么，接下来要决定在哪画、画多大。这个阶段叫布局（Layout），也叫重排（Reflow）。它会从根元素开始，递归地为每个可见元素计算在屏幕上的确切坐标和尺寸。
比如一个div设置了width: 80%，浏览器就得先知道它的父容器有多宽，再算出具体像素值。如果页面里有浮动元素或flex布局，计算会更复杂，但原理不变：一切为了定位。
绘制：把内容填进像素格子
布局完成后，就进入绘制（Paint）阶段。渲染引擎把每个元素拆成多个图层，然后一步步把文字、边框、阴影等视觉部分画出来。你可以把它想象成填色游戏：先勾线，再按区域上色。
现代浏览器为了提升效率，会把复杂动画或滚动区域单独分层，避免每次重绘整个页面。比如一个固定导航栏，即使下面内容在滚动，它也能保持不动且不重新绘制。
合成与显示：最后拼成一帧画面
所有图层绘制完成后，浏览器的合成线程会把它们按正确顺序叠加，生成最终的图像，推送到屏幕上。这个过程叫合成（Compositing）。如果你在用手机刷网页，每一次滑动看到的新内容，其实都是这样一帧帧“拼”出来的。
当页面发生动态变化，比如JavaScript修改了某个元素的class，整个流程可能又要走一遍。不过浏览器很聪明，会尽量只更新受影响的部分，而不是全盘重来。
下次你点开一个新闻页，看到图文整齐排列、按钮点击有反应，别忘了背后这套流水线正在飞速运转。它让互联网不只是代码，而是你能看见、能互动的真实世界。”}