浏览器与图形引擎的渲染区别

by Web全栈工程师 on 2021 年 01 月 01 日

浏览器渲染（Browser Rendering）

浏览器渲染主要目标是解析HTML、CSS和JavaScript，并将网页内容以可视化的形式呈现给用户。侧重于页面的布局、样式、文本和图像的渲染。

浏览器渲染的核心步骤

1. 解析 (Parsing)：构建“骨架”和“样式表”

浏览器首先需要读懂代码。它会同时做两件事：

  • 解析 HTML 生成 DOM 树 (Document Object Model)： 浏览器读取 HTML 文件，像剥洋葱一样，一层层解析标签，最终在内存中构建一个树状结构。这个树的每个节点都对应 HTML 中的一个标签（如 <body>, <div>, <p>)。这棵树就是页面的内容骨架。
  • 解析 CSS 生成 CSSOM 树 (CSS Object Model)： 浏览器解析所有的 CSS（包括外部 CSS 文件、<style> 标签内的样式、元素的内联样式），同样构建一个树状结构。这棵树包含了所有元素的样式信息（如颜色、大小、位置）。

2. 样式计算与构建渲染树 (Style & Render Tree)

现在有了内容（DOM）和样式（CSSOM），但浏览器需要将它们结合起来，才知道“哪个内容”对应“哪个样式”。

  • 构建渲染树 (Render Tree)： 浏览器会遍历 DOM 树，对于每一个可见的节点，去 CSSOM 树中找到匹配的样式，然后将这个带有样式信息的节点添加到一个新的树中。这棵新树就是“渲染树”。
    • 注意：渲染树只包含需要显示在页面上的内容。像 <head> 标签，或者被 display: none; 隐藏的元素，是不会出现在渲染树里的。

3. 布局 (Layout / Reflow)：计算“位置”和“大小”

渲染树只知道“有什么”和“长什么样”，但还不知道它们在屏幕上的具体位置和尺寸。

  • 布局阶段： 浏览器从渲染树的根节点开始，递归地计算每个节点在屏幕视口（Viewport）内的精确坐标和几何尺寸（宽度、高度、边距等）。这个过程也叫回流 (Reflow)。输出的结果是一个包含了所有元素位置和大小信息的“盒子模型”。

4. 绘制 (Paint / Rasterizing)：填充“像素”

  • 绘制阶段： 浏览器根据布局阶段计算好的信息，将渲染树中的每个节点转换成屏幕上的实际像素。这个过程会考虑元素的层叠顺序（z-index），将页面的各个部分（文字、颜色、图像、边框等）绘制到一个或多个图层 (Layers) 上。

5. 合成 (Compositing)：组合“图层”并显示

现代浏览器为了提升性能，并不会把所有东西都画在一个大图层上。它会智能地为某些元素（如 transform 动画、<video> 元素）创建独立的图层。

  • 合成阶段： 最后，浏览器会将所有这些图层按照正确的顺序组合起来，然后一次性地在屏幕上显示出来。这个过程由 GPU (图形处理器) 负责，速度非常快，能保证动画的流畅。

计算机图形

计算机图形学（Computer Graphics）是一门融合了数学、物理与计算机科学的交叉学科。其核心目标是研究如何在计算机中表示、创建和处理视觉信息。该技术的应用范围广泛，包括科学计算可视化、影视特效、视频游戏、计算机辅助设计（CAD）、医学成像等领域。它是一套完整的、用于实现复杂视觉效果的科学与工程体系。

图形学的核心目标

与浏览器渲染专注于准确呈现文档内容不同，图形学的目标是创建、渲染和操作复杂的3D图形。

  • 创建 (Modeling)：指使用数学描述来定义三维物体的几何形状，从基础的几何图元到复杂的模型结构。
  • 渲染 (Rendering)：指将抽象的3D场景数据转化为2D图像的过程。此过程涉及对光照、材质和相机等参数的计算。
  • 操作 (Manipulation)：包括为物体应用动画、执行物理模拟（如碰撞检测）以及响应用户交互，从而实现动态的虚拟场景。

图形学处理的核心内容

