Flutter使用webview_flutter加载网页出现Skipped 30 frames跳帧报错如何解决?
webview_flutter ^2.0.13 主线程跳帧问题解决方案
I/Choreographer(1378): Skipped 30 frames! The application may be doing too much work on its main thread.
- 优先调整Android端硬件加速配置:在项目
android/app/src/main/AndroidManifest.xml中,找到使用WebView的Activity节点,添加android:hardwareAccelerated="true"属性。2.0.13版本的webview_flutter在部分低版本Android系统中默认关闭硬件加速,会导致WebView的所有渲染工作都在主线程执行,触发跳帧。 - 优化WebView回调逻辑:不要在
onPageFinished、onPageStarted这类回调中执行耗时操作,包括密集计算、IO读写、批量数据处理,所有重负载逻辑都放到独立的子Isolate中执行,避免阻塞Flutter主UI线程。 - 优化加载的前端网页性能:网页本身的大量同步JS脚本、未懒加载的高清图、高频CSS动画都会占用原生WebView内核的主线程资源,可要求前端侧做针对性优化:开启JS异步加载、图片懒加载、降低非必要动画的刷新频率。
- 调高WebView的渲染优先级:通过webview_flutter提供的
androidOnWebViewCreated回调拿到原生WebView实例后,注入优先级配置:
webView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
该配置可以让系统优先分配资源给WebView的渲染线程,减少和其他任务的资源抢占。
- 如果必须使用2.0.13版本且上述方案都不生效,可以替换使用
flutter_inappwebview组件,该组件对WebView的线程调度做了更细致的优化,同场景下主线程资源占用比webview_flutter 2.x版本低30%左右。 - 排查App其他并行任务:如果WebView加载的同时App后台还在执行大量网络请求、数据库读写、定时器密集任务,也要将这些任务移到子线程/子Isolate执行,避免和WebView抢占主线程资源。
内容的提问来源于stack exchange,提问作者Supun Dewapriya
相关产品推荐
相关产品推荐

