Web 渲染器

你可以选择两种不同的渲染器来运行和构建 Web 应用。下文介绍两种渲染器以及它们的适用场景:

你可以选择两种不同的渲染器来运行和构建 Web 应用。下文介绍两种渲染器以及它们的适用场景。

使用 HTML 渲染
使用 HTML，CSS，Canvas 和 SVG 元素来渲染，应用的大小相对较小。

使用 CanvasKit 渲染
应用在移动和桌面端保持一致，有更好的性能，以及降低不同浏览器渲染效果不一致的风险。但是应用的大小会增加大约 2MB。

命令行参数

--web-renderer 可选参数值为 auto、html 或 canvaskit。

• auto（默认）- 自动选择渲染器。移动端浏览器选择 HTML，桌面端浏览器选择 CanvasKit。

• html - 强制使用 HTML 渲染器。

• canvaskit - 强制使用 CanvasKit 渲染器。

此选项适用于 run 和 build 命令。例如：

flutter run -d chrome --web-renderer html
flutter build web --web-renderer canvaskit

如果运行/构建目标是非浏览器设备（即移动设备或桌面设备），这个选项会被忽略。

配置运行时

要覆写 web 实时渲染器请执行以下操作：

• 使用 auto 选项构建应用。

• 准备一个 renderer 属性设定为 "canvaskit" 或 "html" 的配置对象。

• 将这个对象在 Flutter Web 应用初始化 的时候传给 engineInitializer.initializeEngine(configuration); 方法。

let useHtml = // ...
_flutter.loader.loadEntrypoint({
  onEntrypointLoaded: async function(engineInitializer) {
    // Run-time engine configuration
    let config = {
      renderer: useHtml ? "html" : "canvaskit",
    }
    let appRunner = await engineInitializer.initializeEngine(config);

    await appRunner.runApp();
  }
});

Flutter engine 启动之后无法再在 main.dart.js 更换 web 渲染器。

选择合适的渲染器

如果您在移动端浏览器平台上更关心应用大小，而桌面端浏览器更关心性能，请选择 auto 选项（默认）。

如果您在移动端和桌面端都更关心应用大小，请选择 html 选项。

canvaskit：移动端和桌面端都更关心性能，和跨浏览器的像素级一致性。

示例

在 Chrome 浏览器上使用默认 (auto) 渲染器运行：

flutter run -d chrome

使用默认 (auto) 渲染器构建应用（发布模式）：

flutter build web --release

使用 CanvasKit 渲染器构建应用（发布模式）：

flutter build web --web-renderer canvaskit --release

使用 HTML 渲染器构建应用（发布模式）：

flutter run -d chrome --web-renderer html --profile