时间戳

首页 > 解决方案 > 网页浏览太慢

flutter - 网页浏览太慢

问题描述

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

标签： flutter

解决方案

如果您的应用依赖于 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 不会修改 Widget，而是选择基于新状态创建新的 Widget。因此，小部件被设计为轻量级的，因此可以非常快速地创建/销毁它们。不幸的是，WebView 不能属于这一类。WebView 和整个 Flutter 框架一样复杂，所以它不可能是原生的 widget，而是一个插件。并且 WebView 有自己的内部状态，与框架不兼容，导致框架不断被销毁/重新创建。

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

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

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

最后：

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

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

我将继续学习/玩 Flutter。

推荐阅读