Flutter Web 的未来,Wasm Native 即将到来

早在去年 Google I/O 发布 Flutter 3.10 的时候就提到过, Flutter Web 的未来会是 Wasm Native ,当时 Flutter 团队就表示,Flutter Web 的定位不是设计为通用 Web 的框架,类似的 Web 框架现在有很多,而 Flutter 的定位会是

“第一个围绕 CanvasKit 和 WebAssembly 等新兴 Web 技术进行架构设计的框架。”

如今一年之期将至,最近,Flutter Wasm Native 也迈出了它关键的一个 commit :b8cd317 ,在 master 上 flutter build web --wasm 的支持不再是 Experimental 状态。

可以看到,目前 Flutter 和 Dart 已经支持在构建 Web 时添加 WebAssembly 作为编译目标 ,而目前如果要支持 Wasm 的 Flutter 应用,还需要一个支持 WasmGC 的浏览器:

Chromium 和 V8 在 Chromium 119 中发布了对 WasmGC 的 stable 支持, Firefox 在 Firefox 120 中支持 WasmGC (还有点问题),另外 Safari 尚不支持 WasmGC 。

有的人可能疑惑, Flutter Web 不是一直都支持编译为 CanvasKit 的 WebAssembly 渲染方式吗?为什么现在又提到 WebAssembly 作为编译目标 ?

这里就不得不说 Dart native , 在此之前, Flutter 对于 WebAssembly 的支持都是:使用 Wasm 来处理CanvasKit 的 runtime,而 Dart 代码会被编译为 JS,而现在,随着 WasmGC 的垃圾收集实现的引入,Dart 已经开始支持直接编译为原生的 Wasm 代码

如果你还无法理解,可以直观对比下面两张图,图1是以前 CanvasKit 的 WebAssembly 渲染方式,图 2 是全新的 Dart native 下的 Wasm 渲染方式,可以看到,其中最大的变化就是 Size 变少了不少,这对于老版 CanvasKit 来说一直是硬伤。

更小更快更强!

对于 Flutter Web,全新的 Dart Native 这里类似于完成了一个全新的 “Skwasm” 渲染引擎,为了最大限度地提高性能,Skwasm 通过 wasm-to-wasm 绑定将编译后的代码,直接连接到自定义 CanvasKit Wasm 模块 ,这也是 Flutter Web 多线程渲染支持的第一次迭代,进一步提高了帧时间。

另外随着 Dart 3.3 的发布,目前 Flutter Web 也完成了它之前承诺的一些功能:

  • 双编译:生成 Wasm 和 JavaScript 输出,并在运行时启用功能检测,以适配支持和不支持 Wasm-GC 的浏览器,也就是 CanvasKit 本身支持过渡阶段的兼容运行
  • JavaScript interop:基于扩展类型的新 JS 互操作机制,当针对 JavaScript 和 Wasm 时,可以在 Dart 代码、浏览器 API 和 JS 库之间进行简洁、类型安全的调用,Dart 开发人员可以访问类型化 API 来与 JavaScript 交互,API 通过静态强制明确定义了两种语言之间的边界,在编译之前消除了许多问题。
  • 支持 Wasm 的浏览器 API:一个新的 package:web,用于取代了 dart:html (和相关库),未来 browser libraries 支持将集中在 package:web 上。

为了支持 Wasm 编译,Dart 通过 js-interop 改变了与浏览器和 JavaScript API 互操作的方式,这种转变需要 Dart 支持 Wasm 的浏览器 API 来适配:

  • package:web,取代 dart:html(和其他网络库)
  • dart:js_interop, 取代 package:jsdart:js

具体可以查看 https://dart.dev/interop/js-interop/package-web 和 https://dart.dev/interop/js-interop 进行迁移

总结一下,虽然 Wasm Native 的支持目前还没普及,但是也决定了 Flutter Web 从「举棋不定」到「落子无悔」的变化,虽然不知道未来 Wasm Native 会怎么样?但是对于 Flutter Web 来说,看到是比现在更好

