Flutter性能面板显示UI持续渲染但未触发Build代码块断点问题排查

我之前碰到过类似的场景，结合你的代码和问题描述，这个现象的根源大概率是已被弹出的页面中存在未停止的动画/渲染任务，导致Flutter的渲染循环一直在运行，但你的首页并没有触发build（所以断点和print("Home")都没输出）。

问题分析 #

当你从LearnApp页面返回首页后，理论上LearnApp及其子组件应该被销毁，但你使用的flutter_html:2.0.0版本在加载GIF时，可能存在动画控制器未正确停止/资源未释放的问题：

• GIF本身是逐帧动画，flutter_html内部渲染GIF时可能启动了动画控制器，但在Widget从树中移除时，没有自动停止这个控制器；
• 这个持续运行的动画控制器会不断触发Flutter的渲染帧，所以Performance面板会显示持续渲染，但这和首页的build无关，因此你的首页断点不会触发。

解决方案 #

这里提供几个可行的解决思路，按优先级尝试：

1. 替换flutter_html为直接加载GIF（快速验证）

先排除是否是flutter_html的问题，把LearnApp的代码改成直接用Image.network加载GIF：

class LearnApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("widget title")),
      body: SafeArea(
        child: Image.network("https://tva1.sinaimg.cn/mw690/006v119zly1gsu8ni6jbbg30a007q1l2.gif"),
      ),
    );
  }
}

如果返回首页后Performance面板的持续渲染消失，那可以确定问题出在旧版本的flutter_html上。

2. 升级flutter_html到最新稳定版

你使用的2.0.0版本比较陈旧（当前最新稳定版已经到4.x），后续版本大概率修复了这类资源泄漏问题。修改pubspec.yaml中的依赖：

flutter_html: ^4.0.0

执行flutter pub get后重新测试，看看持续渲染的现象是否消失。

3. 手动清理flutter_html的资源（如果必须用旧版本）

如果因为某些原因无法升级，可将LearnApp改为StatefulWidget，尝试在dispose时手动清理资源。不过需要注意，flutter_html的Html组件默认没有暴露直接停止动画的方法，你可以尝试通过GlobalKey获取其内部状态，或者监听页面销毁事件：

class LearnApp extends StatefulWidget {
  @override
  _LearnAppState createState() => _LearnAppState();
}

class _LearnAppState extends State<LearnApp> {
  final GlobalKey _htmlKey = GlobalKey();

  @override
  void dispose() {
    // 尝试清理Html组件关联的帧回调任务
    WidgetBinding.instance.removePersistentFrameCallback(_stopRenderCallback);
    super.dispose();
  }

  void _stopRenderCallback(Duration timeStamp) {
    // 空回调用于占位，实际可根据Html内部逻辑调整清理逻辑
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("widget title")),
      body: SafeArea(
        child: Html(
          key: _htmlKey,
          data: "<p><img src=\"https://tva1.sinaimg.cn/mw690/006v119zly1gsu8ni6jbbg30a007q1l2.gif\" /></p>",
        ),
      ),
    );
  }
}

4. 使用DevTools进一步排查

打开Flutter DevTools的Memory面板，在返回首页后查看内存中的对象，是否有Html相关的对象未被回收，这可以帮你确认是否是内存泄漏导致的持续渲染。

内容的提问来源于stack exchange，提问作者Dolphin