Flutter 渲染性能分析 (Rendering Performance)

模块：模块九 · 性能优化
前置知识：Widget 三树、Layout 机制、CustomPainter

---

Flutter 渲染管线全貌

Flutter 的渲染是 逐帧驱动 的。Vsync 信号（通常 16.67ms/帧 = 60fps，或 8.3ms = 120fps）触发一次完整的渲染管线：

Vsync 信号
    │
    ▼
① Build Phase（重建 Widget 树 → 更新 Element 树）
    │
    ▼  
② Layout Phase（RenderObject.performLayout → 计算尺寸/位置）
    │
    ▼
③ Paint Phase（RenderObject.paint → 生成绘制指令）
    │
    ▼
④ Compositing Phase（Layer 树 → 合成位图）
    │
    ▼
⑤ GPU Rasterization（Skia/Impeller → 光栅化到帧缓冲）
    │
    ▼
  屏幕显示

Jank（卡顿） 的定义：某一帧的处理时间超过了 Vsync 周期（16ms for 60Hz），导致跳帧。

---

理解帧时间预算

60fps → 每帧预算：16.67ms
  ├── UI 线程（Dart）：~8ms
  └── GPU 线程（Rasterizer）：~8ms

120fps → 每帧预算：8.33ms
  ├── UI 线程：~4ms
  └── GPU 线程：~4ms

两个线程都可能成为瓶颈：

• UI 线程慢：过多 Widget 重建、复杂布局计算、Dart 代码执行慢
• GPU 线程慢：大量 saveLayer（透明度/裁剪）、复杂着色器、过多纹理

---

DevTools Performance Overlay

开启 Performance Overlay

// 方式一：在 MaterialApp 中开启
MaterialApp(
  showPerformanceOverlay: true,
  // ...
)

// 方式二：通过 Flutter Inspector 工具栏开启（推荐）
// 方式三：命令行
// flutter run --profile (必须 profile 模式才能看到真实性能)

解读 Performance Overlay

┌────────────────────────────────┐
│  GPU 线程耗时图 (上方绿色柱)    │ ← 绿色=安全 / 红色=超出预算
│  UI 线程耗时图 (下方绿色柱)    │
└────────────────────────────────┘

⚠️ 红色柱 = 该帧超出 16ms 预算 = 卡顿发生

关键指标：

• Build：Widget.build() 的总耗时
• Layout：RenderObject.performLayout() 耗时
• Paint：RenderObject.paint() / CustomPainter.paint() 耗时
• Composite：Layer 合成耗时

---

DevTools Timeline 深度分析

采集 Timeline 数据

# 必须在 Profile 模式运行
flutter run --profile

# 然后打开 DevTools → Performance tab
# 点击 Record 开始录制
# 操作 App 复现卡顿
# 点击 Stop 停止录制

读懂 Flame Chart

时间轴（从左到右）
│
├── Frame 1 (8ms - 绿色)
│   ├── [UI] dart:_Microtask  (0.1ms)
│   ├── [UI] Animation.tick   (0.2ms)  
│   ├── [UI] Build            (3.1ms)  ← 关注这里
│   │   ├── ProductListPage.build (1.8ms)
│   │   └── ProductCard.build x50 (1.3ms)
│   ├── [UI] Layout           (1.5ms)
│   └── [UI] Paint            (2.1ms)
│
└── Frame 2 (23ms - 红色 ⚠️ JANK)
    ├── [UI] Build            (18ms) ← 过长！
    │   └── ExpensiveWidget.build (17ms) ← 罪魁祸首
    └── ...

Timeline 关键事件

// 在代码中插入自定义 Timeline 事件，便于在 DevTools 中定位
import 'dart:developer';

void expensiveOperation() {
  Timeline.startSync('ExpensiveOperation', arguments: {'count': 1000});
  try {
    // 执行耗时操作
    _doWork();
  } finally {
    Timeline.finishSync();
  }
}

// 使用 timeSync 简化
void anotherOperation() {
  Timeline.timeSync('AnotherOperation', () {
    _doAnotherWork();
  });
}

---

常见性能陷阱与修复

1. 过度重建（Most Common）

问题：

// ❌ 错误：在 build 方法中创建对象
class BadWidget extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    // 每次 build 都创建新的 TextStyle 对象
    final style = TextStyle(fontSize: 16, color: Colors.blue);
    
    // 每次 build 都创建新的回调（导致子 Widget 无法判断相等性）
    final onPressed = () => print('pressed');
    
    return TextButton(
      onPressed: onPressed,
      style: ButtonStyle(textStyle: MaterialStatePropertyAll(style)),
      child: const Text('按钮'),
    );
  }
}

修复：

