网页浏览速度太慢

Question

Web 视图需要 4 秒以上才能加载网页。同一页面在 Native 应用程序中花费的时间不到 2 秒。有没有办法加快加载时间。我尝试了 Official webview_flutter和flutter_webview_plugin。

Answer 1

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

原因如下：

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

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

3. Flutter 的小部件依赖于小部件之外的“状态”，并且小部件的创建应该是快速/简单的。不幸的是，WebView（不是本机小部件）并非如此。WebView 有其复杂的内部“状态”，简单地丢弃所有内容并返回到 WebView 的初始状态（初始 URL）。而且非常慢（创建时间+加载时间：网络开销）；

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

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

结论：

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

讨论：

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

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

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

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

最后：

我是一个新的 Flutter 学习者，开始玩 Flutter 几个星期。小部件框架和 WebView 插件让我很头疼。大量时间花在 UI 界面而不是我的应用程序的核心逻辑上。

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

我会继续学习/玩 Flutter。