为什么 Qt Webassembly 应用程序启动时间过长？答案

【问题标题】：Why does Qt Webassembly app start too long?为什么 Qt Webassembly 应用程序启动时间过长？
【发布时间】：2022-06-14 19:07:05
【问题描述】：

我正在使用 QT Webassembly (6.3) 检查示例 (QtQuickControls 2.0)，通过 LAN 将应用程序加载到网络浏览器中需要很长时间，尤其是在智能手机上与笔记本电脑相比。太慢了大约 40 秒。我在屏幕上看到的大部分时间都是“正在编译”。

在这种情况下，什么是“编译”？我以为 webassembly 代码已经编译好了，只需要运行即可。
QT Webassembly 应用程序总是这样慢吗？有什么办法让它加载得更快吗？至少第一次加载，然后从缓存中运行它，因为现在如果页面被刷新，它会花费同样多的时间来重新加载应用程序。

我已经检查了 Felgo 演示应用程序（我希望它们非常完善），但在我的智能手机上，加载重型示例大约需要 20-30 秒。 https://felgo.com/try-wasm/

【问题讨论】：

标签： qt webassembly felgo

【解决方案1】：

本例中的“编译”指的是 qtloader.js 内部调用的WebAssembly.compile()。这基本上将 WASM 二进制代码加载到网页中。

根据qtloader.js默认模板中的cmets，使用回退时会显示“正在编译”。通常它应该说“下载/编译”，这是更快的方法。

  return WebAssembly.compileStreaming(response).catch(function(error) {
      // compileStreaming may/will fail if the server does not set the correct
      // mime type (application/wasm) for the wasm file. Fall back to fetch,
      // then compile in this case.
      return fetchThenCompileWasm(response);
  });

因此请检查 mime 类型是否按照评论的建议正确设置。

提高性能的第二个选项是在您的网络服务器设置中启用 gzip 压缩。 WASM 文件压缩得很好，例如在我的测试中，一个 13 MB 的文件被压缩到了 5 MB。这将使原本相当大的下载速度更快一些。

但即使经过所有优化，Qt for WASM 仍必须下载并加载完整的 Qt GUI 框架，这需要时间。在我的 Android 手机上，较小的 WASM GUI 将在大约 3 到 4 秒内加载到本地网络上，但这在很大程度上取决于设备的功能。

【讨论】：