为啥在 Web 视图中渲染组件会变慢？ [关闭]

Posted 2023-03-12

【中文标题】为啥在 Web 视图中渲染组件会变慢？ [关闭]

【英文标题】：Why is rendering components inside web views slower? [closed]为什么在 Web 视图中渲染组件会变慢？ [关闭]

【发布时间】：2015-03-01 00:57:13

【问题描述】：

基于对问题过于宽泛的反馈，我正在缩小问题的范围，并将原始问题保留为删除线，以保留 Jim 在下面的答案的含义，这非常有用且内容丰富。

这是一个更具体的问题版本：

执行任务，例如渲染图像、文本或 UI 元素，或从 Web 视图容器（android 的 WebView 和 ios 的 UIWebView/WKWebView）发送 Web 服务请求（使用 AJAX）比做同样的事情效率低通过其他原生组件。这是为什么？是 Web 视图容器本身的初始加载缓慢还是有其他技术原因？我会假设最终，在较低级别，相同的本机代码正在执行这些功能。为什么使用 Web 视图会导致性能下降？

人们经常说，在 Web 视图中呈现的混合移动应用程序比原生应用程序慢。我很好奇这对于一个简单的电子商务类型的应用程序是否正确，其中产品数据通常是从服务器加载的，并且该应用程序具有简单的用户界面。

具体来说，我感兴趣的是为什么以下内容在 web 视图组件中会比原生组件更慢：

用户界面：如果用户界面使用 html5 组件和简单的 javascript 开发并在应用安装时保存在文件系统中，渲染它们会比渲染原生用户界面组件慢吗？如果答案是肯定的，我很好奇为什么。为什么按钮在 iOS 应用中加载速度较快，而在 iOS 应用中嵌入的 Web 视图中加载速度较慢？

图像：如果与 HTML 页面关联的图像存储在本地文件系统中，渲染它们会比与原生应用关联的图像慢吗？如果是这种情况，我会感到惊讶，并且真的很想知道原因。

从服务器加载的数据：如果使用 AJAX 加载从服务器加载的数据（json、XML 等），与原生应用程序使用的任何方法相比，加载速度会变慢吗？从服务器加载的图像呢？我认为网络速度将是这里的限制因素，但我可能是错的。

我是否缺少一个简单的电子商务应用程序的其他部分，其中原生应用程序比 Web 视图应用程序具有明显的性能优势？

另外，Facebook 和 LinkedIn 从 Web 视图类型应用程序切换到原生应用程序获得的最大优势是什么？在我看来，他们的应用程序具有简单的 UI（与游戏相比），并且大部分数据在访问时通过网络加载。我错过了什么吗？

最后，原生平台所有者（Apple 和 Google）在故意放慢 Web 视图类型应用程序以推动其平台向前发展方面是否具有优势？ （我很难相信谷歌会这样做，但你永远不知道苹果会这样做）。

编辑：我的问题可能太长太宽泛了。问题的要点是：与其他本地组件相比，在 Web 视图中显示图像或进行 Web 服务调用等简单的事情是否需要更长的时间？如果是这样，为什么？

【问题讨论】：

这是一个非常广泛的问题（博客文章大小的答案），并且鉴于有很多关于混合与原生论点的文章，例如 Facebook 应用程序团队的博客文章应该回答一些你的问题。您对“简单电子商务应用”的定义也不明确。

不要拘泥于电子商务应用程序的大小。问题的要点是：与其他本地组件相比，在 Web 视图中显示图像或进行 Web 服务调用等简单的事情是否需要更长的时间？如果有，为什么？

视情况而定。你不会得到明确的答案。如果你想要表现，那就去本地化，把你的工作外包出去。如果您想要可移植性和管理，请选择混合。请记住，iOS、Android 和 Windows 各有其完成工作的小方法，如果您想展示一个制作精良的应用程序的形象，混合模式可能不是您的最佳选择。

@Kenny 我的问题是技术性的，与外包工作等业务方面无关。我们完全有能力创建自然应用程序。

@stepanian 你无视我的问题，好像我没有提供任何技术见解。

【参考方案1】：

您的问题非常广泛，并且受制于意见和猜测。为了尽量减少意见和猜测，我将尝试解决它。并尝试指出沿途的投机/自以为是的方面。

