标签: jank

从 Flutter 1.12 开始（当 Flutter 从 OpenGL 切换到 Metal 渲染时），应用程序的第一次运行似乎会卡顿（更频繁地跳帧）。

Flutter 团队正在努力解决这个问题，但同时我能做什么？

我一直在与“官方”flutter video_player包与 PageView 小部件结合使用时遇到严重的卡顿问题。

我的目标

平滑快速地滚动浏览PageView 小部件的多个页面，每个页面都包含一个视频小部件。

实际结果

当我尝试快速滚动这些页面时，我遇到了严重的卡顿/性能问题。当我缓慢地滑动页面并等待滚动动画完成时，一切都很顺利。请参阅我在小米红米 Note 8 Pro 的个人资料模式下录制的视频作为证据。

GIF：应用程序卡顿的视频证明

绩效分析

我尝试通过咨询颤振性能工具来寻求帮助。该工具显示光栅时间出现大量峰值。在一个示例中，光栅时间为 51.7 毫秒，其中 43.0 毫秒用于着色器编译。不过，我的经验不足，无法理解这意味着什么或这些信息如何帮助我。截图如下：

屏幕截图：显示慢帧的 flutter 性能工具屏幕截图

到目前为止我尝试过的

1. 删除该行controller.dispose();可以解决问题，但这会导致内存泄漏和小部件最终崩溃。
2. 我尝试将其包装controller.dispose();成 a WidgetsBinding.instance!.addPostFrameCallback((_) async {}，但这没有帮助

我的代码

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class ExamplePageView extends StatelessWidget {
  ExamplePageView({Key? key}) : super(key: key);

  final PageController pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: PageView(
          controller: pageController,
          onPageChanged: (value) {}, …

Flutter 项目根文件夹中的 flutter_jank_metrics_.json 是什么？他们为什么以及如何产生？

可能与Flutter UI janky有关，但我在Flutter的官方文档上没有看到它。

我试图理解为什么 Chrome Dev Tools 报告了几个长帧。

火焰图中的第一行（调用堆栈的顶部）主要是Timer Fired事件，由jQuery.Deferred()s 执行一堆$(function(){ });就绪函数触发。

如果我挖掘到jQuery的根源并更换其使用setTimeout与requestAnimationFrame火焰图没有太大变化，我仍然得到许多RAFS单帧内发射（如由开发工具报告的）制作长的帧。我本来希望做下面的伪代码：

window.requestAnimationFrame(function() {
    // do stuff
});

window.requestAnimationFrame(function() {
    // do more stuff
});

在两个不同的动画帧上执行。不是这样吗？

所有正在执行的 JS 都是必要的，但是我应该怎么做才能将它作为“微任务”执行（如暗示的，但这里没有解释https://developers.google.com/web/fundamentals/performance/rendering/ optimize-javascript-execution ) 何时setTimeout并且rAF似乎没有实现这一点。

更新

这是其中一个长帧的放大镜头，其中似乎没有任何回流（强制或其他方式）。为什么这里的所有 rAF 回调都在一帧中执行？