更多可参考 https://docs.flutter.dev/platform-integration/web/wasm

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/519200.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[lesson06]内联函数分析

内联函数分析 常量与宏回顾 C中的const常量可以替代宏常数定义,如: C中是否有解决方案替代宏代码片段? 内联函数 C中推荐使用内联函数替代宏代码片段 C中使用inline关键字声明内联函数 内联函数声明时inline关键字必须和函数定义结合在…

营销中的归因人工智能

Attribution AI in marketing 归因人工智能作为智能服务的一部分,是一种多渠道算法归因服务,根据特定结果计算客户互动的影响和增量影响。有了归因人工智能,营销人员可以通过了解每个客户互动对客户旅程每个阶段的影响来衡量和优化营销和广告…

深入理解计算机系统 家庭作业 2.83

要读懂题目挺难的 A. 假设我们要求的无穷串是x0.yyyyyyy... Y(0.y<<ky) (由YB2Uk(y)得到,B2Uk是一个截断成k位的函数) x0.yyyyy...(这是我们假设的) 于是有 Yx y.yyyyyy... Yx y.yyyyyy... x<<k Yx-x xY(-1) B. a.Y5 k3 ,x5/7 b.Y6 k4 ,x6/152/5 c…

JavaScript权威指南(第7版) 笔记 - 扩展操作符总结

扩展操作符 ... &#xff0c;不是真正意义上的JavaScript操作符。 let str "0123ABC" console.log(typeof ...str);// Uncaught SyntaxError: Unexpected token ... 上面的第2行代码会报错&#xff0c;… 操作符只能在数组字面量、对象字面量、函数调用中使用。 在…

python-基础篇-字符串、列表、元祖、字典-字符串

文章目录 2.3字符串、列表、元祖、字典2.3.1字符串2.3.1.1字符串介绍2.3.1.1.1python中字符串的格式&#xff1a;2.3.1.1.2字符串在内存中的存储方式 2.3.1.2字符串的输入输出2.3.1.2.1字符串输出2.3.1.2.2字符串输入2.3.1.2.3组字符串的方式 2.3.1.3下标和切片2.3.1.3.1下标索…

vscode 连接远程服务器 服务器无法上网 离线配置

离线配置 vscode 连接远程服务器 .vscode-server 1. .vscode-server下载 使用vscode连接远程服务器时会自动下载配置.vscode-server文件夹&#xff0c;如果远程服务器无法联网&#xff0c;则需要手动下载 1&#xff09;网址&#xff1a;https://update.code.visualstudio.com…

AttributeError: ‘Text‘ object has no property ‘FontSize‘

在学习《机器学习理论与实践》——1 机器学习编程语言基础中&#xff0c;使用Matplotlib画图&#xff08;在坐标轴或绘图区显示中文&#xff09;时&#xff0c;产生AttributeError: Text object has no property FontSize 错误解决。 AttributeError: Text object has no prop…

响应跨域的两种方式

第一种&#xff1a; Configuration public class CorsConfication {Beanpublic CorsWebFilter corsWebFilter() {UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration new CorsConfiguration();//1、配置跨…

【随笔】Git 高级篇 -- 整理提交记录(上)(十五)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…

蓝桥集训之垒骰子

蓝桥集训之垒骰子 核心思想&#xff1a;矩阵乘法 f[i]存顶面数值 构造a矩阵 使得*f[i] f[i-1]a 则f[i] f[1] * an 快速幂优化 #include <iostream>#include <cstring>#include <algorithm>using namespace std;typedef long long LL;const int N 6,m…

虚良SEO-蜘蛛池的作用与工作原理

蜘蛛池是一种SEO优化工具&#xff0c;其主要作用是吸引搜索引擎蜘蛛到特定网站进行爬行和索引&#xff0c;从而提高网站的可见性和排名。下面分别介绍蜘蛛池的作用和工作原理。 蜘蛛池的作用&#xff1a; 提高网站收录&#xff1a; 当一个网站新发布时&#xff0c;或者长时间…

