Flutter Web 开发实践与优化

最新推荐文章于 2024-05-13 18:24:20 发布

xiangzhihong8

最新推荐文章于 2024-05-13 18:24:20 发布

阅读量759

点赞数

CC 4.0 BY-SA版权

分类专栏： Flutter入门与实战文章标签： flutter

本文链接：https://blog.csdn.net/xiangzhihong8/article/details/130079969

Flutter入门与实战专栏收录该内容

105 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文详细介绍了Flutter Web的架构，包括其在Web上的两种渲染方式：HTML和WebGL。探讨了浏览器基础知识如WebGL、Canvas API和CSS Houdini。接着讨论了Flutter的dart2js和dartdevc编译器，以及Html和CanvasKit渲染器的选择和优化。最后，文章提供了Flutter Web的性能优化策略，包括Canvaskit和Html渲染的优化技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，Flutter Web架构

目前，除了可以支持Android、iOS移动跨平台开发之外，Flutter还支持macOS、Windows、Linux和Web等多个跨平台的开发。可以说，作为一款先进的跨平台开发框架，Flutter已经真正意义上实现了“一次编写，处处运行”的美好愿景。

众所周知，Dart 语言存在之初就已经支持直接编译成JavaScript，并且针对开发和生产环境的工具链进行了优化。许多重要的应用已经使用 Dart 编译成的 JavaScript 在生产环境上运行，包括 Google Ads 的广告商工具。由于Flutter 框架是 Dart 编写的，所以将其编译成 JavaScript 相对而言更为简单。

然而，使用C++编写的Flutter引擎是为了与底层操作系统进行交互的，而不是 Web 浏览器。因此我们需要另辟蹊径。Flutter 在 Web 平台上以浏览器的标准 API 重新实现了引擎。目前我们有两种在 Web 上呈现内容的选项：HTML 和 WebGL。在 HTML 模式下，Flutter 使用 HTML、CSS、Canvas 和 SVG 进行渲染。而在 WebGL 模式下，Flutter 使用了一个编译为 WebAssembly 的 Skia 版本，名为 CanvasKit 。HTML 模式提供了最佳的代码大小，CanvasKit 则提供了浏览器图形堆栈渲染的最快途径，并为原生平台的内容 5 提供了更高的图形保真度。Flutter Web 版本的分层架构图如下所示。