Web 渲染器

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

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

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

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

命令行参数

--web-renderer 可选参数值为 autohtmlcanvaskit

  • auto(默认)- 自动选择渲染器。移动端浏览器选择 HTML,桌面端浏览器选择 CanvasKit。

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

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

此选项适用于 runbuild 命令。例如:

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

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

配置运行时

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

  • 使用 auto 选项构建应用。

  • web/index.html 文件的 main.dart.js 前插入 <script> 标签。

  • 配置 window.flutterWebRenderer"canvaskit" 或者 "html"

  <script type="text/javascript">
    let useHtml = // ...
    if(useHtml) {
      window.flutterWebRenderer = "html";
    } else {
      window.flutterWebRenderer = "canvaskit";
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>

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