徐林森《WebAssembly在腾讯文档表格的实践》.pdf

1、WebAssembly 在腾讯文档表格的实践徐林森腾讯前端工程师关于我徐林森(Aricxu)腾讯文档函数计算引擎负责人正致力于打造更快更好的 C+表格函数计算引擎也在进行前端业务 WebAssembly 化落地的探索与实践目录1.WebAssembly 技术概述2.基于 WebAssembly 的表格函数计算架构3.WebAssembly 落地经验分享4.WebAssembly 通用性能优化经验分享WebAssembly 技术概述Part.1Topic.WebAssembly 究竟是什么“WebAssembly（简称Wasm）是一种基于堆栈的虚拟机的二进制指令格式。”https:/webass

2、embly.org/计算 A+B 的 Wasm 代码(WebAssembly Text Format)Wasm 文本格式计算 A+B 的 Wasm 代码取出一个参数，入栈再取出个参数，入栈从栈上取出两个数，求和并将结果入栈(WebAssembly Text Format)Wasm 文本格式Wasm 指令是基于堆栈的wat2wasmWasm 代码是二进制的C+RustGolangWasm 二进制格式浏览器终端服务器EmscriptenGolang CompilerRust CompilerV8WasmtimeWasmer源语言运行时Wasm 能够支撑大型应用的构建吗？基于 Wasm 的大型应用案

3、例UI设计领域在线协同办公领域Photoshop Web图像编辑领域工业设计领域AutoCAD Web基于 Wasm 的大型应用案例UI设计领域在线协同办公领域Photoshop Web图像编辑领域工业设计领域AutoCAD Web基于 Wasm 的大型应用案例UI设计领域在线协同办公领域Photoshop Web图像编辑领域工业设计领域AutoCAD Web基于 Wasm 的大型应用案例UI设计领域在线协同办公领域Photoshop Web图像编辑领域工业设计领域AutoCAD Web哪些前端项目适合应用 Wasm 技术 存在现有 C+、Rust 代码库的项目;主要场景为 CPU 密集型计算

4、的项目；对代码安全性有严格要求的项目；C+、Rust 学习成本较高，前端开发想要尝试 Wasm，有没有上手成本更低的选择？AssemblyScriptA TypeScript-like language for WebAssembly.基于 WebAssembly 的表格函数计算架构Part.2Topic.由来以及架构的演进既然已经有 JS 函数计算引擎了，为什么要有 Wasm 函数计算引擎？为什么要有 Wasm 函数计算引擎原因1 旧版本的函数计算引擎的性能不足以支撑更大规模的计算5000.ms210.ms旧版计算引擎旧版计算引擎新版计算引擎新版计算引擎*一百万个公式规模下新旧计算引擎的计算

5、耗时对比20 x faster!为什么要有 Wasm 函数计算引擎原因2 JS 逻辑逆向成本较低，难以保护核心算法资产执行流程混淆变量名混淆函数名混淆*如图是一份经过良好混淆的 JS 代码为什么要有 Wasm 函数计算引擎原因3 后台与 Native 客户端急需函数计算能力，现在只有 JS 版，若嵌入 V8 复用 JS 代码成本过高函数计算引擎后台服务Go客户端Flutter(Dart)函数后台(函数结果直出)函数计算（函数本地计算）为什么要有 Wasm 函数计算引擎原因1 旧版本的函数计算引擎的性能不足以支撑更大规模的计算原因2 JS 逻辑逆向成本较低，难以保护核心算法资产原因3 后台与 N

6、ative 客户端急需函数计算能力，若嵌入 V8 复用 JS 代码成本过高用 C+重写函数计算引擎.so(shared object)Native 客户端Flutter(Dart)C+函数计算引擎.so(shared object)后台服务GoC+函数计算引擎后台服务Go前端JS客户端Flutter(Dart)独立维护 JS 和 C+的函数计算引擎成本太高前端如何复用C+函数计算引擎？.so(shared library).so(shared library)前端如何复用 C+函数计算引擎？C+函数计算引擎后台服务Go前端JS客户端Flutter(Dart).so(shared library