跟着 Flutter 3.10 发布，Flutter Web 也引来了它最具有「里程碑」含义的更新，这里的「里程碑」不是说这次 Flutter Web 有多么严重的更新，而是 Flutter 官方对于 Web 总算有了明确的定位和方向。

进步

首要咱们简略聊进步，这不是本篇的要点，仅仅顺带。

本次进步主要在于两个大点：Element 嵌入支撑和 fragment shaders 支撑 。

首要是 Element 嵌入，Flutter 3.10 开端，现在能够将 Flutter Web嵌入到网页的任何 HTML 元素中，并带有 flutter.js 引擎和 hostElement 初始化参数。

简略来说便是不需求 iframe 了，如下代码所示，只需求经过 initializeEngine 的 hostElement 参数就能够指定嵌入的元素，灵敏度支撑得到了进步。

<html>
<head>
 <!-- ... -->
 <scriptsrc="flutter.js"defer></script>
</head>
<body>
​
 <!-- Ensure your flutter target is present on the page... -->
 <divid="flutter_host">Loading...</div>
​
 <script>
  window.addEventListener("load",function(ev) {
   _flutter.loader.loadEntrypoint({
    onEntrypointLoaded:asyncfunction(engineInitializer) {
     letappRunner=awaitengineInitializer.initializeEngine({
      // Pass a reference to "div#flutter_host" into the Flutter engine.
      hostElement:document.querySelector("#flutter_host")
     });
     awaitappRunner.runApp();
    }
   });
  });
 </script>
</body>
</html>

PS ：假如你的项目是在 Flutter 2.10 或更早版别中创建的，要先从目录中删去 /web 文件 ，然后经过 flutter create . --platforms=web 从头创建模版。

fragment shaders 部分一般情况下我们或许并不会用到，shaders 便是以 .frag 扩展名呈现的 GLSL 文件，在 Flutter 里是在 pubspec.yaml 文件下的 shaders 中声明，现在它支撑 Web 了：

flutter:
shaders:
 -shaders/myshader.frag

一般运转时会把 frag 文件加载到 FragmentProgram 对象中，经过 program 能够获取到对应的 shader，然后经过 Paint.shader 进行运用制作， 当然 Flutter 里 shaders 文件是存在限制的，比方不支撑 UBO 和 SSBO 等。

当然，这里不是讲解 shaders ，而是宣告一下，Flutter Web 支撑 shaders 了。

未来

其实未来才是本篇的要点，咱们知道 Flutter 在 Web 范畴的支撑上一向在「妥协」，Flutter Web 在整个 Flutter 体系下一向处于比较特别的位置，由于它一向存在两种烘托方法：html 和 canvaskit。

简略说 html 便是转化为 JS + Html Element 烘托，而 canvaskit 是采用 Skia + WebAssembly 的方法，而 html 的形式让 Web 在 Flutter 中显得「方枘圆凿」，路径依赖和保护成本也一向是 Flutter Web 的头痛问题。

Flutter 3.10 之 Flutter Web 路线已定，可用性进一步提升，快来尝鲜 WasmGC

面对这个窘境，官方在年初的 Flutter Forword 大会上提出从头规划 Flutter Web 的未来，而跟着 Flutter 3.10 的发布，官方总算对于 Web 的未来有了明确的定位：

“Flutter 是第一个环绕 CanvasKit 和 WebAssembly 等新式 Web 技能进行架构规划的结构。”

Flutter 团队表明，Flutter Web 的定位不是规划为通用 Web 的结构，类似的 Web 结构现在有许多，比方 Angular 和 React 等在这个范畴体现就很超卓，而 Flutter 应该是环绕 CanvasKit 和 WebAssembly 等新技能进行架构规划的结构。

所以 Flutter Web 未来的道路会是更多 CanvasKit ，也便是 WebAssembly + Skia ，一同在这个范畴 Dart 也在继续深耕：从 Dart 3 开端，对于 Web 的支撑将逐步演进为 WebAssembly 的 Dart native 的定位。

Flutter 3.10 之 Flutter Web 路线已定，可用性进一步提升，快来尝鲜 WasmGC

什么是 WebAssembly 的 dart native ？一向以来 Flutter 对于 WebAssembly 的支撑都是：运用 Wasm 来处理CanvasKit 的 runtime，而 Dart 代码会被编译为 JS，而这对于 Dart 团队来时，其实是一个「妥协」的过渡期。

