目录
description bug_report

Web 渲染器

目录

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

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

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

使用 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); 方法。

<body>
  <script>
    let useHtml = true;

    window.addEventListener('load', function(ev) {
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      },
      onEntrypointLoaded: function(engineInitializer) {
        let config = {
          renderer: useHtml ? "html" : "canvaskit",
        };
        engineInitializer.initializeEngine(config).then(function(appRunner) {
          appRunner.runApp();
        });
      }
    });
  });
  </script>
</body>

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