关于这个话题其实聊过很多次,在 2023 年初的时候,谷歌就提出了调整 Flutter Web 路线的方向,而今年年初的时候,Flutter 官方也正式官宣弃用 HTML renderer的计划,而近日,在 #145954 的 Final update 里提到,大概在今年 12 月该功能将正式合并到 beta 版本,届时 --web-renderer
选项将不再可用, Flutter Web 将只支持默认的 CanvasKit 和全新的 SkWasm。
关于这个点,这里需要再再再强调一下,弃用 HTML renderer 并不是说 Flutter 觉得传统 Web 路线有什么不好,只是 CanvasKit 和 Wasm 更贴合 Flutter 框架的技术路线,因为在 2023 年确定 Flutter Web 技术路线时官方就明确过:
"Flutter Web 的定位不是设计为通用 Web 的框架,Flutter Web 是一个围绕 CanvasKit 和 WebAssembly 等新兴 Web 技术进行架构设计的框架。"
由于 Flutter 一直以来都是以 Canvas 为基准通过 Engine 来实现跨平台,并且保证不同平台上的控件得到一致的渲染效果,而 Html renderer 的渲染方式明显违背了"初衷",在兼容适配的过程中产生了许多额多的开发成本和兼容问题。
本次合并调整之后,Flutter Web 只提供了两个渲染器支持,分别是 default 和 WebAssembly ,对应 CanvasKit 和 SkWasm。
对于默认构建,Flutter 在运行时选择
canvaskit
渲染器;对于 WebAssembly 构建,Flutter 在运行时选择skwasm
渲染器,如果浏览器不支持skwasm
,则回退到canvaskit
。
不管是 CanvasKit 还是 SkWasm ,都是基于 canvas 模式绘制,渲染器会将 UI 基元(存储为 Scene
对象)转换为像素,只是 SkWasm 需要 WasmGC 支持,所以目前并非所有浏览器都支持 WasmGC 。
不过 WebKit 也合并了 Wasm GC 默认开启的支持,也就是未来 Webkit 默认能够支持 Wasm GC 和 Wasm Native 的场景会越来越多:
从目前来看,CanvasKit 会附带一个额外的 1.5MB wasm 文件,SkWasm 附带一个 1.1MB 的额外 wasm 文件,并且后续将继续推进 size 的减小。
而从效果上看,与 CanvasKit 相比,SkWasm 的启动时间和帧性能明显更好,在多线程模式对比更明显,特别是服务器开启了 SharedArrayBuffer 的情况:
当使用
skwasm
时,Dart 代码被直接编译成 WebAssembly,此时如果托管服务器满足 SharedArrayBuffer ,Flutter 将使用专用的 Web Worker 将部分渲染工作负载卸载到单独的线程,从而利用多个 CPU 内核。
总的来说,SkWasm 主要改善了两件事:性能和启动时间:
- 启动时间:注意这里并不是说**下载时间 **,对比 JS ,Wasm 很难有压缩优势,这里的启动时间更多是浏览器解析、编译和启动代码所花费的时间,特别缓存启动受益最大
- 性能:SkWasm 模式下 Dart 可以运行得更快,共享内存多线程(通过线性内存访问、ffi 和一些 C++ 支持,让 SkWasm 能够通过将工作卸载给 Web Worker 来加速 Flutter 中的渲染)
具体效果其实可以简单通过以下例子进行对比:
- https://vsm-wonderous-js-canvaskit.web.app/#/welcome (linear wasm)
- https://vsm-wonderous-wasm-skwasm.web.app/#/welcome (optimized wasmgc)
当然,从目前国内的情况下,确实很少人会在为了开发 Web 程序而直接选择 Flutter,更多还是在使用 Flutter 之后,因为它支持 Web,所以就顺带把业务能力支持到 Web 场景。
特别是在 3.24 开始 Flutter Web 增加了对 Multi-view 嵌入支持,可以同时将内容渲染到多个 HTML 元素中,核心是 Flutter Web 不再只是 Full-screen 模式,这个功能可以称为 "embedded mode" 或者 "multi-view",支持灵活地将 Flutter 视图集成到现有 Web 应用里。
所以,从目前效果来看,Flutter Web 官方定位本身就不适用于具有文本丰富或者基于 flow 的内容的静态网站,Flutter Web 更多的支持场景是:
- Single Page Apps
- 现有的 Flutter 应用 to web
典型的例子可以看 wonderous 的 https://wonderous.app/web/#/welcome ,它的 Web Demo 可以算是 Flutter Web 的较好展示之一:
另外一个话题就是 SEO,在今年早些时候,Flutter 添加了对应的 roadmap 更新,在其中就有一段测试 link,虽然后续被移除了:
通过 https://alien-hawaii-2024.web.app/ 可以看到,Web 下页面其实可以做到复制和检索,但是不能被翻译插件识别,另外在 SEO 搜索上也可以匹配到:
其实 SEO 一直算是 Flutter Web 的一个问题,官方也在探索如何去解决,只是暂时还没有一个特别合适的公式方案,不过确实有不少第三方支持存在:
例如 seo_renderer ,其实根据 Google 的说法,只要内容相似(完整来源),就不被视为 SEO 伪装,理论上,seo_renderer 这种使用 regex 和 navigator userAgent 自动检测爬虫,并对应添加 HtmlElement 添加到 DOM 的行为,也算是一种规避的方式:
不过还是回归到 Flutter 路线上,它本身就不是为了传统 Web 场景存在,前面我们也说过 Flutter Web 的一些适用场景,另外在 2022 和 2023 年的 Google I/O 上,Flutter 也曾通过 Flutter Game 发布过两个 Flutter Web 小游戏,这也算是 Flutter Web 的场景之一:
甚至还有人通过 MPFlutter 在微信小游戏上发布了一个款五子棋游戏的:https://mpflutter.feishu.cn/wiki/BGMNwe6dAiOr6Rkn2oycF9y5nab
最后,在 Flutter CTO 2024 的报告显示,目前 Flutter 用户除了 Android 和 iOS 外,排第三的是 Web ,所以整体上 Flutter 对于 Web 还是比较上心的,而 HTML 的正式移除,明确了 Web 后续的路:坚定不移的 Wasm 。