用于 Web 支持的两个方案

其实，最早在 2018 Flutter 1.0 的时候，Flutter 的产品经理 Tim Sneath 就推出了 Flutter Web。Flutter Web 想在单代码库的情况下，让 Flutter 应用拥有 Web 支持。开发者可以使用 Dart 编写应用并部署到任意的 Web 服务器上，或嵌入到浏览器中。甚至其他的 IOS、安卓、windows 设备，开发者都可以使用 Flutter 所具有的特性，也不需要特殊的浏览器插件支持。在 Flutter Web 的设计之初，主要考虑了两个方案用于 Web 支持:

1. HTML + CSS + Canvas

2. CSS Paint API (https://zhuanlan.zhihu.com/p/39931190)

优缺点：

方案 1：具有最好的兼容性，它优先考虑 HTML + CSS 表达，当 HTML + CSS 无法表达图片的时候，会使用 Canvas 来绘制。但 2D Canvas 在浏览器中是位图表示，会造成像素化下的性能问题。

方案 2： 是新的 Web API , 属于 CSS Houdini 的组成部分。CSS Houdini 提供了一组可以直接访问 CSS 对象模型的 API ，使得开发者可以去书写代码并被浏览器作为 CSS 加以解析，这样在无需等待浏览器原生的支持下，创造了新的 CSS 特性。它的绘制并非由核心 JavaScript 完成，而是类似 Web Worker 的机制。但目前 CSS Paint API 不支持文本，此外各家厂商对其支持也并不统一。

原文：https://www.zoo.team/article/flutter-web?continueFlag=33dc98ca32c7910a814601aa8d7fd71f