WebAssembly Annual Report 2021
如果无法正常显示,请先停止浏览器的去广告插件。
1. WebAssembly Annual Report
2021
Jason Yu 于航
PayPal
©2021 PayPal Inc. Confidential and proprietary.
2.
3. 关于我
Software Engineer @ PayPal
Jason Yu 于航
《深入浅出 WebAssembly》
极客时间 -《WebAssembly 入⻔课》
Web \ Wasm \ VM
@Becavalier
@Jason于航
©2021 PayPal Inc. Confidential and proprietary.
4. WebAssembly 基本介绍
议程
WebAssembly 快速实践
WebAssembly 进展与案例
WebAssembly 提案 & Tooling
WebAssembly 2021
©2021 PayPal Inc. Confidential and proprietary.
5. WebAssembly 基本介绍
6. 运行时 - JavaScript Engine Pipeline (V8)
JavaScript
Source Code
Parser
AST
Interpreter
Bytecode
(Profiler)
Compiler
Optimized
Machine Code
©2021 PayPal Inc. Confidential and proprietary.
7. 动态性 - Semantics for “+” Op
Trace-Guard 失效,
进行去优化
x + y
©2021 PayPal Inc. Confidential and proprietary.
8. 新的方案 - WebAssembly
•
•
•
•
本质:一种新的、抽象的虚拟机指令集(W3C)标准;
表现:一种以 .wasm 为后缀的二进制格式(Magic Code:0x6d736100);
进展:四大浏览器已支持该标准 MVP 版本的所有特性;
可用:可以通过标准 Web API 接口在浏览器中加载、解析和执行;
小端序
©2021 PayPal Inc. Confidential and proprietary.
9. 优化管线:WebAssembly Compiling Pipeline
JavaScript
Source Code
Parser
AST
Interpreter
Bytecode
(Profiler)
Compiler
WebAssembly
Binary
Optimized
Machine Code
©2021 PayPal Inc. Confidential and proprietary.
10. WebAssembly 快速实践
11. 简单的例子(WAT)
类型声明段
(module
(type (;0;) (func (param i32 i32) (result i32)))
WAT
toy.wasm
(func (;0;) (type 0)
get_local 0
get_local 1
i32.add)
函数声明段
©2021 PayPal Inc. Confidential and proprietary.
(export "add" (func 0)))
导出段
12. 使用 Emscripten 构建 Wasm 应用
• Virtual File System;
• Pthread;
• Linear Memory;
• …
C/C++ Source Code
(Optional)
©2021 PayPal Inc. Confidential and proprietary.
13. 简单的例子(C++)
#include "emscripten.h"
C++
extern "C" {
EMSCRIPTEN_KEEPALIVE int add(int x, int y) {
return x + y;
toy.cc
}
}
©2021 PayPal Inc. Confidential and proprietary.
14. 简单的例子(CLI)
CLI
emcc toy.cc -s WASM=1 -O3 -o toy.wasm
.wasm
©2021 PayPal Inc. Confidential and proprietary.
15. 简单的例子(HTML)
<script>
得到 Wasm 二进制字节码
fetch('toy.wasm').then(response =>
HTML
toy.html
response.arrayBuffer();
).then(bytes =>
实例化 Wasm 模块对象
WebAssembly.instantiate(bytes, {});
).then(result => {
console.log(result.instance.exports['add'](10, 20));
});
</script>
©2021 PayPal Inc. Confidential and proprietary.
调用 Wasm 导出对象
16. WebAssembly 进展与案例
17. WebAssembly 编程语言 - 本地编译 / 运行时嵌入
©2021 PayPal Inc. Confidential and proprietary.
18. WebAssembly 应用领域
• 新兴编程语言:Walt, Astro, Grain, …
• 多媒体处理:Squoosh, Photon, ogv.js, WXInlinePlayer, …
• 仿真器:gameboycolor, SaltyNES, …
• 云:waSCC, Krustlet, embly, olin, …
• 游戏引擎:Unity, Unreal, Ammo.js, …
• 区块链:Ethereum
• 前端框架:asm-dom, Yew, Seed, QT, Vugu, …
• IOT:Nebulet, wasmachine, …
• (编译器、虚拟机/运行时、工具、其他)。
©2021 PayPal Inc. Confidential and proprietary.
const x: i32 = 2;
export function echo(): i32 {
const x: i32 = 42;
return x;
}
19. WebAssembly 实例 - eBay 二维码扫描器
•
•
•
ZBar (C)
Custom Lib (C/C++)
BarcodeReader (JavaScript)
*Worker 对应多种方案,
竞争得到结果;
©2021 PayPal Inc. Confidential and proprietary.
20. WebAssembly 实例 - Shopify
AssemblyScript
• 安全性 - 沙盒 + CBS;
• 性能 - JIT + Binary + one-pass;
• 灵活性 - 多语言支持。
Lucet
*为不受信模块提供的一个,
可编程的边缘云平台。
©2021 PayPal Inc. Confidential and proprietary.
21. WebAssembly 提案 & Tooling
22. WebAssembly Post-MVP 提案
•
•
•
•
•
•
•
•
Interface Types; 29 进行中提案
Module Linking; Finished
7
Tail Call Optimization; Phase 4
1
Phase 3
4
Phase 2
8
Phase 1
14
Phase 0
2
Custom Annotation Syntax in WAT;
Garbage Collection;
Exception Handling;
WebAssembly C and C++ API;
…
©2021 PayPal Inc. Confidential and proprietary.
23. WebAssembly Post-MVP - Reference Types
• externref 类型;
可以引用宿主类型。
• ref.null;
• ref.is_null;
• ref.func;
•…
©2021 PayPal Inc. Confidential and proprietary.
Template Method
引用宿主环境的 Opaque Value
24. WebAssembly Post-MVP - Threading and Atomics
• i32.atomic.load8_u 等原子操作;
• 基于 SharedArrayBuffer 共享线程内存;
• Wasm 实例独立于 Worker 线程运行;
• 启用:Chrome / Firefox。
©2021 PayPal Inc. Confidential and proprietary.
25. WebAssembly Post-MVP - Fixed-width SIMD
• 固定 128 位(bit);
• i8x16.add(a: v128, b: v128);
• i16x8.{operation};
• i32x4.{operation};
• i64x2.{operation}。
©2021 PayPal Inc. Confidential and proprietary.
26. WebAssembly Post-MVP - Bulk Memory Operations
• memory.copy;
• 复制:{source}.copy;
• 填充:{source}.fill;
• 初始化:{source}.init;
• 丢弃:{source}.drop。
©2021 PayPal Inc. Confidential and proprietary.
std::memcpy
27. WASI
WASI
WebAssembly System Interface
©2021 PayPal Inc. Confidential and proprietary.
28. 传统接口抽象
以 musl 为例
System Call
•
•
•
•
File;
Socket;
Memory;
(…)
©2021 PayPal Inc. Confidential and proprietary.
29. WebAssembly 操作系统接口抽象
wasi-libc
fopen
wasi-libc
(__wasi_path_open 签名)
以 wasi-libc为例
Wasm Binary
(__wasi_path_open 调用)
Virtual Machine
(__wasi_path_open 定义)
OS
asm: syscall
©2021 PayPal Inc. Confidential and proprietary.
30. WASI 定义与实现
wasi-libc 函数签名
©2021 PayPal Inc. Confidential and proprietary.
Wasmtime 函数定义(Rust)
31. Tooling - On the Web
• Post-MVP 特性支持;
• 增强调试工具(Chrome);
C/C++ DevTools Support (DWARF)
©2021 PayPal Inc. Confidential and proprietary.
32. Tooling - Out of Web
• WASI - Low Level & High Level 接口;
• 帮助编程语言社区接入 Wasm(wasm-tools);
• Module Linking & Interface Types 提案的实现;
• Lucet 与 Wasmtime 的合并;
• Firefox 整合 Cranelift 以支持 ARM64;
• 补全文档、增强测试(Fuzzing);
• 社区(联盟)的规范化治理(决策流程、招募流程等);
• (…)
©2021 PayPal Inc. Confidential and proprietary.
33. WebAssembly 2021
34. WebAssembly 2021 - 目前使用语言情况
•
•
•
Rust - “最喜爱的语言”;
C++ - 首个支持的语言;
“小众” - Kotlin、Elixir …
数据及图表来自:https://blog.scottlogic.com/2021/06/21/state-of-wasm.html
©2021 PayPal Inc. Confidential and proprietary.
35. WebAssembly 2021 - 未来你最希望使用的语言
•
•
Rust 稳居榜首;
AssemblyScript - “开始追逐”。
数据及图表来自:https://blog.scottlogic.com/2021/06/21/state-of-wasm.html
©2021 PayPal Inc. Confidential and proprietary.
36. WebAssembly 2021 - 目前的使用场景
•
•
•
Web 应用最多;
游戏开发领域其次;
Serverless 与云应用增多。
数据及图表来自:https://blog.scottlogic.com/2021/06/21/state-of-wasm.html
©2021 PayPal Inc. Confidential and proprietary.
37. WebAssembly 2021 - 你认为未来可能影响的领域
•
•
Web 领域变革 - 充满希望;
Serverless 与游戏领域其次。
数据及图表来自:https://blog.scottlogic.com/2021/06/21/state-of-wasm.html
©2021 PayPal Inc. Confidential and proprietary.
38. WebAssembly 2021 - 还需要哪些提升
•
•
•
全方位急需提升;
调试功能“首当其冲”;
语言种类暂且够用。
数据及图表来自:https://blog.scottlogic.com/2021/06/21/state-of-wasm.html
©2021 PayPal Inc. Confidential and proprietary.
39. 观望建议
持续关注,选择使用
©2021 PayPal Inc. Confidential and proprietary.
40. Thanks!
©2021 PayPal Inc. Confidential and proprietary.
41. Thanks!
©2021 PayPal Inc. Confidential and proprietary.