于航—WebAssembly — 技术变革，未来已来(1)
2020-03-01 493浏览
- 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.⼀一个简单的例例⼦子-HTMLfetch('toy.wasm').then(response => response.arrayBuffer() HTML toy.html ).then(bytes => 实例例化模块对象 WebAssembly.instantiate(bytes, {}) ).then(result => { console.log(result.instance.exports['_add'](10, 20)); });
- 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++ 宿主依赖的 ⽂文件操作 #includeint 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！
