description bug_report

网络渲染器

内容

命令行选项
运行时配置
选择要使用的选项
示例

在为 Web 运行和构建应用时，你可以在两种不同的渲染器之间进行选择。此页面介绍了这两种渲染器以及如何为你的需求选择最佳渲染器。这两种渲染器是

HTML 渲染器: 此渲染器比 CanvasKit 渲染器的下载大小更小，它使用 HTML 元素、CSS、Canvas 元素和 SVG 元素的组合。
CanvasKit 渲染器: 此渲染器与 Flutter 移动设备和台式机完全一致，在小部件密度较高的情况下具有更快的性能，但下载大小增加了约 1.5MB。CanvasKit 使用 WebGL 渲染 Skia 绘制命令。

命令行选项

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

在 main.dart.js 中开始 Flutter 引擎启动过程后，无法更改 Web 渲染器。

选择要使用的选项

如果你要优化移动浏览器上的下载大小，并优化桌面浏览器上的性能，请选择 auto 选项（默认）。

如果你要优化桌面和移动浏览器上的下载大小，而不是性能，请选择 html 选项。

如果你要优先考虑桌面和移动浏览器上的性能和像素级一致性，请选择 canvaskit 选项。

示例

使用默认渲染器选项（auto）在 Chrome 中运行

flutter run -d chrome

使用默认（自动）选项在发布模式下构建你的应用

flutter build web --release

使用仅 CanvasKit 渲染器在发布模式下构建你的应用

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

使用 HTML 渲染器在分析模式下运行你的应用

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