企业官网建设流程全解析

Flutter 性能优化详解

一、性能优化概述

Flutter 应用性能优化涉及多个方面，包括渲染性能、内存管理、网络请求等。

1.1 性能指标

• FPS- 帧率，目标 60fps
• Jank- 卡顿，帧率下降导致的视觉卡顿
• 内存使用- 应用内存占用
• 启动时间- 应用启动耗时

二、渲染性能优化

2.1 使用 const 构造器

// 好 const Text('Hello'); const SizedBox(height: 16); // 不好 Text('Hello'); SizedBox(height: 16);

2.2 避免不必要的重建

class ExpensiveWidget extends StatelessWidget { const ExpensiveWidget({super.key}); @override Widget build(BuildContext context) { // 复杂计算 return Container(); } } // 使用 const 避免重建 const ExpensiveWidget()

2.3 使用 Keys

ListView.builder( itemBuilder: (context, index) { return MyListItem( key: ObjectKey(items[index]), data: items[index], ); }, )

2.4 使用 RepaintBoundary

RepaintBoundary( child: CustomPaint( painter: MyPainter(), ), )

三、内存管理

3.1 释放资源

class MyWidget extends StatefulWidget { @override State<MyWidget> createState() => _MyWidgetState(); } class _MyWidgetState extends State<MyWidget> { late AnimationController _controller; @override void initState() { super.initState(); _controller = AnimationController(vsync: this); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Container(); } }

3.2 使用 WeakReference

final weakRef = WeakReference<MyObject>(myObject); final MyObject? obj = weakRef.target;

四、列表性能优化

4.1 使用 ListView.builder

ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return ListTile(title: Text(items[index])); }, )

4.2 使用 Sliver 组件

CustomScrollView( slivers: [ SliverAppBar(title: const Text('Title')), SliverList( delegate: SliverChildBuilderDelegate( (context, index) => ListTile(title: Text('Item $index')), childCount: 1000, ), ), ], )

4.3 使用 AutomaticKeepAliveClientMixin

class MyTabView extends StatefulWidget { @override _MyTabViewState createState() => _MyTabViewState(); } class _MyTabViewState extends State<MyTabView> with AutomaticKeepAliveClientMixin { @override bool get wantKeepAlive => true; @override Widget build(BuildContext context) { super.build(context); return Container(); } }

五、图片优化

5.1 使用适当的图片格式

Image.network( 'https://example.com/image.webp', width: 100, height: 100, fit: BoxFit.cover, )

5.2 使用缓存

CachedNetworkImage( imageUrl: 'https://example.com/image.jpg', placeholder: (context, url) => const CircularProgressIndicator(), errorWidget: (context, url, error) => const Icon(Icons.error), )

5.3 压缩图片

Image.memory( compressedImageBytes, width: 100, height: 100, )

六、网络优化

6.1 使用缓存

dio.interceptors.add(DioCacheInterceptor( options: CacheOptions( store: MemCacheStore(), policy: CachePolicy.requestFirst, ), ));

6.2 批量请求

Future.wait([ fetchUserData(), fetchPosts(), fetchComments(), ]);

6.3 请求取消

final cancelToken = CancelToken(); dio.get('/api/data', cancelToken: cancelToken); // 取消请求 cancelToken.cancel('取消请求');

七、性能监控

7.1 使用 DevTools

flutter run --profile

7.2 使用 Timeline

Timeline.startSync('expensive_operation'); // 执行耗时操作 Timeline.finishSync();

7.3 使用 PerformanceOverlay

MaterialApp( showPerformanceOverlay: true, )

八、总结

性能优化策略：

1. 渲染优化- const、Keys、RepaintBoundary
2. 内存管理- 释放资源、WeakReference
3. 列表优化- ListView.builder、Sliver、KeepAlive
4. 图片优化- 格式选择、缓存、压缩
5. 网络优化- 缓存、批量请求、请求取消
6. 性能监控- DevTools、Timeline、PerformanceOverlay

持续监控和优化是保持应用高性能的关键。