🍉 加载中...


Flutter 性能优化小技巧（持续更新）

3 minute read

预缓存图像

使用 precacheImage 小部件对图像进行预缓存，可以有效降低图片的加载等待时长（因为已经提前加载并缓存了）。

1precacheImage ( AssetImage ( 'assets/image/medium.png' ), context);

设置图像 cacheHeight / cacheWidth

假设你从网络上加载了一张分辨率为 4K 的图片，但界面中留给图片展示的空间为 500*300，那么则应将 cacheHeight 设为 300，cacheWidth 设置为 500。

总体而言，将 cacheHeight / cacheWidth 设置为合理值，将有效减少图片的内存占用，对分辨率较高的图片来说效果尤其明显。

使用 Const 关键字

Const 允许在不降低整体性能的情况下使用多个小部件，其可以避免每次使用独一无二的小部件时都进行重建。

模棱两可的描述，此段内容有待修改。

避免组合 Opacity 组件和动画

当 Opacity 与动画一起使用时，小部件可能会导致性能问题，因为小部件的所有子小Opacity部件也将在每个新帧中重建。在这种情况下使用 AnimatedOpacity 会更好。如果您想淡入图像，应使用 FadeInImage 小部件。如果您想要不透明的颜色，请绘制不透明的颜色。

番外

Flutter 会频繁创建和销毁对象，但开发人员通常不应该为限制这种行为而引入额外的复杂性（例如试图在 initState 或类构造函数中定义小部件），这与底层的 Dart 运行时有关。

Dart 运行时使用两种类型的垃圾收集器：用于短期对象的 short-lived 垃圾收集器和用于长期对象的 mark-sweep 垃圾收集器。基本上，short-lived 比 mark-sweep 收集器快得多。如果应用程序不遵守 弱世代假设（weak generational hypothesis），即大多数对象在年轻时死亡，那么 mark-sweep 将发生得更加频繁，性能实际上可能会变得更差。

另外，不得不提到的是，在构造函数或者 initState 中定义小部件，会导致热重载失效。

参考资料