flutter - WebView 太慢

Question

Web View 需要超过 4 秒才能加载网页。在 native 应用程序中，同一页面花费的时间不到 2 秒。有没有办法加快加载时间。我都试过了官方webview_flutter和 flutter_webview_plugin .

Answer 1

如果您的应用程序依赖于 WebView，只需选择其他工具:适用于 iOS 的 Swift 和适用于 Android 的 Kotlin。

原因如下:

1. WebView 实际上加载页面并不慢。相反，创建 WebView 小部件很慢；

2. 为了解决 1，您可能需要使用缓存的 WebView。不幸的是，这并不容易。布局更改(例如动画)可能会触发 WebView“重新创建”(缓存的 WebView 变得无效/过时)。而且“重新创建”非常慢；

3. Flutter 的小部件依赖于小部件之外的“状态”，小部件的创建应该是快速/简单的。不幸的是，WebView(不是 native 小部件)并非如此。 WebView 有其复杂的内部“状态”，一种简单的重新创建，丢弃所有内容并返回到 WebView 的初始状态(初始 URL)。而且很慢(创建时间+加载时间:网络开销)；

4. 在 WebView 外部创建“外部状态”非常困难，因此在重新创建 WebView 后，它无法从外部状态恢复；

5. 由于 WebView 的重新创建非常慢，它完全杀死了动画并给用户带来了非常糟糕的体验。一个解决方案可能是将 WebView 作为您的主页，并且永远不要尝试为新的 WebView 设置动画(就像 YouTube 中的 Wiki 应用程序演示一样)。

结论:

所以，现在flutter中的WebView还没有准备好，请不要认真考虑使用。

讨论:

Flutter 的小部件设计非常“不寻常”，因为它们基本上是不可变的。使用小部件外部的状态(外部状态)。当状态改变时，Flutter 并没有修改 widget，而是选择基于新的 state 创建一个新的 widget。因此，小部件被设计为轻量级的，因此可以非常快速地创建/销毁它们。不幸的是，WebView 不能属于这一类。 WebView 和整个 Flutter 框架一样复杂，所以它不可能是一个原生的 widget，而是一个插件。并且 WebView 有自己的内部状态，与框架不兼容，导致不断被框架破坏/重建。

我不确定为什么 Flutter 的 widgets 是这样设计的，也许创建框架更容易/更快？我看到一些使用 Redux/BLOC/Steam 的复杂示例(约 100 行)只是为了“更改”一个小部件，这在其他框架中可能只需要一行代码。

性能也是一个问题。重建复杂的小部件树很慢。然后您需要编写大量代码(Redux/BLOC/Stream/ScoppedModel ...)以实现部分 widgets 树构建。

即使对于一个非常简单的应用程序，Flutter 的性能仍然不如原生 (https://thoughtbot.com/blog/examining-performance-differences-between-native-flutter-and-react-native-mobile-development)。事实上，我更愿意将 Flutter 视为“原生”，因为它被编译成机器码而不是 Java 的字节码。

最后:

我是 Flutter 的新手，开始玩 Flutter 几周了。 widgets框架和WebView插件让我很头疼。很多时间都花在了 UI 界面上，而不是我的应用程序的核心逻辑上。

我并不是说 Flutter 不好。实际上，我认为它是最好的 iOS/Android 跨平台框架。在设计框架时可能没有考虑到某些东西(例如复杂的外部小部件，如 WebView)。希望 Flutter 团队能为此找到解决方案，也许是处理复杂外部插件的特殊情况？

我会继续学习/玩 Flutter。