0. 预期#

• 目标帧预算：60 Hz ≈ 16 ms/帧；120 Hz ≈ 8 ms/帧（UI 线程 + 栅格线程各占一半）。用 DevTools 的 Performance/Timeline 看 UI/Raster 两条帧柱，定位卡顿尖峰。
• 调试开关：debugRepaintRainbowEnabled 看重绘；PerformanceOverlay 看两线程耗时。只在 debug 有效。

1. 控制重建范围（Widget 层，收益最大）#

1
class SpinningIcon extends StatelessWidget with TickerProviderStateMixin {
2
  const SpinningIcon({super.key});
3

4
  @override
5
  Widget build(BuildContext context) {
6
    final controller = AnimationController(
7
      vsync: this,
8
      duration: const Duration(seconds: 2),
9
    )..repeat();
10

11
    final rotation = CurvedAnimation(parent: controller, curve: Curves.linear);
12

13
    return AnimatedBuilder(
14
      animation: rotation,
15
      child: const Icon(Icons.autorenew, size: 24), // 静态子树，不随帧重建
16
      builder: (context, child) => Transform.rotate(
17
        angle: rotation.value * 6.2831853,
18
        child: child,
19
      ),
20
    );
21
  }
22
}

2. 减少重绘 & 避免昂贵效果（渲染层）#

1
class FadingImage extends StatefulWidget {
2
  const FadingImage({super.key});
3
  @override
4
  State<FadingImage> createState() => _FadingImageState();
5
}
6

7
class _FadingImageState extends State<FadingImage> with SingleTickerProviderStateMixin {
8
  late final AnimationController _c = AnimationController(
9
    vsync: this,
10
    duration: const Duration(milliseconds: 350),
11
  )..forward();
12

13
  @override
14
  void dispose() { _c.dispose(); super.dispose(); }
15

16
  @override
17
  Widget build(BuildContext context) {
18
    return FadeTransition(
19
      opacity: CurvedAnimation(parent: _c, curve: Curves.easeOut),
20
      child: const RepaintBoundary(child: FlutterLogo(size: 80)),
21
    );
22
  }
23
}

3. 资源与图片：把活干在对的地方#

• 网络/大图：解码前降采样——给 Image.* 传 cacheWidth/cacheHeight（按 DPR 计算），可显著降内存/CPU。
• 滤镜采样：动画缩放/旋转中，必要时调 filterQuality（none/low/medium/high；默认 medium），在质量与开销之间取舍。
• 预取：提前 precacheImage（例如页面切换/首帧前，为 Hero/大图做预热）。

4. 列表/滚动中的动画（大场景的关键）#

• 用 ListView.builder/SliverList 的懒加载；必要时调整 cacheExtent 以平衡预渲染与内存。
• 滚动很快时延后昂贵任务（图片解码/渲染）：Scrollable.recommendDeferredLoadingForContext(context)；或使用 ScrollAwareImageProvider。
• Tab/Page 场景保活：确需保留状态时用 AutomaticKeepAliveClientMixin，避免来回重建导致动画与数据抖动。

示例：列表中按需推迟加载图片

1
class PhotoTile extends StatelessWidget {
2
  final String url;
3
  const PhotoTile(this.url, {super.key});
4

5
  @override
6
  Widget build(BuildContext context) {
7
    final defer = Scrollable.recommendDeferredLoadingForContext(context);
8
    return SizedBox(
9
      height: 160,
10
      child: defer
11
          ? const Center(child: CircularProgressIndicator(strokeWidth: 2))
12
          : Image.network(
13
              url,
14
              fit: BoxFit.cover,
15
              // 解码目标尺寸（示意，结合 DPR 计算）
16
              cacheWidth: (MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio).toInt(),
17
            ),
18
    );
19
  }
20
}

5. 暂停看不见的动画#

• 离屏/隐藏时停表：用 TickerMode(enabled: false) 或把不在当前 Tab 的动画子树禁用掉（要求控制器基于 TickerProvider 创建）。

1
TickerMode(
2
  enabled: isCurrentPage, // 非当前页直接停表，省 CPU/GPU
3
  child: yourAnimatedSubtree,
4
)

6. 非 UI 线程#

• Impeller：Flutter 3.27 起，iOS 与 Android(API 29+) 默认启用；它在构建期预编译更少的着色器，显著降低首帧/早期的 shader jank。只有在你主动关闭 Impeller 或使用自定义 FragmentProgram 时，才考虑 SkSL 预热这类补救。
• Isolate/compute：JSON 解析、图片处理、密集计算不要卡在主 isolate；用 compute()/Isolate 后台做，避免动画掉帧。

1
// 将重 CPU 的解析放到后台 isolate
2
final parsed = await compute(parseJson, rawJson);

7. Checklist#

• DevTools 定位：看 UI/Raster 哪条柱子超时；只在 profile/release 下评估。
• 限制 rebuild：拆组件、用 const、AnimatedBuilder.child。
• 限制 repaint：必要时 RepaintBoundary；少 Opacity/BackdropFilter/saveLayer。
• 列表：builder 懒加载、recommendDeferredLoadingForContext、按需 cacheExtent。
• 图片：cacheWidth/Height 降采样、按需 filterQuality、precacheImage 预热。
• 隐藏就停：TickerMode(false)。
• 引擎/线程：重活放 compute/Isolate。