网页浏览速度太慢 [英] Web view is too slow

问题描述

Web视图需要花费4秒钟以上的时间来加载网页.在本机应用程序中，同一页面的时间少于2秒.有没有一种方法可以加快加载时间.我尝试了官方 webview_flutter 和

Web view takes more than 4 sec to load the webpage. The same page takes less than 2 sec in Native app. Is there a way to speedup the load time. I tried both Official webview_flutter and flutter_webview_plugin.

推荐答案

如果您的应用依赖于WebView，则只需选择其他工具即可:Swift for iOS& Android版Kotlin.

If you app relies on WebView, just choose other tools: Swift for iOS & Kotlin for Android.

这是原因:

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

1. WebView actually does not load pages slow. Instead, creating the WebView widget is slow;

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

In order to solve 1, you might want use a cached WebView. Unfortunately, that is not easy. Layout changes (e.g. animation) might trigger a WebView "recreating" (the cached WebView becomes invalid/staled). And the "recreating" is very slow;

Flutter的窗口小部件取决于窗口小部件外部的状态"，并且窗口小部件的创建被认为是快速/简单的.不幸的是，WebView(不是本机窗口小部件)不是这种情况. WebView具有其复杂的内部状态"，简单的重新创建会丢弃所有内容，然后您将返回到WebView的初始状态(初始URL).而且非常慢(创建时间+加载时间:网络开销)；

Flutter's widgets depend on "state" outside of the widgets, and widgets' creating are supposed to be fast/simple. Unfortunately, WebView (which is not a native widget) is not the case. WebView has its complex internal "state", a recreation simple discard everything and you returns to the WebView's initial state (initial URL). And it is very slow (Creating time + LoadTime: Network overhead);

很难在WebView外部创建外部状态"，因此，在WebView重新创建之后，它无法从外部状态恢复；

It is very hard to create a "external state" outside a WebView, therefore after a WebView's recreating it cannot resume from the external state;

由于WebView的重新创建非常缓慢，因此它完全杀死了动画并给用户带来了非常糟糕的体验.一种解决方案可能是将WebView作为您的主页，而从不尝试为新的WebView设置动画(就像YouTube中的Wiki App Demo一样).

Since WebView's recreating is very slow, it totally kills animation and gives user a very bad experience. A solution might be put a WebView as your main page and never try to animate to a new WebView (just like a Wiki App Demo in YouTube).

结论:

因此，现在，处于混乱状态的WebView尚未准备好，请不要考虑认真使用它.

So, now, WebView in flutter is not ready and please don't consider use it seriously.

讨论:

Flutter的小部件设计非常不寻常"，因为它们基本上是不可变的.使用小部件外部的状态(外部状态).当状态更改时，Flutter会选择基于新状态创建新的窗口小部件，而不是修改窗口小部件.因此，小部件被设计为轻量化的，因此可以非常快速地创建/销毁它们.不幸的是，WebView不能属于这一类. WebView与整个Flutter框架一样复杂，因此它不是本地窗口小部件，而是插件. WebView具有其自身的内部状态，该状态与框架不兼容，从而导致框架不断破坏/重新创建.

Flutter's widgets design is quite "unusual" since they are basically immutable. States outside widgets (external state) are used. When state changes, instead of modify the widget, Flutter choose to create a new widget based on the new state. Therefore, widgets are deigned to be light weighted so they can be created/destroyed very quickly. Unfortunately, WebView cannot fall into this category. WebView is as complex as the whole Flutter framework, so it cannot be a native widget but a plug-in. And WebView has its own internal state which is not compatible with the framework, which results in keep on being destroyed/recreated by the framework.

我不确定为什么Flutter的窗口小部件是以这种方式设计的，也许它更容易/更快地创建了框架?我看到了一些使用Redux/BLOC/Steam的复杂示例(约100行)，只是为了更改"窗口小部件，而在其他框架中可能只需要一行代码即可.

I am not sure why Flutter's widgets are designed in this way, maybe it is easier/faster for creating the framework? I saw some complex examples (~100 lines) using Redux/BLOC/Steam just in order to "change" a widget, which might just need a one-line of code in other frameworks.

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

Performance is also an issue. Rebuild a complex widgets tree is slow. Then you need writing a lot of code (Redux/BLOC/Stream/ScoppedModel...) in order to implement a partial widgets tree build.

即使对于一个非常简单的应用程序，Flutter的性能仍然不如原生(

Even for a very simple app, performance of Flutter is still not as good as native (https://thoughtbot.com/blog/examining-performance-differences-between-native-flutter-and-react-native-mobile-development). In fact, I'd like considering Flutter as "native" since it is compiled into machine code instead of Java's ByteCode.

最后:

我是Flutter的新学习者，并且开始在Flutter玩了几周.小部件框架和WebView插件让我很头疼.很多时间都花在UI界面上，而不是我的应用程序的核心逻辑上.

I am a new Flutter learner and start playing with Flutter for a couple of weeks. The widgets framework and the WebView plug-in just made me headache. A lot of time spent on the UI interface instead of the core logic of my app.

我并不是说Flutter不好.实际上，我认为这是适用于iOS/Android的最佳跨平台框架.在设计框架时可能没有考虑到某些因素(例如像WebView这样的复杂外部小部件).希望Flutter团队能够为此找到解决方案，也许是处理复杂外部插件的特殊情况?

I am not saying Flutter is not good. Actually, I think it is the best cross-platform framework for iOS/Android. It just might be something (e.g. complex external widget like WebView) was not being taken into consideration while the framework was being designed. Hope the Flutter team can find a solution for this, maybe a special case for handling a complex external plug-in?

我将继续与Flutter一起学习/玩乐.

I will keep on learning/playing with Flutter.

这篇关于网页浏览速度太慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！