而跟着官方与 WebAssembly 生态系统中的多个团队的深入合作，Dart 现已开端支撑直接编译为原生的 wasm 代码，一个叫 WasmGC 的废物收集完成被引进规范，该扩展完成现在在根据 Chromium 的浏览器和 Firefox 浏览器中在趋向安稳。

现在在基准测验中，履行速度进步了 3 倍

要将 Dart 和 Flutter 编译成 Wasm，你需求一个支撑 WasmGC 的浏览器，现在 Chromium V8 和 Firefox 团队的浏览器都在进行支撑，比方 Chromium 下：

经过结构和数组类型为 WebAssembly 增加了对高档语言的有用支撑，以 Wasm 为 target 的语言编译器能够与主机 VM 中的废物收集器集成。在 Chrome 中启用该功用意味着启用类型化函数引证，它会将函数引证存储在上述结构和数组中。

Flutter 3.10 之 Flutter Web 路线已定，可用性进一步提升，快来尝鲜 WasmGC

现在在 Flutter master 分支下就能够提前测验 wasm 的支撑，运转 flutter build web --help 假如呈现下图所示场， 说明支撑 wasm 编译。

Flutter 3.10 之 Flutter Web 路线已定，可用性进一步提升，快来尝鲜 WasmGC

之后履行 flutter build web --wasm 就能够编译一个带有 native dart wasm 的 web 包，命令履行后，会将产品输出到 build/web_wasm 目录下。

之后你能够运用 pub 上的 dhttpd 包在 build/web_wasm目录下履行本地服务，然后在浏览器预览作用。

> cd build/web_wasm
> dhttpd
Server started on port 8080

现在需求版别 112 或更高版别的 Chromium 才干支撑，一同需求发动对应的 Chrome 标识位：

  • enable-experimental-webassembly-stack-switching
  • enable-webassembly-garbage-collection

Flutter 3.10 之 Flutter Web 路线已定，可用性进一步提升，快来尝鲜 WasmGC

当然，现在阶段还存在一些限制，例如：

Dart Wasm 编译器利用了 JavaScript-Promise Integration (JSPI) 特性，Firefox 不支撑 JSPI 提议，所以一旦 Dart 从 JSPI 迁移出来，Firefox 应启用恰当的标志位才干运转。

别的还需求 JS-interop 支撑，由于为了支撑 Wasm，Dart 改变了它针对浏览器和 JavaScript 的 API 支撑方法， 这种改变是为了防止把 dart:html 或 package:js 编译为 Wasm 的 Dart 代码，大多数特定于渠道的包如 url_launcher 会运用这些库。

Flutter 3.10 之 Flutter Web 路线已定，可用性进一步提升，快来尝鲜 WasmGC

终究，现在 DevTools 还不支撑 flutter run 去运转和调试 Wasm。

终究

很高兴能看到 Flutter 团队终究去定了 Web 的未来道路，这让 Web 的未来更加明朗，当然，正如前面所说的，Flutter 是第一个环绕 CanvasKit 和 WebAssembly 等新式 Web 技能进行架构规划的结构。

所以 Flutter Web不是为了规划为通用 Web 的结构去 Angular 和 React 等竞争，它是让你在运用 Flutter 的时分，能够将能力很好地释放到 Web 范畴，而 CanvasKit 带来的一致性更符合 Flutter Web 的定位，当然，处理加载时长问题会是任重道远的需求。

终究不得不提 WebGPU， WebGPU 作为新一代的WebGL，能够提供在浏览器制作 3D 的全新完成，它属于 GPU硬件（显卡）向 Web（浏览器）开放的初级 API，包括图形和核算两方面相关接口。

WebGPU 来自 W3C 制定的规范，与 WebGL 不同，WebGPU 不是根据 OpenGL ，它是一个新的全新规范，发起者是苹果，现在由 W3C GPU 与来自苹果、Mozilla、微软和谷歌一同制定开发，不同于 WebGL (OpenGL ES Web 版别)，WebGPU 是根据 Vulkan、Metal 和 Direct3D 12 等，能提供更好的功能和多线程支撑。

WebGPU 现已被正式集成到 Chrome 113 中，首个版别可在会支撑 Vulkan 的 ChromeOS 设备、 Direct3D 12 的 Windows 设备和 macOS 的 Chrome 113 浏览器，除此之外 Linux、Android 也将在 2023 年内开端陆续发布，同步现在也初步登陆了 Firefox 和 Safari 。

提及 WebGPU 的原因在于：WebGPU + WebAssembly 是否在未来能够让 Web 也支撑 Impeller 的或许？。

详细可见：cohost.org/mcc/post/14… 和 www.infoq.cn/article/qwa…