计算机图像渲染原理和移动终端卡顿知识点总结

由于前段时间工作中遇到很多关于移动端图像渲染卡顿问题，抽空学习一下计算机图形渲染原理与移动终端屏幕成像及卡顿问题，这篇文章主要是梳理图形从生成到显示的全流程及核心优化知识点。

一、 核心知识点总结

1. CPU与GPU的核心差异

对比维度	CPU	GPU
设计目标	低时延、通用计算，处理复杂逻辑分支	大吞吐量、并行计算，专注图形渲染
内部结构	大缓存+复杂控制单元，计算单元少	大量计算单元（ALU），缓存占比小
适用场景	串行任务、逻辑判断	大规模并行任务，如图形像素处理

核心结论：图形渲染选择GPU的根本原因是其超强的并行计算能力，可快速处理像素级运算。

2. GPU图形渲染流水线（核心流程）

graph TD A[Application阶段-CPU处理] -->|输出图元（三角形/线段/顶点）| B[Geometry阶段-GPU处理] B --> B1[顶点着色器：坐标转换+光照+纹理] B1 --> B2[形状装配：顶点拼接成图元] B2 --> B3[几何着色器：生成新顶点/复杂图形] B --> C[Rasterization阶段-光栅化] C -->|图元转像素| D[Pixel阶段-像素处理] D --> D1[片段着色器：像素上色，性能瓶颈] D1 --> D2[测试与混合：深度/透明度处理，输出位图]

关键概念：光栅化是将几何图元转换为屏幕像素的过程，是连接三维模型与二维显示的核心步骤。

3. 屏幕图像显示原理

• 基础流程：CPU计算显示内容 → GPU渲染 → 帧缓冲区存储 → 视频控制器读取 → 显示器扫描显示
• CRT与液晶原理共性：依赖水平同步（HSync）和垂直同步（VSync）信号，显示器按固定帧率刷新，帧率即VSync信号频率。
• 图形渲染的脉络：CPU 准备数据 -> GPU 通过可编程的渲染流水线（几何->光栅化->像素处理）并行生成图像 -> 结果存入帧缓冲区 -> 通过双缓冲和VSync机制稳定地显示在屏幕上。

4. 屏幕显示问题与优化方案

graph LR A[单缓冲问题] --> A1[屏幕撕裂：扫描中切换帧缓冲区] A --> A2[效率低：读写缓冲区冲突] B[双缓冲+Vsync] --> B1[解决撕裂：Vsync信号触发缓冲区交换] B --> B2[新问题：掉帧，渲染超时则重复显示上一帧] C[三缓冲] --> C1[利用闲置时间预渲染] C --> C2[减少掉帧次数，平衡流畅度与延迟]

核心结论：

• 屏幕卡顿的本质是CPU/GPU渲染耗时过长，导致掉帧
• 双缓冲+Vsync以掉帧为代价解决撕裂；三缓冲进一步优化掉帧问题

5. 其他关键知识点

• GPU存储系统：层级结构为系统内存→GPU内存→L2 Cache→L1 Cache→流处理器，缓存容量远小于CPU。
• CPU-GPU异构系统：分为分离式（独立内存，PCI-e连接，主流）和耦合式（共享内存，如PS4）。
• 着色器语言：OpenGL使用GLSL语言，开发者可通过着色器控制渲染流程。

二、 整体知识思维导图

mindmap root((图形渲染与屏幕显示)) 硬件基础 CPU与GPU差异 GPU存储/流处理器 异构系统架构 渲染流水线 Application阶段 Geometry阶段 Rasterization阶段 Pixel阶段 屏幕显示 显示基础流程 同步信号（HSync/Vsync） 优化方案 双缓冲+Vsync 三缓冲机制 核心问题 屏幕撕裂 掉帧卡顿