启动时如何后台预加载Flutter页面以解决页面首次打开卡顿问题

首次打开页面出现的jank本质是Flutter首次构建对应Widget树、懒加载资源（图片、字体、动画关联元素）时的渲染线程阻塞，多次跳转后所有页面的Widget实例、资源都已缓存到内存，因此运行流畅。预加载所有页面到内存的方案完全可行，具体实现和优化方式如下：

方案1：IndexedStack 全量预加载（适合底部导航类多页应用） #

IndexedStack会一次性构建所有子组件并存入内存，仅展示当前选中索引对应的页面，切换时无需重新构建，实现成本最低：

// 提前实例化所有页面
final List<Widget> _pages = [
  HomePage(),
  CategoryPage(),
  CartPage(),
  MessagePage(),
  ProfilePage(),
];
int _currentIndex = 0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: IndexedStack(
      index: _currentIndex,
      children: _pages,
    ),
    bottomNavigationBar: BottomNavigationBar(
      // 你的导航栏实现，点击时修改_currentIndex即可
      currentIndex: _currentIndex,
      onTap: (index) => setState(() => _currentIndex = index),
      items: const [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
        // 其他导航项
      ],
    ),
  );
}

方案2：全局缓存池预加载（适合路由跳转类页面） #

如果页面是通过路由跳转触发展示，可在应用启动时提前实例化所有页面存入全局缓存，跳转时直接读取缓存实例即可：

// 全局页面缓存工具类
class PageCache {
  static final Map<Type, Widget> _pagePool = {};

  // 预加载页面存入缓存
  static void preload(List<Widget> pages) {
    for (var page in pages) {
      _pagePool[page.runtimeType] = page;
    }
  }

  // 读取缓存页面
  static T get<T extends Widget>() => _pagePool[T] as T;
}

// 应用根节点初始化时预加载所有页面
@override
void initState() {
  super.initState();
  PageCache.preload([
    GoodsDetailPage(),
    UserCenterPage(),
    SettingPage(),
    OrderListPage(),
    CouponPage(),
  ]);
}

// 路由跳转时直接使用缓存实例
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => PageCache.get<GoodsDetailPage>()),
);

Hero动画滞后除了页面预加载外，还可以单独预缓存动画关联的图片资源，避免首次渲染时加载资源阻塞动画：

// 应用启动阶段预缓存所有Hero用到的图片
@override
void didChangeDependencies() {
  super.didChangeDependencies();
  precacheImage(const AssetImage("assets/goods_hero.png"), context);
  // 其他需要预加载的图片资源
}

• 所有无状态、无变化的自定义Widget添加const构造，减少不必要的rebuild开销
• 页面首次构建时避免同步执行重计算逻辑，耗时操作放到Future.microtask中延迟执行，不阻塞渲染线程
• 开启Flutter性能模式验证优化效果，确认jank来源是首次构建阻塞还是业务逻辑阻塞

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