我们用android studio直接运行flutter web项目,会启动chrome来执行,这时候如果我打开开发者工具(右键-》检查),就会发现非常卡
(前提是用Html Render来渲染,用CanvasKit好像就没问题)
在console上边的操作栏上可以看到一个数字在不停的增长,这是因为console默认不显示debug日志,所以这些日志回以计数的形式显示。我们在操作栏的level中将debug选中,就会看到debug日志了。
这时候就会看到大量的重复日志,如下:
dart.developer.postEvent Flutter.Frame {"number":365,"startTime":19493879,"elapsed":1459,"build":791,"raster":664,"vsyncOverhead":4}
dart.developer.postEvent Flutter.Frame {"number":365,"startTime":19493879,"elapsed":1459,"build":791,"raster":664,"vsyncOverhead":4}
dart.developer.postEvent Flutter.Frame {"number":365,"startTime":19493879,"elapsed":1459,"build":791,"raster":664,"vsyncOverhead":4}
这些日志量非常大,且增加很快,很快就会达到几万几十万,导致整个开发者工具甚至chrome都非常卡。
通过console可以看到这些日志产生于一个developer_patch.dart文件中,相对路径是
/dart-sdk/lib/_internal/js_dev_runtime/patch/developer_patch.dart
那么这个文件在哪里?最终我在flutter sdk的目录中找到
/flutter/bin/cache/dart-sdk/lib/_internal/js_dev_runtime/patch/developer_patch.dart
其中95行左右有这样的代码:
@patch void _postEvent(String eventKind, String eventData) { JS('', 'console.debug("dart.developer.postEvent", #, #)', eventKind, eventData); } 复制代码
可以看到这个函数只是打印日志,但是我将这两行代码注释掉后依然无效,日志还在不停的打印。
通过google查询,发现这个问题很多人都遇到过,在flutter的github上还建立了issuesgithub.com/flutter/flu…
看大家的评论,目前官方好像还没有解决,我用的是flutter最新版本2.0.5还存在这样的问题(而且之前用dev的1.x版本还没有这样的问题,感觉是flutter2.0之后出现的)。也没有一个设置可以关闭这个日志。
目前我没有看到在这个issues下面有靠谱的解决方法,但是当我们打包发布后,在运行的时候就不会有这个日志,而且通过日志信息可以猜到这个日志仅在debug情况下,所以我们可以以release的方式来运行。
在Android studio的运行栏选择Edit Configurations,然后在main.dart的右边栏中找到Additional arguments,这里就是配置启动参数的,我们添加--release
即可,再次运行就会以release的形式运行,运行后就会发现不再打印这些日志了。
注意:
添加--release
会造成三个问题:
1、在android studio上无法看到运行时的日志,不过日志可以在chrome的开发者工具中来看
2、无法debug调试了,所以如果需要debug就必须去掉--release
。
3、flutter的热部署功能失效了,所以同样如果想使用热部署也不能使用--release