flutter web 对 Canvas 的依赖程度有多大

问题描述 投票:0回答:1

我正在考虑将我的 flutter 应用程序用作网络应用程序。现在 flutter web 比以前更好了,对吗?它可能是 ssr 并且有两个渲染器...... 现在我想知道 flutter web 对 canvas dom 的依赖程度有多大。 Html 渲染器竟然这么依赖canvas?

HTML 渲染器 该渲染器的下载大小比 CanvasKit 渲染器更小,它使用 HTML 元素、CSS、Canvas 元素和 SVG 元素的组合。 CanvasKit 渲染器 该渲染器与 Flutter 移动端和桌面端完全一致,具有更快的性能和更高的 widget 密度,但下载大小增加了约 1.5MB。 CanvasKit 使用 WebGL 渲染 Skia 绘制命令。 文档渲染器

flutter seo
1个回答
0
投票

随着时间的推移,Flutter Web 确实取得了重大改进,现在比以前更加稳定和强大。当谈到 Flutter web 中的渲染时,有两个主要选项:HTML 渲染器和 CanvasKit 渲染器。让我们简单讨论一下:

HTML 渲染器:

HTML 渲染器使用 HTML 元素、CSS、Canvas 元素和 SVG 元素的组合在浏览器中渲染 Flutter 小部件。 与 CanvasKit 渲染器相比,它的下载大小通常较小。 该渲染器适用于大多数 Web 应用程序,并在不同浏览器之间提供良好的性能和兼容性。 但是,它在非常复杂的 UI 或动画方面可能存在性能限制。 CanvasKit 渲染器:

CanvasKit渲染器与Flutter移动和桌面平台完全一致,跨平台提供更一致的体验。 它提供更快的性能,尤其是在更高的小部件密度下,并且针对复杂的 UI 和动画进行了优化。 CanvasKit 渲染器使用 WebGL 渲染 Skia 绘制命令,这可以带来更好的性能,但会增加应用程序的下载大小约 1.5MB。 该渲染器适用于需要高性能图形和动画的应用程序,例如游戏或复杂的可视化。 在对 DOM(文档对象模型)的依赖方面,两个渲染器都在一定程度上依赖于 DOM,但依赖程度有所不同:

HTML 渲染器利用 HTML 元素和 CSS 在网页的 DOM 结构中渲染 Flutter 小部件。 CanvasKit 渲染器还与 DOM 交互,但主要使用 WebGL 将 Skia 绘制命令直接渲染到画布元素上。 总的来说,Flutter Web 应用程序可以根据项目的具体要求使用任一渲染器来构建。在 HTML 渲染器和 CanvasKit 渲染器之间进行选择时,考虑性能、下载大小和兼容性等因素非常重要。此外,Flutter Web 的功能不断发展,因此值得关注该平台的未来更新和改进。

© www.soinside.com 2019 - 2024. All rights reserved.