86.粒子系统GPU侧优化思路

81.性能优化-GPU-UI系统优化-优化ScrollRect

---

81.1 知识点

ScrollRect 带来的性能开销

ScrollRect 是 UGUI 中的可滚动 UI 容器，常用于列表、背包、排行榜等功能。其工作流程大致如下：

1. 有一个显示区域（Viewport）和一个实际内容节点（Content）。
2. Content 下挂载大量子元素（背包格子、排行榜条目等）。
3. 滚动时，ScrollRect 会移动 Content 的位置，驱动子元素的 RectTransform 变化。
4. 因为 RectTransform 在变，Canvas 会认为子元素“脏”了，触发 Canvas 重建。

因此，当 Content 下子元素很多（几百、上千个）时，即便屏幕只显示几十个，滚动时仍会对所有子元素做一次布局和渲染计算。由于 ScrollRect 的机制，子元素过多就会带来不必要的性能开销。

优化 ScrollRect 的核心思想

核心思路是：只保留在屏幕可见范围内的元素参与渲染，其余不渲染。可参考虚拟列表（循环列表）的做法：

1. 用对象池复用：只实例化/显示可见范围内的条目，滚动时复用节点、更新数据。
2. 自定义布局：不用 Unity 自带的自动布局组件，由脚本根据滚动位置计算每个条目的位置和显示内容。

此外，应把 ScrollRect 相关 UI 单独放在一个 Canvas 下，实现动静分离，避免滚动时拖垮整个界面的大 Canvas。

优化 ScrollRect 的小技巧

用 RectMask2D 替代 Mask 遮罩

当 ScrollRect 的裁剪区域只是矩形时，可以用 RectMask2D 替代 Mask 遮罩。RectMask2D 的 CPU/GPU 开销比 Mask 低很多。只有在需要非矩形裁剪（如圆角、异形）时再使用 Mask。

---

81.2 知识点代码

Lesson81_性能优化_GPU_UI系统优化_优化ScrollRect.cs

public class Lesson81_性能优化_GPU_UI系统优化_优化ScrollRect
{
    #region 知识点一 ScrollRect带来的性能开销

    //ScrollRect是UGUI中一个 可滚动的 UI 容器
    //常用于列表、背包、排行榜 等功能
    //它的工作流程大概如下所述：
    //工作流程：
    //1.有一个 显示区域（Viewport）和一个 实际内容节点（Content）
    //2.Content 下放了很多子元素（背包格子、排行榜玩家信息等等）
    //3.滚动时，ScrollRect 会移动 Content 的位置，驱动子元素的 RectTransform 变化
    //4.因为 RectTransform 在变，Canvas 会认为子元素脏了，触发 Canvas 重建
    //因此
    //当 Content 下子元素很多时（几百几千个）
    //哪怕屏幕只显示几十个
    //滚动时所有元素都会被算一次布局和渲染

    //因此
    //由于ScrollRect的本身工作机制
    //当子元素太多时
    //就会带来一些无意义的性能开销

    #endregion

    #region 知识点二 优化ScrollRect核心思想

    //核心优化思想
    //只保留 在屏幕可见的元素，其他元素不参与渲染
    //可以参考虚拟循环列表的做法
    //它的核心优化思路就是
    //1.利用缓存池复用对象，只显示可见范围内的元素
    //2.使用自定义布局，不使用Unity自带的布局组件

    //除此之外，我们应该把ScrollRect相关内容单独放入一个独立的Canvas中
    //达到动静分离的目的

    #endregion

    #region 知识点三 优化ScrollRect小技巧

    //用RectMask2D替换Mask遮罩
    //当ScrollRect的裁剪区域只是矩形的情况下
    //我们完全可以用RectMask2D来替代Mask遮罩
    //因为它的性能开销相对Mask要低很多
    //当非矩形时再使用Mask

    #endregion
}

---

---

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 785293209@qq.com