草庐IT

flutter - WebView 太慢

coder 2023-07-21 原文

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

最佳答案

如果您的应用程序依赖于 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。

关于flutter - WebView 太慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55587918/

flutterWebView部件

有关flutter - WebView 太慢的更多相关文章

  1. Flutter 环境变量配置和flutter doctor中的错误解决 - 2

    一、环境变量右键点击我的电脑-属性：然后找到环境变量 1.Android的SDK不在C盘的话需要额外配这个到用户环境变量：ANDROID_HOMED:\AndroidSDK2.然后在系统变量：Path中添加一条这样的值        D:\Flutter\flutter\bin             这个值写flutter包解压的实际地址即可 3.在系统变量中添加两个镜像变量：        变量名：FLUTTER_STORAGE_BASE_URL      变量值：https://storage.flutter-io.cn        变量名：PUB_HOSTED_URL      变量

  2. 微信小程序 webview页面分享弹窗 - 2

    微信小程序webview中使用cover-view展示分享弹窗公司业务需要在webview中添加分享弹窗，可以发送给朋友及生成海报分享，因为好几个详情都需要这个功能，因此抽离了share-sheet的组件，ui效果如下图：点击分享，显示以下弹窗share-sheet.wxml如下：{!show}}"catchtouchmove="poptouchmove">发送给朋友生成海报取消share-sheet.js如下：Component({options:{addGlobalClass:true,},/***组件的属性列表*/properties:{//控制弹窗显示与否show:{type:Bool

  3. ruby-on-rails - ruby - bundle 安装/更新太慢 - 2

    我刚刚在virtualbox中运行的虚拟ubuntu12.0432位上安装了RVM、Ruby、Rails等。现在我遇到的问题是，对于我的第一个Rails项目，bundleinstall或bundleupdate需要很长时间。即使我使用Rails创建一个新项目(包括bundleinstall)。我只使用标准的gem:source'https://rubygems.org'gem'rails','3.2.12'#BundleedgeRailsinstead:#gem'rails',:git=>'git://github.com/rails/rails.git'group:developme

  4. javascript - 从 atom Electron 中的 webview 访问 DOM - 2

    是否可以从原子Electron桌面开发工具包中的webview元素中抓取html，我正在尝试访问DOM但我什么也没得到，我在运行时尝试了控制台中的document.links但我得到了空属性和对象作为返回？window.onresize=doLayout;varisLoading=false;onload=function(){varwebview=document.querySelector('webview');doLayout();vart=webview.executeJavaScript("console.log(document.links);");document.que

  5. java - 从 JavaFX 程序为 WebView 执行 Javascript 函数 - 2

    我正在尝试从Java程序执行Javascript函数。Javascript函数获取HTML文件的内容并突出显示特定单词的出现。是否可以从webview对象调用Javascript函数？ 最佳答案 要在WebView中运行javascript，您可以使用WebEngine.executeScript()方法。并且有很多方法可以通过javascript突出显示文本。例如。HighlightwordinHTMLtext(butnotmarkup)一起:WebViewwebView=newWebView();finalWebEngineen

  6. javascript - 在 WebView 源代码中执行 JavaScript - 2

    有人知道如何(如果可能的话)在ReactNative的WebView“内部”执行JS吗？场景:我的WebView中显示了这个远程登录页面(网站)，该网站有一系列与用户事件相对应的事件。所有事件都触发一个回调，WebView必须监听(这不是问题)。在每个回调中都有一个对JavaScript函数的引用，它必须在WebView内部调用(这就是问题所在!)。因此，我需要从我的ReactNative应用程序调用这个JavaScript函数，该函数位于我的WebView中加载的网站页面(源)上。我有什么:我用onShouldStartLoadWithRequest监听回调并以此操作WebView的

  7. javascript - 具有 1000 万个项目的两个数组的差异 - _.difference 太慢了 - 2

    我有两个包含用户ID的数组，我想检查其中的不同项目。arr1=[123,456,789];arr2=[123,456,789,098];问题是:这些数组可以有10或2000万个项目。我正在尝试使用underscore.difference()但需要10分钟才能完成。有没有更快的方法来做到这一点？ 最佳答案 如何将数组转换为对象以降低排序的复杂性:vararr1=[123,456,789],arr2=[123,456,789,098];functiontoObject(arr){returnarr.reduce(function(o,

  8. javascript - 如何从 Electron 中的 webview.executeJavaScript 获取返回值 - 2

    大家好，在我的项目中，我有三个js文件，ma​​in.js、browser.js和inject.js，在browser.js我已经实现了所有与我的webview相关的点击操作和许多功能，从这里我有一个点击操作来从加载到webview的网页中获取用户名，为此我在中创建了一个函数>inject.js从页面获取内容和元素我在Inject.js文件中得到了值，但在Browser.js文件中我得到了未定义的值这里是我的示例代码:browser.jsvarproName=webview.executeJavaScript('__myInjection.profileName()');inject.

  9. javascript - 谷歌浏览器应用 : Webview behavior - 2

    在研究上的问题时在Chrome扩展上，在Chrome应用程序中引起了我的注意并引起了我的兴趣。所以我决定做一个我在上面临的问题的小例子看看是否解决它。根据我对观看Chrome开发视频的理解，webview在与您的应用程序不同的进程中运行；它没有与您的应用程序相同的权限。所以我假设如果运行中的内容以某种方式与“主线程”(应用程序)分开，我猜他们的内容将彼此分开执行而不阻塞应用程序或另一个，以防它们中的任何一个可能有可能长时间运行的js执行。因此我做了以下事情:背景.jschrome.app.runtime.onLaunched.addListener(function(){//Telly

  10. javascript - 如何在 Electron 中使用 <webview> 方法 - 2

    关于Electrondocumentation有一个可以与该对象一起使用的方法列表。当我尝试运行任何一种方法时，它们都不起作用。当我查看的属性时检查器中的元素，它说它的原型(prototype)是webview.(__proto__:webview)所有方法都存储在该原型(prototype)中。因此，当我使用这些方法时，我的元素基本上应该从其原型(prototype)继承这些方法(例如myWebview.openDevTools())。但是!当我使用Object.getProptotypeOf(myWebview)我得到HTMLElement,不是webview就像它在检查器中显示的

随机推荐