要使用您的按钮示例，按钮的本机实现不需要加载 WebView 来呈现按钮。它也不需要第二个框架（WebView 框架）来将对象放置在屏幕上。基于 Web 的渲染速度较慢也就不足为奇了，因为 Web 容器必须完成确定渲染的工作，然后通过本机框架来实际执行显示。从本质上讲，与“一步过程”相比，这是一个“两步过程”。本机实现可以比任何组件更容易地利用硬件级别的优化。充其量，组件（如WebView）可以识别本机系统，以类似的方式检测优化并将其对渲染的影响降至最低。但这有很多问题要问，而且在大多数情况下可能不会发生。

这个问题的答案类似于第一个问题。渲染图像需要原生框架。除了本机框架之外，其他任何东西（如WebView 容器）都将进行自己的处理。充其量，这将是一个“通过”，但仍然有这样的负担。也就是说，即使用户察觉不到，它也会花费更长的时间。

在容器中实现的 AJAX（同样，像 WebView）受到容器的限制和优化。本机应用程序可以根据开发人员适应特定服务 - 包括使用无法通过容器获得或未针对特定应用程序优化的快捷方式或连接。所讨论的特定应用程序可能会或可能能够规避或通过更大的优化来实现，但它很可能是可以的。开发人员的便利性在这方面被忽略了（换句话说，您可能更难实现原生应用程序，但这绝对不会使其达到最佳状态）。

要回答您没有编号的一系列问题，简单的答案是“是的，本地人几乎总是会赢得容器”。您可以更好地控制缓存，可以随时使用非 HTML 请求/响应，可以自定义标记数据、自定义加密、自定义压缩等。

用户界面也获得了显着的优势，因为您不受容器的限制。例如，HTML 渲染有其局限性，根据定义，它至多与原生框架相同。在最坏的情况下，本机框架施加了容器必须考虑的额外限制。通常，限制远大于原生框架的限制。在容器中，屏幕元素对大小、行为和交互有更多限制，仅举几例。他们不可能拥有更大的能力——框架不会支持它。 Facebook等切换的具体原因可能与这些核心问题有关，但您可以自行阅读和解释。

最后，Google 或 Apple 的动机尚未公开。这里的任何答案都是猜测。也就是说，有一个或另一个可能与 Facebook 等公司结盟以试图获得优势。然而，Facebook 不太可能享受这样的一致性。两家公司更有可能在确保其品牌浏览器（Chrome 或 Safari）比通用原生组件具有优势方面具有优势。换句话说，本地组件似乎不太可能比这些公司的品牌产品具有更多的功能和支持，因此这些组件在任何给定时间都可能不是最佳的。虽然这是猜测，但我希望看到任何证据表明两家公司都热衷于支持这些组件，而不是他们的品牌产品。

也就是说，在我看来，与他们的“免费”品牌产品相比，应用开发者有可能为每家公司带来更多收入或增加更多价值。如果是这种情况，并且他们认可并重视它，那么扭转局面并通过这些组件引领开发，然后将其传递给他们的品牌产品，将符合他们的最大利益。我相信应用程序开发人员比他们的品牌浏览器带来更多价值，但似乎其他因素（如公司政治、产品投资等）并没有使公司成为现实。或者也许我只是有错误的数据或错误的看法。

编辑：

关于“原生”与“webview”的一个警告 - 在极少数情况下，原生实现在调整图像和原生组件的大小和缩放方面做得很差，理论上，容器可以在传递给原生框架，绕过原生框架实现中的次优或其他问题。虽然这是可能的，但 IMO 这将是罕见的，而不应该作为避免使用原生框架的理由。永远。

【讨论】：

感谢您的回复。很有帮助。如果应用程序是嵌入在 webview 中的单页 web 应用程序，我会假设加载容器的成本是一次性成本。如果有任何关于在 webview 内部和外部加载各种组件的基准来显示加载容器后的增量惩罚，那将会很有趣。

我不知道基准。以我的经验，加载容器会产生影响，但是容器有一套渲染规则和框架之前的计算。好处是“构建一次，随处运行”，成本在本机实现中。因此，以在许多本机实现上欠佳为代价的开发人员基本上更容易。这是一个标准的权衡。