一、双缓冲原理：屏幕撕裂、双缓冲与工作流程
各位同学，咱们今天聊点实在的。页面切换卡顿这个问题，我敢说每个做 UI 开发的都遇到过。我自己刚入行那会儿，就被这个坑过——明明代码逻辑没问题，页面切换时就是闪一下、撕一下，用户体验极差。后来我才明白，这背后藏着一个核心概念：双缓冲。
说白了，双缓冲就是解决「画面撕裂」和「卡顿」的一套机制。咱们先搞清楚它要解决什么问题，再来看它怎么工作的。
1.1 什么是屏幕撕裂？
屏幕撕裂，英文叫 Screen Tearing。你玩游戏时可能见过——画面中间出现一条错位的横线，上半截和下半截对不上。嗯，这就是撕裂。
为什么会这样？
咱们的屏幕是一行一行刷新的。假设屏幕每秒刷新 60 次，也就是 60Hz。而 GPU 也在不停地往显存里写新画面。问题来了：如果屏幕刚刷到一半，GPU 把显存里的内容换了，那屏幕下半截读到的是新画面，上半截还是旧画面——中间就错位了。
核心原因：显示器的读取速度与 GPU 的写入速度不同步，导致同一帧画面里混入了两帧的内容。
我记得有一次做车载仪表盘项目，客户反馈说速度表指针偶尔会「分裂」成两个。排查了半天，就是屏幕撕裂导致的。指针在快速转动时，上半帧和下半帧的位置不一样，看起来就像指针断开了。
| 现象 | 原因 | 典型场景 |
|---|---|---|
| 画面中间出现错位横线 | 显示器读取时显存内容被覆盖 | 游戏、视频播放、页面滚动 |
| 快速移动的物体出现断裂 | 帧率与刷新率不匹配 | 动画、拖拽、滑动切换 |
| 页面切换时闪烁 | 新旧画面交替不完整 | 页面路由切换、弹窗显示 |
1.2 什么是双缓冲？
双缓冲，英文 Double Buffering。名字很直白——用两个缓冲区来干活。
你想想看，撕裂的根本原因是「读写冲突」。那解决办法也很简单：读写分开，别抢同一个地方。
双缓冲的做法是：
- 前缓冲区（Front Buffer）：专门给显示器读。显示器只从这里拿数据去刷新屏幕。
- 后缓冲区（Back Buffer）：专门给 GPU 写。GPU 在这里画下一帧，画完再说。
两个缓冲区互不干扰。显示器读它的，GPU 画它的。等 GPU 画完了，两个缓冲区交换一下角色——后缓冲区变成前缓冲区，前缓冲区变成后缓冲区。这样显示器永远读到完整的帧，不会读到一半被覆盖。
我个人的理解：双缓冲就像厨房里的两个锅。一个锅正在上菜（显示器读取），另一个锅正在炒菜（GPU 绘制）。菜炒好了，两个锅交换位置。客人永远吃到完整的菜，不会吃到半生不熟的。
1.3 双缓冲的工作流程
咱们把流程拆开来看。一共四个步骤：
- GPU 在后缓冲区绘制：把下一帧的画面内容全部画好。这一步可能涉及渲染、合成、纹理处理等。
- 等待垂直同步信号（V-Sync）：显示器每刷新完一帧，会发一个信号叫 V-Sync。GPU 收到这个信号后，才进行缓冲区交换。这一步是为了确保交换发生在显示器空闲的时候。
- 交换缓冲区：把后缓冲区变成前缓冲区，前缓冲区变成后缓冲区。注意，这里交换的是指针，不是把整块内存拷贝一遍——速度很快。
- 显示器读取新前缓冲区：显示器开始从新的前缓冲区读取数据，刷新屏幕。此时 GPU 已经在新的后缓冲区里画下一帧了。
我画了一张流程图，方便你理解：
我曾经踩过的坑：刚开始做双缓冲时，我误以为缓冲区交换是「把后缓冲区的内容拷贝到前缓冲区」。结果性能一塌糊涂，页面切换反而更卡了。后来才明白，交换的是指针，不是数据。记住：指针交换是 O(1) 操作，内存拷贝是 O(n) 操作，差别巨大。
1.4 双缓冲解决了什么问题？
咱们总结一下，双缓冲主要解决了三个问题：
- 消除屏幕撕裂：显示器永远读取完整的帧，不会读到一半被覆盖。
- 减少闪烁：新旧画面完整交替，不会出现部分更新导致的闪烁。
- 提升流畅度：GPU 可以提前绘制下一帧，不用等显示器读完再开始画。
但双缓冲也不是万能的。它有一个副作用：增加输入延迟。因为 GPU 画完一帧后，要等 V-Sync 信号才能交换，所以从用户操作到画面更新之间，最多会多等一帧的时间。对于普通页面切换来说，这点延迟几乎感觉不到。但对于竞技类游戏，有些玩家会关掉 V-Sync 来换取更低的延迟——当然，代价就是可能看到撕裂。
我的建议：在页面切换场景中，双缓冲 + V-Sync 是标配。用户更在意画面是否完整、是否卡顿，而不是那几毫秒的延迟。除非你做的是高频交互工具（比如绘图板、音乐制作软件），否则放心用双缓冲。
1.5 双缓冲的变体：三缓冲
简单提一句，双缓冲还有一个升级版叫三缓冲（Triple Buffering）。它多加了一个缓冲区，让 GPU 可以更自由地绘制，不用死等 V-Sync。三缓冲能进一步减少卡顿，但会占用更多显存。咱们后面的章节会详细讲，这里先留个印象。
| 方案 | 缓冲区数量 | 优点 | 缺点 |
|---|---|---|---|
| 单缓冲 | 1 | 延迟最低 | 撕裂严重，闪烁明显 |
| 双缓冲 | 2 | 消除撕裂，实现简单 | 增加一帧延迟 |
| 三缓冲 | 3 | 延迟更低，更流畅 | 显存占用高 |