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