Web 渲染器

为 Flutter 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

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

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

--wasm 标志不适用于非 Web 平台。

要在使用 WebAssembly 模式的 Chrome 中运行

flutter run -d chrome --wasm

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

flutter build web --wasm

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

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

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

skwasm 渲染器是编译为 WebAssembly 的 Skia 的更紧凑版本，支持在单独的线程上进行渲染。

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

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

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

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

使用 --wasm 标志构建应用，以使 skwasm 和 canvaskit 渲染器均可用于该应用。
按照编写自定义 flutter_bootstrap.js 中所述设置自定义 Web 应用初始化。
准备一个配置对象，并将 renderer 属性设置为 "canvaskit" 或 "skwasm"。
将您准备好的配置对象作为新对象中的 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>

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

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

使用新的 JS Interop - 代码必须仅使用新的 JS interop 库 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 类型进行模拟。您的代码可能意外或故意依赖于 JavaScript 的数字行为。如果是这样，则需要更新此类代码以正确处理 Dart VM 的行为。

使用这些技巧来决定使用哪种模式

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

此页面内容有帮助吗？

除非另有说明，此网站上的文档反映了 Flutter 3.38.6。页面上次更新于 2025-10-30。查看源代码或报告问题。

Web 渲染器

构建模式

默认构建模式

WebAssembly 构建模式

渲染器

canvaskit

skwasm

运行时选择渲染器

选择要使用的构建模式