Unity 之 UGUI 优化教程
全面解析 UGUI 在移动端的性能瓶颈与优化实战,助你把 UI 渲染时间压到 1 ms。

基于 Unity 2022.3 LTS,兼顾 2019+。文章结构遵循“定位 → 优化 → 验证”,示例脚本可在文末下载。

目录

  1. 前言
  2. 性能诊断
  3. Canvas 管理
  4. Draw Call 合批
  5. 遮罩与剔除
  6. 动态内容优化
  7. 事件系统优化
  8. 资源与图集
  9. Shader & SRP Batcher
  10. 常见误区
  11. 调试工具速查
  12. 结语

前言

UGUI 简单易上手,却常因 重建脏矩形、多材质切换 导致帧率骤降。通过合理 拆 Canvas、合批、避免过度 Layout,可在真机上稳定 60 FPS,甚至 90 FPS (AR/VR)。


性能诊断

工具 关键指标 目标值 (移动端) 说明
Profiler → UI Batches < 40 渲染批次数
Vertices < 50 k Canvas 顶点总量
Frame Debugger SetPass < 30 材质/Shader 切换
Overdraw 视图 红色区域 < 2 层 Alpha 叠加厚度

先测再改:性能诊断 → 确认瓶颈 → 针对性改动 → 复测


Canvas 管理

拆分策略

UI 类型 推荐 Canvas 刷新频率
静态 (主菜单背景) RootStaticCanvas 几乎不变
低频动态 (背包列表) ListCanvas 1 fps 内
高频动态 (HP 条) HUDCanvas 每帧
  • 合并脏区:关闭不用的 GraphicRaycaster
  • 切勿对整个 CanvasSetActive,改用 CanvasGroup.alpha

避免重建

void LateUpdate()
{
    if (needRefresh)
        LayoutRebuilder.MarkLayoutForRebuild(rectTransform);
}

只重建必要节点,拒绝全量 ForceUpdateCanvases()


Draw Call 合批

  1. SpriteAtlas 同一图集自动合批;开启 Tight Packing
  2. 材质共享:用 MaterialPropertyBlock 传动态色值,避免实例化材质。
  3. 动效 UI 建议 UIParticleCanvasGroup + RenderTexture

遮罩与剔除

方案 耗时 适用场景
Mask(Stencil) 多边形遮罩
RectMask2D 矩形裁剪
AlphaClip Shader 简单渐显
  • 嵌套遮罩 ≤ 2 层;必要时在最外层使用 剪裁 Shader 代替 Mask

动态内容优化

  • TextMeshPro.SetText() 缓存 StringBuilder,数字跳动不 GC。
  • 快速位移用 AnchoredPosition3D;少用 ContentSizeFitter
  • DOTween ⟹ DOFade/DOScale 取代 Animator,可节省 1 ms+。

事件系统优化

  1. Ignore Reversed Graphics:减少点击穿透计算。
  2. 合并大量 Button,统一派发 IPointerClickHandler
  3. 自定义 ICanvasRaycastFilter 精准过滤:
public bool IsRaycastLocationValid(Vector2 sp, Camera cam)
    => isVisible;   // 逻辑可关

资源与图集

  • UI Texture 使用 PNG8ETC2 8bit,不必 mipmap。
  • 大于 2048 图集拆分,否则 Android 内存跳增。
  • AssetBundle:按场景/功能分包,初包 < 20 MB。

Shader & SRP Batcher

  • URP 打开 SRP Batcher,99% UI Shader 已兼容。
  • 自定义 UI Shader 保持 属性顺序一致,防止 Batch Break。

常见误区

“把所有 UI 放一个 Canvas”
重建耗时会成倍增长。

“强行合图”
大图集导致 GPU Cache Miss,得不偿失。

“LayoutGroup 随便用”
编辑器预烘焙,运行时禁用 Layout 组件。


调试工具速查

名称 价值
UI Profiler 模块 Canvas Build/Upload 时间
Unity UI Stats DrawCall/SetPass/Vertices
RenderDoc GPU Overdraw
UIEventProfiler.cs Raycast 频率

结语

规划先行、定位精准、改动可控 是 UI 性能优化黄金三步。把这些原则融入 UI 规范和 Code Review,可从根源杜绝卡顿。祝开发顺利,帧率飙升!


附录 · 示例脚本

  • UIBottleneckChecker.cs — 运行时监测 DrawCall、Overdraw
  • RaycastBlocker.cs — 动态屏蔽射线
  • UIPerfStatsWindow.cs — 帧内 UI 耗时可视化窗口

Last modified on 2025-06-09