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