Revit模型进入虚幻引擎UE5教程

一、背景 小伙伴们是否有Revit进入虚幻引擎交互的需求呢&#xff1f; 二、实现功能 1.Revit进入虚幻UE5,包含模型属性&#xff0c;材质等 2.实现BIM构件点选&#xff0c;高亮&#xff0c;属性展示 3.实现BIM模型分层显示&#xff0c;爆炸等效果 三、教程地址 教程&#x…

前端三剑客 —— CSS (第四节)

目录 内容回顾&#xff1a; 1.常见样式 2.特殊样式 特殊样式 过滤效果 动画效果 动画案例&#xff1a; 渐变效果 其他效果&#xff1a; 多列效果 字体图标&#xff08;icon&#xff09; 内容回顾&#xff1a; 1.常见样式 text-shadow x轴 y轴 阴影的模糊程度 阴影的…

C++设计模式:策略模式(二)

1、定义与动机 定义一系列算法&#xff0c;把它们一个个封装起来&#xff0c;并且使它们可互相替换&#xff08;变化&#xff09;&#xff0c;该模式使得算法可独立于使用它的客户程序&#xff08;稳定&#xff09;而变化&#xff08;扩展&#xff0c;子类化&#xff09; 在软…

【QT入门】 Qt代码创建布局综合运用:仿写腾讯会议登陆界面

往期回顾&#xff1a; 【QT入门】 Qt代码创建布局之水平布局、竖直布局详解-CSDN博客 【QT入门】 Qt代码创建布局之栅格布局详解-CSDN博客 【QT入门】 Qt代码创建布局之分裂器布局详解-CSDN博客 【QT入门】 Qt代码创建布局综合运用&#xff1a;仿写腾讯会议登陆界面 一、界面分…

YOLO V8-Detection 【单张图片】 推理详解及部署实现

前言 在实际处理过程中&#xff0c;我们使用YOLO V8进行推理时&#xff0c;通常会针对一张图片进行推理。如果需要对多张图片进行推理&#xff0c;则可以通过一个循环来实现对图片逐张进行推理。 单张图片推理时&#xff0c;需要注意图片的尺寸必须是32的倍数&#xff0c;否则…

【氮化镓】缓冲层结构对GaN HEMT射频性能的影响

【Effect of different layer structures on the RF performance of GaN HEMT devices】 研究总结&#xff1a; 本研究探讨了不同缓冲层结构对氮化镓高电子迁移率晶体管&#xff08;GaN HEMT&#xff09;射频性能的影响。通过对比三种不同缓冲层结构的GaN HEMT设备&#xff0…

海外问卷调查项目拆解(操作全流程演示)保姆级攻略具体操作

海外问卷调查是怎么做的&#xff1f;好做吗&#xff1f; 关于这个问题&#xff0c;不管我说好做、或者不好做&#xff0c;都并不能解决问题&#xff1b; 所以&#xff0c;这篇文章直接把做题的全过程展现给你看&#xff0c;你自己去真实地感受一下&#xff0c;这个玩意儿到底…

【电商API数据采集接口接入】如何搭建电商数据指标体系?

01 什么是好的数据指标&#xff1f; 电商商品数据采集API接口接入 01 前言 做数据分析的工作已经将近6年了&#xff0c;形形色色的业务方也合作了不少。大部分业务方都给我一个感觉就是我什么数据指标都要看&#xff0c;越多越多好&#xff0c;即使看了这些指标之后什么事…

智慧开发平台免!费!申请试用

原创 F学社 F学社 2024-04-01 17:13 江苏 扫描二维码即可申请试用 01 智慧开发平台简介 F1 WIFI智慧教育平台是可支持线上线下联动的基于FPGA的口袋式数字系统学习平台。其采用了AMD、Altera、安路、高云等国外国内主流公司的FPGA进行数字系统方向的教学实验设计&#xff0c…