// ✅ 正确：将常量提升到类级别或使用 const
class GoodWidget extends StatefulWidget {
  static const _style = TextStyle(fontSize: 16, color: Colors.blue);
  
  @override
  Widget build(BuildContext context) {
    return TextButton(
      // 方法引用不会每次都创建新对象
      onPressed: _handlePressed,
      child: const Text('按钮'), // const 复用同一实例
    );
  }
  
  void _handlePressed() => debugPrint('pressed');
}

2. 不必要的 setState 范围

问题：

// ❌ 整个页面因为一个小动画在重建
class BadPage extends StatefulWidget {
  @override
  State<BadPage> createState() => _BadPageState();
}

class _BadPageState extends State<BadPage> {
  double _animValue = 0;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          // 这个动画导致整个 Column 重建
          AnimatedContainer(
            duration: const Duration(seconds: 1),
            height: _animValue * 100,
          ),
          // 这些 Widget 不需要随动画重建，但会被重建
          const ExpensiveListView(),
          const ExpensiveChart(),
        ],
      ),
    );
  }
}

修复：

// ✅ 将动画隔离到最小范围
class GoodPage extends StatelessWidget {
  const GoodPage({super.key});
  
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Column(
        children: [
          // 动画被封装，只重建自己
          _AnimatedHeader(),
          // 这些不受影响
          ExpensiveListView(),
          ExpensiveChart(),
        ],
      ),
    );
  }
}

class _AnimatedHeader extends StatefulWidget {
  const _AnimatedHeader();
  
  @override
  State<_AnimatedHeader> createState() => _AnimatedHeaderState();
}

3. 缺少 const Widget

问题：

// ❌ 父 Widget 重建时，这些都会重建
Column(
  children: [
    Text('标题', style: TextStyle(fontSize: 20)),  // 非 const
    Icon(Icons.star),                               // 非 const
    Padding(
      padding: EdgeInsets.all(8),                   // 非 const
      child: Text('内容'),
    ),
  ],
)

修复：

// ✅ 使用 const，Flutter 复用 Element，跳过重建
const Column(
  children: [
    Text('标题', style: TextStyle(fontSize: 20)),  // const
    Icon(Icons.star),                               // const
    Padding(
      padding: EdgeInsets.all(8),
      child: Text('内容'),
    ),
  ],
)

⚙️ 工具辅助： 在 analysis_options.yaml 中启用 lint：

linter:
  rules:
    - prefer_const_constructors
    - prefer_const_literals_to_create_immutables
    - prefer_const_declarations

4. ListView 缺少 itemExtent

问题：

// ❌ ListView 需要测量每个 item 的高度才能计算滚动位置
ListView.builder(
  itemCount: 10000,
  itemBuilder: (context, index) => ItemWidget(index),
)

修复：

// ✅ 固定高度 item 使用 itemExtent（O(1) 滚动定位）
ListView.builder(
  itemCount: 10000,
  itemExtent: 72.0, // 固定行高
  itemBuilder: (context, index) => ItemWidget(index),
)

// ✅ 或使用 prototypeItem（自动测量原型高度）
ListView.builder(
  itemCount: 10000,
  prototypeItem: const ItemWidget(0),
  itemBuilder: (context, index) => ItemWidget(index),
)

5. saveLayer 过度使用

saveLayer 是最昂贵的 GPU 操作之一，它触发离屏渲染（offscreen buffer）：

// 以下操作都会隐式触发 saveLayer：

// ❌ opacity < 1.0 的 Opacity Widget（除非 alwaysIncludeSemantics = false）
Opacity(opacity: 0.5, child: ExpensiveWidget())

// ✅ 替代方案：使用 Color.withOpacity（合并到颜色值，不触发 saveLayer）
Container(
  color: Colors.red.withOpacity(0.5), // 在着色阶段处理，更高效
  child: child,
)

// ✅ 或使用 FadeTransition（使用 Layer Opacity，GPU 加速）
FadeTransition(
  opacity: _animation, // 使用 Animation<double>
  child: child,
)

// ❌ ShaderMask 会触发 saveLayer
ShaderMask(
  shaderCallback: (rect) => gradient.createShader(rect),
  child: ExpensiveWidget(),
)

// ✅ 用 DecoratedBox + Gradient 替代（对于背景渐变）
DecoratedBox(
  decoration: BoxDecoration(gradient: gradient),
  child: child,
)

6. Image 性能问题

// ❌ 大图不裁剪直接显示
Image.network(
  'https://example.com/huge_4k_image.jpg',
  width: 100,
  height: 100,
  // 没有 cacheWidth/cacheHeight，GPU 纹理巨大
)

// ✅ 使用 cacheWidth/cacheHeight 在解码时下采样
Image.network(
  'https://example.com/huge_4k_image.jpg',
  width: 100,
  height: 100,
  // 解码时缩放到显示尺寸（节省内存和 GPU 带宽）
  cacheWidth: 200,  // 2x DPR
  cacheHeight: 200,
)

