于航—WebAssembly — 技术变革，未来已来.pdf

WebAssembly - 技术变⾰，未来已来 于航(曜彤) 阿⾥巴巴/本地⽣活 在此键⼊姓名 在此键⼊tittle 在此键⼊姓名 在此键⼊tittle ⾃我介绍 前端@阿⾥巴巴 / 本地⽣活 于航 ( 曜彤) 《深⼊浅出 WEBASSEMBLY》作者 FCC 上海社区负责⼈ ⽬录 • WebAssembly 简短回顾（背景、原理）； • 各⼤公司的 WebAssembly 线上实践； • Roadmap Milestone 发展规划； • 未来可期的 - WASI ； Javascript 部分执⾏链路（V8） ECMA 规定的“+”执⾏流程 x + y 编译链路优化与问题（V8） 曾经的尝试 - ASM.js PNACL function plusOne (x) { • 是⼀种 JavaScript 严格⼦集； x = x|0; // x : int • 通过 Annotation 的⽅式标注了变量的类型； return (x + 1)|0; • 利于编译器的优化； } • 提供沙盒环境在浏览器中执⾏的 C/C++ 代码； • 充分利⽤ CPU 的特性，如 SIMD 、多核⼼处理等； • 平台独⽴，⼀次编译到处运⾏； 新的⽅案 - WebAssembly • ⼀种新的抽象虚拟机（W3C）标准； • 四⼤浏览器已⽀持该标准MVP 版本的所有特性； • ⼀种以 .wasm 为后缀的⼆进制格式（0x6d736100）； • 可以通过标准 Web API 接⼝在浏览器中加载、解析和运⾏； WebAssembly 编译完整链路 ⼀种新的抽象虚拟机（W3C）标准； 四⼤浏览器已⽀持该标准 MVP 版本的所有特性； ⼀种以 .wasm 作为后缀的⼆进制格式（0x6d736100）； 可以通过标准 Web API 接⼝在浏览器中加载、解析和运⾏； 使⽤ Emscripten 构建 Wasm 应⽤ • Virtual File System; • Pthread; • Linear Memory; • … C/C++ Source Code ⼀个简单的例⼦-C++ #include emscripten.h extern C { C++ EMSCRIPTEN_KEEPALIVE int add(int x, int y) { return x + y; toy.cc } } ⼀个简单的例⼦-CLI CLI emcc toy.cc -s WASM=1 -O3 -o toy.js .wasm .js ⼀个简单的例⼦-HTML script fetch(toy.wasm).then(response = response.arrayBuffer