Skip to content

Flutter优化时,这些组件对性能消耗较大

Flutter的有的组件,错误的使用会导致性能消耗较大,一定要注意避免使用,或者少用。以及千万不要这样用。

ImageFiltered

你常常会尝试使用高斯模糊来做一个毛玻璃效果,但是,注意少用在因为这将产生大量计算。乃至千万不要在ListView的组件中使用。

dart
import 'dart:ui';

ImageFiltered(
  imageFilter: ImageFilter.blur(sigmaY:5,sigmaX:5), //SigmaX and Y are just for X and Y directions
  child: Image.asset('assets/image.png') //here you can use any widget you'd like to blur .
)

如果列表滚动过程中,这将造成很明显的掉帧。特别是在使用impeller的设备中,经过测试卡顿尤为明显。

谨慎使用 saveLayer()

在Flutter中,saveLayer()是一个用于创建图层的方法。谨慎使用saveLayer()可以避免不必要的性能问题,并确保在真正需要的时候才使用它的优势。它可以将绘制操作限制在一个独立的图层中,以便可以对该图层进行独立的操作,然后将其合并到主图层中。这个方法在一些情况下可以提供一些性能上的优势,但需要谨慎使用,原因如下:

  1. 内存消耗:每个使用saveLayer()创建的图层都需要占用内存。如果大量使用saveLayer()而忽略了释放或者优化图层的操作,可能会导致内存使用过高。
  2. 绘制性能:使用saveLayer()会增加绘制操作的复杂性。尽管针对独立的图层进行绘制可能会提高性能,但创建和合并图层的操作会额外消耗一些绘制性能。
  3. 渲染缓冲:使用saveLayer()创建的图层需要进行额外的渲染和合并操作。在某些情况下,这可能导致额外的渲染开销,并对帧率和性能产生不利影响。

因此,当使用saveLayer()时,建议仅在必要时使用saveLayer(),而不是滥用它。优化图层的使用可以减少内存消耗和额外的绘制操作。
并注意

  • 确保及时回收不再需要的图层,避免内存泄漏。
  • 定期进行性能测试和基准测试,以便验证saveLayer()的使用是否对性能产生重大影响,并根据实际情况进行优化。

ClipRect、ClipRRect 或 ClipPath以及不透明度操作

不透明度操作(如透明度动画或设置不透明度)会导致额外的绘制操作和像素混合,尤其是在有多个重叠图层的情况下。这样的绘制操作消耗CPU和GPU资源,会影响应用的性能。因此,尽量减少使用不透明度操作,或者在必要时优化和合并它们,可以提高渲染性能。
裁剪:裁剪操作指的是限制绘制区域,只绘制需要的部分,以优化性能。裁剪操作通常是通过使用 ClipRect、ClipRRect 或 ClipPath 等小部件来实现的。但是,裁剪操作涉及剪裁路径和边界检查等额外的计算工作,这会增加CPU和GPU的负担。因此,在实际使用中,尽可能减少裁剪操作,并确保其仅被应用到必要的区域,可以提高渲染效率
使用不透明度和裁剪操作会增加绘制命令的复杂性,可能导致绘制顺序和顶点遮挡等问题。此外,这些操作还可能使绘制缓存(如图层缓存或位图缓存)无效,从而增加额外的绘制开销。
所以在绘制UI时,减少使用不透明度和裁剪操作可以提高性能和渲染效率。但如果不得不用时,谨记下面的使用建议:

  • 将多个不透明度操作合并为单个操作,以减少渲染调用次数。
  • 考虑使用预渲染技术(如图像缓存或位图缓存)来优化使用不透明度和裁剪操作的部分。
  • 仔细评估和优化绘制流程,以减少不必要的裁剪操作和不透明度操作。
  • 能不用 Opacity widget,就尽量不要用。有关将透明度直接应用于图像的示例,请查看 Transparent image,这比使用 Opacity widget 更快。
  • 要在图像中实现淡入淡出,请考虑使用 FadeInImage widget,该 widget 使用 GPU 的片段着色器应用渐变不透明度。了解更多详情,请查看 Opacity 文档。
  • Clipping 不会调用 saveLayer() (除非明确使用 Clip.antiAliasWithSaveLayer),因此这些操作没有 Opacity 那么耗时,但仍然很耗时,所以请谨慎使用。

最重要的是,优化绘制操作需要根据具体的场景和需求进行决策和调整。通过性能测试和基准测试,可以确保应用程序在使用不透明度和裁剪操作时仍然具有良好的性能表现。

Clipping

Clipping 不会调用 saveLayer() (除非明确使用 Clip.antiAliasWithSaveLayer),因此这些操作没有 Opacity 那么耗时,但仍然很耗时,所以请谨慎使用。

在调试时,关闭GIF渲染

GIF的播放,会使得Performance overlay不断刷新,干扰你的调试。

PlatformView

PlatformView作为原生组件嵌入在Flutter视图层次结构中,可能需要进行额外的绘制和布局计算。这可能会对应用程序的性能产生影响,尤其是当涉及大量PlatformView嵌入时。因此,建议在使用PlatformView时,仅在必要时嵌入原生视图,并在可能的情况下选择更轻量级的解决方案。
过深或过复杂的视图层次结构可能会影响布局性能和渲染性能。因此,建议优化和简化视图层次结构,并考虑合并和替代PlatformView使用的场景。
使用PlatformView时,需要权衡其提供的原生视图交互能力和性能开销。评估原生视图的复杂性、数据传递和通信需求,并根据应用的实际情况进行优化和调整,以确保良好的性能和流畅的用户体验。
PlatformView不适合用在可能发生变化的布局中,如在ListView中。这可能会因为布局和绘制的频繁变化,影响性能。

仅用于培训和测试,通过使用本站代码内容随之而来的风险与本站无关。版权所有,未经授权请勿转载,保留一切权利。
ICP备案号:滇ICP备15009214号-13   公安网备:滇公网安备 53312302000061号