网页渲染引擎如何工作
打开浏览器，输入一个网址，页面几秒内就完整展现在眼前。这个过程看似简单，背后其实是网页渲染引擎在默默运作。它就像一位高效的舞台导演，把代码变成你能看到的图文并茂的页面。
当你访问一个网页时，浏览器首先会下载 HTML 文件。HTML 是页面的骨架，告诉渲染引擎页面里有哪些元素，比如标题、段落、图片等。拿到 HTML 后，渲染引擎开始解析，把文本转换成浏览器能理解的结构——DOM（文档对象模型）。
构建 DOM 树
假设你有这样一段 HTML：
<html>
<head>
<title>我的页面</title>
</head>
<body>
<h1>欢迎光临</h1>
<p class="intro">这是一段介绍文字</p>
</body>
</html>渲染引擎读取这段代码后，会构建出一棵树状结构：html 是根节点，下面分出 head 和 body，再往下是 title、h1、p 等节点。每个标签都成了树上的一个分支，这就是 DOM 树。
处理样式与渲染树
光有结构还不够，页面还得好看。浏览器接着加载 CSS 文件，解析成 CSSOM（CSS 对象模型）。它记录了每个元素的颜色、字体、边距等样式信息。然后，渲染引擎把 DOM 和 CSSOM 结合起来，生成渲染树（Render Tree）。
渲染树只包含需要显示的元素。比如被 display: none 隐藏的元素不会出现在这里，而 script 标签这类不可见节点也不会加入。这棵树决定了页面最终长什么样。
布局与绘制
有了渲染树，引擎开始计算每个元素在屏幕上的位置和大小，这个过程叫布局（Layout），也叫重排（Reflow）。它从根节点开始，逐级确定坐标。
布局完成后进入绘制（Paint）阶段。引擎把各个元素拆解成图层，按背景、边框、文字、阴影等图层进行绘制，就像画家一层层上色。最后把这些图层合成（Composite），形成你在屏幕上看到的画面。
JavaScript 的影响
很多人不知道，JavaScript 会打断渲染流程。当浏览器遇到 script 标签，通常会暂停 HTML 解析，先执行 JS 代码。因为脚本可能会修改 DOM 或 CSSOM，引擎必须等它执行完才能继续。
这也是为什么建议把 <script> 标签放在页面底部，或者使用 async、defer 属性，避免阻塞页面渲染。一个卡住的脚本，可能让整个页面白屏好几秒。
现代浏览器为了提升体验，做了很多优化。比如预解析 DNS、提前加载资源、异步渲染部分区域。即便如此，理解渲染机制依然重要。写文档时合理组织标签结构，控制 CSS 复杂度，能让你的页面更快更流畅地呈现出来。