跳至主要内容
内容

Web 渲染器

内容

Flutter Web 提供两种构建模式和两种渲染器。两种构建模式分别是默认和WebAssembly，两种渲染器分别是canvaskit和skwasm。

Flutter 在构建应用时选择构建模式，并在运行时确定哪些渲染器可用。

对于默认构建，Flutter 在运行时选择canvaskit渲染器。对于 WebAssembly 构建，Flutter 在运行时选择skwasm渲染器，如果浏览器不支持skwasm，则回退到canvaskit。

构建模式

#

默认构建模式

#

当使用flutter run或flutter build web命令且未传递--wasm，或传递--no-wasm时，Flutter 会选择默认模式。

此构建模式仅使用canvaskit渲染器。

在 Chrome 中使用默认构建模式运行应用

flutter run -d chrome

使用默认构建模式构建应用以供发布

flutter build web

WebAssembly 构建模式

#

通过向flutter run和flutter build web命令传递--wasm来启用此模式。

此模式使skwasm和canvaskit都可用。skwasm需要WasmGC，而并非所有现代浏览器都支持它。因此，在运行时，如果支持垃圾回收，Flutter 会选择skwasm；如果不支持，则回退到canvaskit。这使得使用 WebAssembly 模式编译的应用仍然可以在所有现代浏览器中运行。

非 Web 平台不支持--wasm标志。

在 Chrome 中使用 WebAssembly 模式运行应用

flutter run -d chrome --wasm

使用 WebAssembly 模式构建应用以供发布

flutter build web --wasm

渲染器

#

Flutter 有两个渲染器（canvaskit和skwasm），它们重新实现了 Flutter 引擎以在浏览器中运行。渲染器将 UI 原语（存储为Scene对象）转换为像素。

canvaskit

#

canvaskit渲染器与所有现代浏览器兼容，并且是默认构建模式中使用的渲染器。

它包含一个编译为 WebAssembly 的 Skia 副本，这会增加大约 1.5MB 的下载大小。

skwasm

#

skwasm渲染器是 Skia 的一个更紧凑的版本，它被编译为 WebAssembly 并支持在单独的线程上渲染。

此渲染器必须与WebAssembly构建模式一起使用，该模式会将 Dart 代码编译为 WebAssembly。

为了利用多线程，Web 服务器必须满足SharedArrayBuffer 安全要求。在此模式下，Flutter 使用一个专用的Web Worker将部分渲染工作负载卸载到单独的线程，从而利用多个 CPU 内核。如果浏览器不满足这些要求，则skwasm渲染器将在单线程配置中运行。

此渲染器包含一个更紧凑的编译为 WebAssembly 的 Skia 版本，增加了大约 1.1MB 的下载大小。

在运行时选择渲染器

#

默认情况下，在 WebAssembly 模式下构建时，Flutter 将决定何时使用skwasm以及何时回退到canvaskit。可以通过向加载程序传递配置对象来覆盖此行为，如下所示

  1. 使用--wasm标志构建应用，使skwasm和canvaskit渲染器都可供应用使用。
  2. 按照编写自定义flutter_bootstrap.js中所述设置自定义 Web 应用初始化。
  3. 准备一个配置对象，并将renderer属性设置为"canvaskit"或"skwasm"。
  4. 将准备好的配置对象作为新对象的config属性传递给由之前注入的代码提供的_flutter.loader.load方法。

示例

html
<body>
  <script>
    {{flutter_js}}
    {{flutter_build_config}}

    // TODO: Replace this with your own code to determine which renderer to use.
    const useCanvasKit = true;

    const config = {
      renderer: useCanvasKit ? "canvaskit" : "skwasm",
    };
    _flutter.loader.load({
      config: config,
    });
  </script>
</body>

在调用load方法后，无法更改 Web 渲染器。因此，必须在调用_flutter.loader.load之前做出有关使用哪个渲染器的任何决定。

选择要使用的构建模式

#

要将 Dart 编译为 WebAssembly，您的应用及其插件/包必须满足以下要求

  • 使用新的 JS 交互 - 代码必须仅使用新的 JS 交互库dart:js_interop。旧样式的dart:js、dart:js_util和package:js不再受支持。
  • 使用新的 Web API - 使用 Web API 的代码必须使用新的package:web而不是dart:html。
  • 数字兼容性 - WebAssembly 完全按照 Dart VM 的方式实现了 Dart 的数字类型int和double。在 JavaScript 中，这些类型使用 JS Number类型进行模拟。您的代码可能会意外地或有意地依赖于 JS 的数字行为。如果是这样，则需要更新此类代码以使其与 Dart VM 的行为保持一致。

使用以下提示来决定使用哪种模式

  • 包支持 - 如果您的应用依赖于尚不支持 WebAssembly 的插件和包，请选择默认模式。
  • 性能 - 如果您的应用代码和包与 WebAssembly 兼容且应用性能很重要，请选择 WebAssembly 模式。与canvaskit相比，skwasm的应用启动时间和帧性能明显更好。skwasm在多线程模式下特别有效，因此请考虑配置服务器以使其满足SharedArrayBuffer 安全要求。

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-11-21。 查看源代码 或 报告问题.