---

Widget Rebuild Tracker

在 DevTools 中启用 Widget Rebuild Stats（Flutter Inspector → 右上角菜单）：

// 或在代码中手动标记需要追踪的 Widget
class TrackedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 在 DevTools 的 Widget tree 中，数字显示重建次数
    // 红色 = 当前帧重建了 / 绿色 = 没有重建
    return const SomeWidget();
  }
}

---

RepaintBoundary：隔离重绘区域

// 使用 debugRepaintRainbowEnabled 可视化重绘区域
import 'package:flutter/rendering.dart';

void main() {
  debugRepaintRainbowEnabled = true; // 每次重绘区域颜色变化
  runApp(const MyApp());
}

// 为频繁重绘的 Widget 添加 RepaintBoundary
// 典型场景：动画、粒子系统、实时图表

RepaintBoundary(
  child: AnimatedWidget(), // 动画不影响父 Widget 的绘制层
)

// ListView.builder 已经自动为每个 item 添加 RepaintBoundary
// 但 CustomScrollView 的 Sliver 不会自动添加
SliverList(
  delegate: SliverChildBuilderDelegate(
    (context, index) => RepaintBoundary( // 手动添加
      child: ItemWidget(index),
    ),
  ),
)

---

实战优化案例：商品列表页卡顿

优化前（Timeline 显示每帧 Build 耗时 25ms）：

// ❌ 原始代码
class ProductListPage extends StatefulWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: products.length,
      itemBuilder: (context, index) {
        final product = products[index];
        return Container(
          padding: EdgeInsets.all(16),           // 非 const
          child: Row(
            children: [
              Image.network(
                product.imageUrl,                // 无缓存尺寸
                width: 80, height: 80,
              ),
              Column(
                children: [
                  Text(product.name,             // 非 const TextStyle
                      style: TextStyle(fontSize: 16)),
                  Text(
                    '¥${product.price.toStringAsFixed(2)}',
                    style: TextStyle(
                      color: Colors.red,         // 每次创建新对象
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
            ],
          ),
        );
      },
    );
  }
}

优化后（Timeline 显示每帧 Build 耗时 3ms）：

// ✅ 优化代码
class ProductListPage extends StatelessWidget {
  const ProductListPage({super.key, required this.products});
  final List<Product> products;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemExtent: 112.0, // 固定行高，O(1) 滚动
      itemCount: products.length,
      itemBuilder: (context, index) => RepaintBoundary(
        child: ProductCard(product: products[index]),
      ),
    );
  }
}

// 抽取为独立 Widget，可加 const 优化
class ProductCard extends StatelessWidget {
  const ProductCard({super.key, required this.product});
  final Product product;

  // 提升为静态常量
  static const _namStyle = TextStyle(fontSize: 16);
  static const _priceStyle = TextStyle(color: Colors.red, fontSize: 14);
  static const _padding = EdgeInsets.all(16);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: _padding,
      child: Row(
        children: [
          Image.network(
            product.imageUrl,
            width: 80,
            height: 80,
            cacheWidth: 160, // 2x DPR 下采样
            cacheHeight: 160,
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(product.name, style: _namStyle),
                Text(
                  '¥${product.price.toStringAsFixed(2)}',
                  style: _priceStyle,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

优化对比：

指标	优化前	优化后	提升
Build 耗时/帧	25ms	3ms	88% ↓
帧率	~40fps	~60fps	50% ↑
内存（图片）	1.2GB	180MB	85% ↓

---

性能反模式速查

反模式	影响	修复方案
build() 中创建对象	每帧GC压力	提升到 static const
setState 范围过大	过多 Widget 重建	拆分到最小 Widget
缺少 const Widget	失去编译期复用	启用 prefer_const lint
ListView 无 itemExtent	滚动定位 O(n)	设置 itemExtent
Opacity < 1 的 Widget	saveLayer 离屏渲染	用 FadeTransition
大图无 cacheWidth	内存/GPU 浪费	设置解码尺寸
IntrinsicHeight	O(2n) 布局	换用 Flex/Stack
跨帧持有 BuildContext	内存泄漏	检查 mounted

---

过关标准

✅ 能读懂 Timeline 中的 Build/Layout/Paint 耗时分布
✅ 能列举至少 5 种常见的 Flutter 性能反模式
✅ 理解 saveLayer 的触发条件及替代方案
✅ 能用 DevTools 定位一个列表页的卡顿原因并优化到 60fps
✅ 理解 RepaintBoundary 的工作原理及适用场景

---

上一篇：25. 平台自适应 | 下一篇：27. 内存优化