HTML 与浏览器渲染机制
浏览器将 HTML 代码转换为您在屏幕上看到的视觉界面的过程，主要可以分为以下几个核心阶段。
解析
浏览器首先将接收到的 HTML 字节流转换 为它能理解的内部数据结构。
首先，浏览器根据指定的字符编码（现在基本都用 UTF-8 编码）将接收到的字节流转化为可识别的字符。随后进入词法分析阶段，将字符流进一步转化为有意义的标记（Tokens），例如 <html> 或 <p>。最终，浏览器利用这些标记来构建核心结构——文档对象模型（Document Object Model, DOM）。
这个 DOM 是一个重要的树形结构，它将 HTML 文档中的每一个元素、属性和文本都表示为一个节点，从而清晰地定义了网页的逻辑结构。
样式计算
一旦 DOM 树建立起来，浏览器就开始处理样式信息。
浏览器解析所有 CSS 样式（来自外部文件、内部 <style> 标签或行内 style 属性），并构建另一个树形结构，称为 CSS 对象模型（CSS Object Model, CSSOM）。CSSOM 存储了所有元素的样式规则。
浏览器将 DOM 树（内容和结构）和 CSSOM 树（样式）组合起来，创建出 渲染树（Render Tree）。渲染树只包含需要显示的节点（例如，display: none; 的元素不会出现在渲染树中），并且包含每个节点计算后的最终样式。
布局
布局阶段计算了渲染树中所有元素的几何信息（位置 和大小）。浏览器根据元素的样式（如宽度、高度、边距、填充等）和它们在屏幕上的相对位置，确定它们在视口（Viewport）中的确切坐标和尺寸。
这个过程是递归的，从根节点开始，确定所有子节点的位置。
绘制
绘制阶段是渲染的最后一步，它将每个元素转化为屏幕上的实际像素。浏览器遍历渲染树，根据元素的最终样式（颜色、边框、阴影、背景图片等），调用图形 API 将内容绘制到屏幕上。绘制通常被分成多个层（Layers）进行，以确保在后续的动画或交互中，只需要重新绘制发生变化的层，提高效率。
合成
如果浏览器使用了多个图形层，它会进入合成阶段。这个阶段将所有绘制好的层按照正确的顺序堆叠起来，最终呈现在用户的屏幕上。
小测试
回忆浏览器渲染机制：