GIAC-2022sh 学习笔记 | WebAssembly在前端中的应用与展望

简介: GIAC-2022sh 学习笔记 | WebAssembly在前端中的应用与展望

wasm.png

WebAssembly在前端中的应用与展望

徐君

Intel 软件研发工程师

http://www.thegiac.com/2022sh/schedule


个人简介

徐君

  • 擅长运行时引擎、编译器前端方向
  • WebAssemblyMicroRuntime(WAMR)项目核心成员,主要负责: • 性能优化 • 开发者体验 • 产品应用
  • 项目地址: https://github.com/bytecodealliance/wasm-micro-runtime
    WebAssembly在前端中的应用与展望 徐君 Intel 软件研发工程师


WebAssembly 和 WAMR 简介

什么是WebAssembly?

  • WebAssembly(wasm)是一个可移植、体积小、加载快并且兼容Web的 全新格式
  • 安全
  • 沙箱隔离机制,宿主资源访问可控制
  • 高效
  • 通过JIT/AOT技术加持,可接近原生应用的执行性能
  • 多语言支持
  • C/C++, typescript, python, go, rust, ..

WebAssembly = Sandboxing + Performance + Portability + Capabilities

WAMR发展历史

  • 2019年5月Intel开源WAMR项目
  • 2019年11月以创始项目身份发起并加入Bytecode Alliance(BA)
  • 2021年10月转换为社区开放治理模式
  • 设计目标
    • 广泛的适用性:从嵌入式设备到云端
    • 小尺寸,高性能的轻量级 WASM 运行时
    • 适配多种CPU架构(32bit and 64bit)和操作系统 • Intel SGX/TDX 一等公民支持


WAMR在前端的应用


WAMR针对前端场景的优化设计

WAMR特性介绍

  • 实现语言:C
  • 解释器:
  • Fast interpreter —— 速度优先
  • Classic interpreter —— 内存优先
  • 编译后端:LLVM • 目标文件大小
  • VMCore – 60K for AoT, 90K for interpreter
  • 150K for the whole runtime
  • AoT 支持平台:Linux, SGX, MCU
  • SIMD 支持
  • SGX/TDX 一等公民支持
  • Wasm 多线程特性与 pthread 支持
  • Reference type, Multi-modules
  • CPU Arch support:
  • X86-64, X86-32
  • ARM, THUMB, AARCH64
  • MIPS
  • XTENSA
  • Platform support:
  • Linux,SGX (Linux)
  • Windows
  • MacOS
  • Android
  • Zephyr, AliOS Things • Vxworks
  • Nuttx, RT-thread
  • iOS*

WAMR整体架构

wasm.png

  • 预先编译
  • Fast interpreter
  • Extend new bytecode
  • Builtin-libc


WebAssembly现存问题

  • 应用编程语言欠缺
  • 跨模块交互不便
  • 开发工具不完善


WebAssembly未来展望

WebAssembly 2.0 草案

  • 已包含的主要内容:
  • 固定宽度(128bit)SIMD
  • 批量内存操作、table操作
  • 引用类型
  • 多返回值
  • 讨论中
  • 异常处理
  • 多线程
  • 宽松SIMD
  • 其他

GC proposal

  • 意义
  • 更高效地支持高级语言
  • 更快的执行效率
  • 更小的模块体积
  • 纯静态类型系统
  • 复用任意GC实现
  • GCproposal并不涉及具体GC算法
  • 定义struct,array等基本结构
  • 目前状态
  • 一部分依赖的feature(如reference-types等)已就绪
  • 一些runtime已经提供实验性支持(WAMR,V8)
  • 暂未稳定,偶尔会有大幅调整


Component model


https://github.com/bytecodealliance/wasm-micro-runtime

目录
相关文章
|
2月前
|
前端开发 JavaScript 应用服务中间件
在Docker部署的前端应用中使用动态环境变量
以上步骤展示了如何在 Docker 配置过程中处理并注入环墨遁形成可执行操作流程,并确保最终用户能够无缝地与之交互而无须关心背后复杂性。
170 13
|
9月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
584 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
8月前
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
1388 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
9月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
621 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
人工智能 前端开发 JavaScript
详解智能编码在前端研发的创新应用
接下来,人与智能体的交互将变得更为紧密,比如 N 年以后是否可以逐渐过渡。这个逐渐过渡的过程实际上是温和的,从依赖人类到依赖超大规模算力的转变,可能会取代我们的一些职责。这不仅仅是简单的叠加关系。对于AI和超大规模算力,这是否意味着我们可以大幅度提升软件质量,是否可以缩短研发周期并提高效率,还有创造出更优质的软件并持续发展,这无疑是肯定的。
557 25
|
9月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
295 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
人工智能 前端开发 JavaScript
智能编码在前端研发的创新应用
在前端开发领域,智能编码技术正引领一场变革,通过大模型的强大能力将自然语言需求直接转化为高效、可靠的代码实现。
364 10
|
9月前
|
人工智能 前端开发 JavaScript
详解智能编码在前端研发的创新应用 | 领通义灵码蛇年红包封面
详解智能编码在前端研发的创新应用 | 领通义灵码蛇年红包封面
|
11月前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
12月前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距