颤动随机减速

Question

最近我用颤振构建了一个（生产）应用程序。在最后一个阶段，我深入分析了我的应用程序的性能，因为我注意到偶尔会变慢（fps 会在几秒钟内下降到 30-ish，然后才会再次恢复以变得活泼）。在进行了一些挖掘和剥离功能以首先检查我的断言之后，我一直回到一个简单的应用程序，就像一个仅显示 100 个带有颜色的容器的列表（实际上没有其他内容），即使我的应用程序是这个 '简单'，我仍然得到这些减速。一个应用程序真的不能比这更简单（现在大多数应用程序都是列表），所以我想知道其他人是否也有这个问题。这有点烦人，因为当应用程序变慢时它看起来真的很糟糕，而且根据我的研究判断，这似乎是在颤振引擎本身内部，而不是我可以控制的。

这是应用程序，只需将其放在 main.dart 中并自己查看：

main() {
  runApp(
    MaterialApp(
      title: 'my app',
      home: ListView.separated(
        itemCount: 100,
        itemBuilder: (context, index) {
          return Container(
            color: [
              Colors.red,
              Colors.orange,
              Colors.yellow,
              Colors.orange
            ][index % 4],
            height: 200,
          );
        },
        separatorBuilder: (context, index) => const SizedBox(height: 30),
      ),
    ),
  );
}

请注意，这种情况只是偶尔发生，只需继续并在查看性能监视器时滚动一下即可查看帧时间。应该偶尔出现单个高条，并且时不时地（比如每两次滚动列表一次）会有几秒钟的长帧时间（由 Flutter 的分析器索引为“Jank（慢帧）” /vscode)。

我在跑步：

• 颤振：2.5.3
• 飞镖：2.14.4。
• 物理测试设备：iPhone 12 Pro
• 配置文件模式

我的启动设置（vscode）

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter",
      "request": "launch",
      "type": "dart",
      "flutterMode": "profile",
      "args": []
    }
  ]
}

TL;DR 我有一个“尽可能简单”的颤振项目，它只显示一个长列表（单元重用，因为它是 ListView.builder），尽管简单，但经常出现滞后峰值和帧丢失（长“光栅”时间） . Flutter 医生没有表现出什么特别的地方

实际问题 其他人也有这个问题吗？有谁知道在哪里可以找到这个卡顿的真正原因？

Answer 1

我刚刚在我自己的设备（小米米 A2、Android 10）上运行了您的代码，并且无法在 DevTools 中获得任何卡顿帧（即使滚动速度非常快）。

由于手机很便宜，我之前也遇到过一些卡顿的动画，但在这种情况下没有什么可说的。

上网查了一下，确实遇到了几个类似的问题，其中一个也讨论了可能是因为listview事先不知道元素的大小造成的：https://github.com/flutter/flutter/issues/52207

提高性能的一种方法似乎是使用具有固定范围的 SliverList（标准 ListView 也在后台使用）：https://api.flutter.dev/flutter/widgets/SliverFixedExtentList-class.html

当然，这仅在您的所有子列表都具有相同的固定大小时才有效（您的示例就是这种情况，但可能不适用于您的实际应用程序）。

调整您的代码，您将使用如下内容：

main() {
  runApp(
    MaterialApp(
      title: 'my app',
      home: CustomScrollView(
        slivers: [
          SliverFixedExtentList(
              delegate: SliverChildBuilderDelegate((context, index) {
                return Column(
                  children: [
                    Container(
                      color: [
                        Colors.red,
                        Colors.orange,
                        Colors.yellow,
                        Colors.orange
                      ][index % 4],
                      height: 200,
                    ),
                    SizedBox(
                      height: 30,
                    ),
                  ],
                );
              }, childCount: 100),
              itemExtent: 230),
        ],
      ),
    ),
  );
}

如果这可以改善您设备上的情况，您可以尝试