网页浏览太慢答案

【问题标题】：Web view is too slow网页浏览太慢
【发布时间】：2019-04-09 08:07:14
【问题描述】：

网页视图加载网页需要 4 秒以上。在本机应用程序中，同一页面只需不到 2 秒。有没有办法加快加载时间。官方webview_flutter和flutter_webview_plugin都试过了。

【问题讨论】：

标签： flutter

【解决方案1】：

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

原因如下：

WebView 实际上加载页面并不慢。相反，创建 WebView 小部件很慢；
为了解决 1，您可能需要使用缓存的 WebView。不幸的是，这并不容易。布局更改（例如动画）可能会触发 WebView “重新创建”（缓存的 WebView 变得无效/陈旧）。而且“重新创建”很慢；
Flutter 的小部件依赖于小部件外部的“状态”，并且小部件的创建应该是快速/简单的。不幸的是，WebView（不是本机小部件）并非如此。 WebView 有其复杂的内部“状态”，一个简单的娱乐丢弃一切，你返回到 WebView 的初始状态（初始 URL）。而且很慢（创建时间+加载时间：网络开销）；
在 WebView 之外创建“外部状态”非常困难，因此 WebView 重新创建后无法从外部状态恢复；
由于 WebView 的重新创建非常慢，它完全杀死了动画，给用户带来了非常糟糕的体验。一种解决方案可能是将 WebView 作为您的主页，并且永远不要尝试为新的 WebView 制作动画（就像 YouTube 中的 Wiki App Demo）。

结论：

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

讨论：

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

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

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

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

最后：

我是一名 Flutter 新手，并开始使用 Flutter 玩了几周。 widgets框架和WebView插件简直让我头疼。大量时间花在 UI 界面上，而不是我应用的核心逻辑上。

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

我会继续学习/玩 Flutter。

【讨论】：

2020 年的更新速度还是太慢了，遗憾的是。
其小部件的不变性实际上是 Flutter 的最佳设计决策之一。 Redux 总是以样板文件结束，这是一个折衷方案，但当您拥有一个包含多个开发人员和独立测试的复杂应用程序时，它会非常方便。您基本上可以完全测试应用程序的状态，而无需接触任何用户界面元素。
flutter 比它目前的竞争对手（如 react native 或 ionic 或其他）要快得多。所有跨平台都有性能问题，但在它们之间，flutter 是最快的。

【解决方案2】：

更新到webview_flutter 1.0.x 并采用Hybrid-Composition。它现在在 Android 上的性能要好得多。

【讨论】：

【解决方案3】：

现在 Hybrid-Composition 在 webview_flutter 3.0.0 中是默认的： https://pub.dev/packages/webview_flutter/changelog

刚刚在我这边试了一下，由于它并不完美，所以速度要快得多

干杯！

【讨论】：

webview_flutter 3.0.1 在 Android 上为我提供了 10 秒的下载时间，而在同一设备上的 Chrome 应用程序中为 1 秒。不可用。
UPD：原来我是在调试中测试；在发布时它给了我 4.5 秒。还是太长了:(
UPD2：作为比较，flutter_webview_plugin 给了我 2 秒的发布时间，这更好但仍然不完美。