一个三维场景由以下几个关键要素构成，这些也是图形学算法处理的主要对象：

  1. 3D模型 (Geometry & Models)： 所有三维物体都由最基础的几何图元——顶点（Vertices）——构成。顶点定义了空间中的点，这些点连接成线，进而构成多边形（Polygons）（通常是三角形）。大量的多边形组合在一起，便形成了物体的表面网格。对这些模型的变换（平移、旋转、缩放）依赖于线性代数中的矩阵运算。
  2. 纹理与材质 (Textures & Materials)： 材质定义了物体表面的光学属性，即其对光的反应方式。**纹理（Texture）**是一张2D图像，可以映射到3D模型表面以增加细节。材质属性（如反照率、金属度、粗糙度）则通过数值参数控制光在物体表面的反射和散射行为。
  3. 光照与着色 (Lighting & Shading)： 光照和着色是决定场景视觉真实感的关键环节。该过程模拟光源发出的光线与场景中物体交互后的效果。**着色器（Shader）**是在图形处理单元（GPU）上执行的一段程序，它根据光照模型、材质属性和观察者位置等信息，计算出每个像素的最终颜色。
  4. 动画与物理模拟 (Animation & Physics)： 动画与物理模拟为场景中的物体提供动态效果。动画可以通过关键帧插值或骨骼绑定等技术实现。物理模拟则依据牛顿力学等物理规律，计算物体的运动、形变和碰撞，以提高场景的真实感。

图形学的技术栈

实现计算机图形学应用需要依赖一套专业且底层的技术栈：

  1. 图形API (Graphics API)： 图形API是应用程序用于控制GPU（图形处理单元）的一组接口。开发者通过调用API（如 OpenGL、DirectX、Vulkan、Metal）向GPU提交渲染指令，从而控制整个渲染流程。这些API抽象了底层硬件的复杂性。
  2. 数学基础： 数学是计算机图形学的理论基础。
    • 线性代数：是图形学中用于计算的基础工具。向量用于表示位置和方向，矩阵用于执行坐标变换。
    • 几何学：用于处理和分析物体的形状、空间关系及相交检测。
    • 微积分：应用于高级光照模型和物理模拟等领域。
  3. 着色器语言 (Shader Language)： 如 GLSL (OpenGL Shading Language) 或 HLSL (High-Level Shading Language)，是用于编写着色器的专用编程语言。开发者通过编写着色器程序，可以实现自定义的渲染效果，对渲染管线的顶点处理和片元处理阶段进行精确控制。
  4. 图形引擎 (Game Engines)： 图形引擎（如 Unreal Engine、Unity）是将底层图形技术封装后形成的高级开发平台。它们集成了渲染器、物理引擎、动画系统、资源管理等多个子系统，使开发者能够更高效地构建复杂的交互式三维应用。

总结

浏览器渲染 (Browser Rendering) 计算机图形学 (Computer Graphics)
核心目标 准确呈现文档：遵循W3C等Web标准，将HTML/CSS代码精确地渲染成2D网页，保证内容的可读性和交互性。 创造虚拟世界：创建、渲染和操作3D场景，追求视觉真实感。
处理对象 文档与样式：

• HTML (结构)

• CSS (样式)

• JavaScript (行为)

 几何与光学数据：

• 3D模型 (顶点、多边形)

• 纹理 (表面细节)

• 材质 (光学属性)

• 光照 (光源、阴影)
核心流程 关键渲染路径 (Critical Rendering Path)：

1. 解析 (DOM, CSSOM)

2. 构建渲染树 (Render Tree)

3. 布局 (Layout/Reflow)

4. 绘制 (Paint)

5. 合成 (Compositing)

 渲染管线 (Rendering Pipeline)：

1. 应用阶段 (CPU)

2. 几何阶段 (GPU)

3. 光栅化阶段 (GPU) (其中包含复杂的顶点处理、着色、纹理映射等)
技术栈与抽象层级 高层抽象：

开发者主要使用声明式的HTML/CSS和脚本语言JS。底层实现封装在浏览器内核中（如Blink, Gecko, WebKit）。

 底层到高层：<br> • 底层：直接使用图形API (OpenGL, DirectX, Vulkan) 和着色器语言 (GLSL, HLSL)。<br> • 高层：使用图形/游戏引擎 (Unity, Unreal Engine)，引擎封装了底层API。
性能关注点 页面加载与响应速度：

• 首次内容绘制 (FCP)

• 最大内容绘制 (LCP)

• 避免重排/重绘 (Reflow/Repaint)

 实时渲染帧率 (FPS)：

• 每秒能够渲染的图像数量，追求流畅的动态画面。

• GPU计算效率，优化着色器和多边形数量。
最终产物 一个可交互的、基于文档流的2D网页。 一帧2D图像 (实时渲染时，连续的图像帧构成动画或交互式场景)。

Tagged as: 浏览器, 渲染, 计算机图像学

Comments on this entry are closed.

Previous post:

Next post: