于航—WebAssembly — 技术变革,未来已来(1)

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
1. WebAssembly - 技术变⾰革,未来已来 于航(曜彤) 阿⾥里里巴巴/本地⽣生活
2. 在此键⼊入姓名 在此键⼊入tittle
3. 在此键⼊入姓名 在此键⼊入tittle
4. ⾃自我介绍 前端@阿⾥里里巴巴 / 本地⽣生活 于航 (曜彤) 《深⼊入浅出 WEBASSEMBLY》作者 FCC 上海海社区负责⼈人
5. ⽬目录 • WebAssembly 简短回顾(背景、原理理); • 各⼤大公司的 WebAssembly 线上实践; • Roadmap & Milestone 发展规划; • 未来可期的 - WASI;
6. Javascript 部分执⾏行行链路路(V8)
7. ECMA 规定的“+”执⾏行行流程 x+y
8. 编译链路路优化与问题(V8)
9. 曾经的尝试 - ASM.js & PNACL function plusOne (x) { x = x 0; // x : int return (x + 1) 0; } • • • 是⼀一种 JavaScript 严格⼦子集; • • • 提供沙盒环境在浏览器器中执⾏行行的 C/C++ 代码; 通过 Annotation 的⽅方式标注了了变量量的类型; 利利于编译器器的优化; 充分利利⽤用 CPU 的特性,如 SIMD、多核⼼心处理理等; 平台独⽴立,⼀一次编译到处运⾏行行;
10. 新的⽅方案 - WebAssembly • • • • ⼀一种新的抽象虚拟机(W3C)标准; 四⼤大浏览器器已⽀支持该标准 MVP 版本的所有特性; ⼀一种以 .wasm 为后缀的⼆二进制格式(0x6d736100); 可以通过标准 Web API 接⼝口在浏览器器中加载、解析和运⾏行行;
11. WebAssembly 编译完整链路路 ⼀一种新的抽象虚拟机(W3C)标准; 四⼤大浏览器器已⽀支持该标准 MVP 版本的所有特性; ⼀一种以 .wasm 作为后缀的⼆二进制格式(0x6d736100); 可以通过标准 Web API 接⼝口在浏览器器中加载、解析和运⾏行行;
12. 使⽤用 Emscripten 构建 Wasm 应⽤用 • Virtual File System; • Pthread; • Linear Memory; •… C/C++ Source Code
13. ⼀一个简单的例例⼦子-C++ #include "emscripten.h" C++ extern "C" { EMSCRIPTEN_KEEPALIVE int add(int x, int y) { return x + y; toy.cc } }
14. ⼀一个简单的例例⼦子-CLI CLI emcc toy.cc -s WASM=1 -O3 -o toy.js .wasm .js
15. ⼀一个简单的例例⼦子-HTML <script> fetch('toy.wasm').then(response => response.arrayBuffer() HTML toy.html ).then(bytes => 实例例化模块对象 WebAssembly.instantiate(bytes, {}) ).then(result => { console.log(result.instance.exports['_add'](10, 20)); }); </script>
16. ⼀一个简单的例例⼦子-WAT 类型声明段 (module (type (;0;) (func (param i32 i32) (result i32))) WAT toy.wasm (func (;0;) (type 0) (param i32 i32) (result i32) get_local 1 get_local 0 i32.add) 函数声明段 (export "_add" (func 0))) 导出段
17. WASM 实际应⽤用(⼀一) - 在线图像处理理 Squoosh libimagequant (C) MozJPEG (C++) webp (C)
18. WASM 实际应⽤用(⼆二) - Ebay Barcode scanner ZBar (C) Custome Lib (C/C++) BarcodeReader (JavaScript) *三个 Worker 对应三种⽅方案,依次竞争;
19. Wasm 语⾔言编译器器 / 解释器器
20. 其他应⽤用领域 • 视频/直播编解码; • 在线图像/视频处理理应⽤用; • 基于边缘计算的机器器/深度学习:MXNet.js; • ⾼高性能 Web 游戏:Unity、Unreal、Ammo.js 等游戏库和引擎; • 区块链 Ethereum 核⼼心; • 前端框架:sharpen、asm-dom、yew; • IOT:wasmachine;
21. Wasm MVP 两个重点: ⾼高性能计算 代码库复⽤用
22. WebAssembly Post-MVP WebAssembly Thread (Chrome74) • i32.atomic.load8_u 等原⼦子操作; • i32.atomic.wait 可⽤用于实现互斥锁; • 可⽤用于移植 Pthreads 多线程; • SharedArrayBuffer 共享内存;
23. WebAssembly Post-MVP WebAssembly 128-bit SIMD • 固定 128 位(bit); • i8x16.add(a: v128, b: v128) -> v128;
24. WebAssembly Post-MVP Reference Types • 新的 “anyref / funcref” 类型,⽤用于引⽤用宿主的值类型; • 更更好地与宿主(⽐比如浏览器器)进⾏行行交互; • 所引⽤用的值是不不透明且抽象的; Table WEBIDL
25. WebAssembly Post-MVP WebIDL Binding Proposal • 为 Wasm 与 Web 之间提供统⼀一的类型标准; • 可减少 Wasm 与 Web API 之间的调⽤用开销; TextEncoder.encodeInto
26. WebAssembly Post-MVP • Tail Call Optimization; • Custom Annotation Syntax in the Text Format; • Garbage collection; • Exception handling; • JavaScript BigInt to WebAssembly i64 integration; • …
27. Wasm 虚拟机 - WASI WASI WebAssembly System Interface
28. 传统接⼝口抽象(musl) System Calls File / Socket / Memory / Processes
29. WASI - 接⼝口抽象(wasi-libc) __wasi_* WASI 标准
30. WASI - 接⼝口调⽤用关系 __wasi_path_open IMPORTS WASM INSTANCE
31. WASI - 宿主实现细节 wasm-libc 函数定义 Lucet 宿主函数实现(Rust)
32. WASI - Lucet 宿主实现 ⼀一个 WebAssembly Compiler && (WASI) ⼀一个 WebAssembly Runtime
33. WASI - Lucet ⼀一个例例⼦子 - C/C++ 宿主依赖的 ⽂文件操作 #include <stdio.h> int main(int argc, char** argv) { FILE * file; if ((file = fopen("lucent-wasi", "w+"))) { fputs("Hello GMTC!\n", file); } return 0; }
34. WASI - Lucet ⼀一个例例⼦子 - 编译和运⾏行行 wasm32-unknown-wasi-clang hello.c -o hello.wasm lucetc-wasi hello.wasm -o hello.so lucet-wasi hello.so --dir .:. 指定⽬目录映射关系
35. WASI - Lucet ⼀一个例例⼦子 - WAT 细节
36. Wasm 总结建议 找到性能瓶颈,选择性使⽤用 做好降级⽅方案,保证可⽤用性
37. Wasm 观望建议 持续加码,未来可期
38. Q&A
39. 在此键⼊入姓名 在此键⼊入tittle
40. 在此键⼊入姓名 在此键⼊入tittle
41. THANKS THANKS! THANKS!