Flutter Web在iPhone的Chrome及Safari浏览器滚动卡顿问题求助

架构老林

2026-6-15

Flutter Web Canvakit构建后iPhone滚动卡顿问题

问题现象

Windows、Android平台运行正常
MacBook浏览器滚动略有卡顿
iPhone（13、15 Plus）上几乎完全卡死
开发模式下iPhone运行正常，Canvakit构建部署后出现滚动卡顿

环境信息

Flutter 3.24.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 5874a72aa4（3个月前）• 2024-08-20 16:46:00 -0500
Engine • revision c9b9d5780d
Tools • Dart 3.5.1 • DevTools 2.37.2

卡顿效果展示

滚动卡顿效果展示

解决思路和方法

调整Canvakit构建参数
构建时带上这些参数，针对性优化iOS性能：

flutter build web --web-renderer canvaskit --release --dart-define=FLUTTER_WEB_CANVASKIT_FORCE_SOFTWARE_RENDERING=false --dart-define=SKIA_RELEASE=true

如果内存占用过高，可额外添加--dart-define=FLUTTER_WEB_USE_SKIA_CACHE=false禁用Skia缓存（以部分加载速度为代价换取滚动流畅度）

优化滚动组件实现

必须使用ListView.builder/GridView.builder等懒加载组件，禁止一次性渲染所有列表项
iOS平台给滚动组件添加physics: const BouncingScrollPhysics()，适配系统原生滚动逻辑，减少冲突
子组件优先使用StatelessWidget，避免不必要的状态更新；复杂组件用RepaintBoundary包裹，隔离重绘范围，防止滚动时整个列表重绘

修改Canvakit运行配置
在web/index.html中添加以下配置，让Skia更适配iOS浏览器环境：

<script>
  window.flutterWebRenderer = 'canvaskit';
  window.skiaOptions = {
    reduceMemoryUsage: true,
    useSkiaForText: false // 改用浏览器原生渲染文本，降低Canvas计算压力
  };
</script>