西萌 探索海量数据的实时渲染

1. D2 · ⻄西萌 · 阿⾥里里数据-数据可视化 探索海海量量数据的实时渲染
3. 图⽚片来⾃自⽹网络
6. 背景
7. 背景 架构 底层 框架层
8. 背景 我们需要更更⾼高性能的前端技术
9. 背景 JavaScript的性能突⻜飞猛进,⾜足以应对常规场景
10. 背景
12. 背景 架构 底层 框架层
13. 架构 海海量量数据处理理 · ⼤大规模实时绘制 · 复杂场景编排
14. 架构 底层技术演进路路线
15. 架构 Atomic Web Worker HTTP/2 WebRTC Web Assembly SIMD Indexed DB WebGL2 Shared ArrayBuffer ASM.js Worklet
16. 架构
17. 架构
18. 背景 架构 底层 框架层
19. 底层加速 WebWorker · WebAssembly · WebGL2
20. 底层 WebWorker · WebAssembly · WebGL2 WebWorker 不不要虚,⼤大胆上 现状 收益 限制 ⼯工作流
21. 底层 现状 Worker: MessageChannel: WebWorker · WebAssembly · WebGL2
22. 底层 收益 WebWorker · WebAssembly · WebGL2
23. 底层 限制 WebWorker · WebAssembly · WebGL2 Overhead Structure Isolation 异步通信造成的延迟 通信、Event、Buffer造成的GC 序列列化反序列列化造成的阻塞 … Worker只能由渲染线程创建 只⽀支持简单星型结构 环境完全隔离造成的依赖问题 CPU only Bundlers 如果你的性能瓶颈是内存IO⽽而⾮非CPU计算 那么多线程本身就对你没有任何益处 与前端构建系统的艰难配合
24. 底层 ⼯工作流 WebWorker · WebAssembly · WebGL2 ⼯工程化⽅方案 动态执⾏行行 · 静态编译
25. 底层 parallel.js • 上下⽂文是丢失的 • 依赖环境 • 预编译器器与打包⼯工具不不可控 >> 只适⽤用于功能简单的纯函数 ⼯工作流 WebWorker · WebAssembly · WebGL2
26. 底层 Webpack worker-loader • 正确打包依赖和预处理理 • 包体积巨⼤大,DataURI基本⽆无法压缩(包括GZip) >> 适合顶层应⽤用,不不适合类库 ⼯工作流 WebWorker · WebAssembly · WebGL2
27. 底层 复杂结构? ⼯工作流 WebWorker · WebAssembly · WebGL2
28. 底层 MessageChannel! ⼯工作流 WebWorker · WebAssembly · WebGL2
29. 底层 WebWorker · WebAssembly · WebGL2 WebAssembly 这个螃蟹可以吃 现状 收益 限制 ⼯工作流 未来
30. 底层 WebAssembly(MVP): -> asm.js -> JavaScript 平滑降级 现状 WebWorker · WebAssembly · WebGL2
31. 底层 现状 已⽀支持 数值 运算 MVP Post MVP 待⽀支持 多线程 线性内存 快速 加载 JS交互 断点调试 WebWorker · WebAssembly · WebGL2 快速 计算 编译器器* SAB SIMD 模块化 块内存 操作 64位 编译器器 (稳定版) 尾递归 多值返 回 JS类型 映射 …
32. 底层 收益与限制 WebWorker · WebAssembly · WebGL2 WASM的性能是JS的____倍? A. B. C. D. E. 7倍 5倍 2倍 没啥区别 ⽐比JS还慢 F. 以上都是可能的 • JS对常⽤用逻辑的性能优化⼗十分有效 • WASM MVP版本⽀支持的功能有限 • 与JS交互的overhead • ⾸首次进⼊入的延迟 • 编译器器仍处于试验阶段 • emscripten⽣生成的胶⽔水函数和限定交互⽅方式 • 你对JS以及C的优化经验 通过正确的⽅方式使⽤用,可以为你的程序带来不不同程度⽽而的性能提升
33. 底层 ⼯工作流 WebWorker · WebAssembly · WebGL2 不不得不不提的Emscripten Emscripten的设计⽬目标是 把使⽤用C++/OpenGL等⾮非Web端技术编写的 应⽤用编译成能在浏览器器中运⾏行行的Web版本 Emscripten • 不不是为WASM⽽而设计的 • 不不是为函数/模块级优化⽽而设计的 • 不不是为前端⼯工程师设计的
34. 底层 ⼯工作流 针对瓶颈模块/函数的优化 WebWorker · WebAssembly · WebGL2
35. 底层 ⼯工作流 WebWorker · WebAssembly · WebGL2 编译纯净WASM模块 编译脚本 https://gist.github.com/gaomeng1900/c0d0b06162e1d37a5323413457e1ea81 编译时间较⻓长,测试的话可以使⽤用 https://wasdk.github.io/WasmFiddle/
36. 底层 基础调⽤用 ⽆无压⼒力力 ⼯工作流 WebWorker · WebAssembly · WebGL2
37. 底层 数组传⼊入 ⼯工作流 传⼊入的是指针和数组⻓长度 WebWorker · WebAssembly · WebGL2 线性内存控制 数组直接写⼊入线性内存 C⻛风格调⽤用
38. 底层 数组返回 ⼯工作流 WebWorker · WebAssembly · WebGL2 在JS端管理理内存,传⼊入返回数组的头指针和⻓长度 *标准库
39. 底层 未来 WebWorker · WebAssembly · WebGL2
40. 底层 WebWorker · WebAssembly · WebGL2 2 WebGL 2 现状 投产 ⽅方案 GL2 优势 降级 ⽅方案
41. 底层 现状 WebWorker · WebAssembly · WebGL2 标准已经稳定,普及率⼀一般 ⼩小规模部署 · 降级⽅方案
42. 底层 投产⽅方案 luma.gl BabylonJS WebWorker · WebAssembly · WebGL2 three.js PlayCanvas
43. 底层 GL2 WebWorker · WebAssembly · WebGL2
45. 底层 优势 WebWorker · WebAssembly · WebGL2
46. 底层 降级 WebWorker · WebAssembly · WebGL2
47. ⼀一次实际场景的性能优化 过程实录
48. 需求
49. 瓶颈定位
50. 需求 把原始数据重新排布成绘制需要的格式
51. 需求 瓶颈 定位 Layout函数
52. ⾸首轮优化
53. 需求 瓶颈 定位 优化 改写成C语⾔言,编译成纯净的WASM模块
54. 需求 瓶颈 定位 优化 性能提升 90+% 原始JS 输⼊入: 60W个随机数 单位: ms 环境: 15’MBP 2015 chrome 原始JS直接改写成C 0 2.25 4.5 6.75 9
55. 2轮
56. 需求 瓶颈 定位 优化 JS逻辑优化 展开循环 减少中间变量量 时间/空间局部性优化 *当前代码仍有优化空间,⾮非最优解 优化
57. 需求 瓶颈 定位 优化 优化 性能收益远⼤大于直接改写WASM 原始JS 原始JS直接改写成C 输⼊入: 60W个随机数 单位: ms 环境: 15’MBP 2015 chrome 优化JS 0 2.25 4.5 6.75 9
58. 3轮
59. 需求 瓶颈 定位 优化 优化 直接改写成C 编译成纯净WASM *当前代码仍有优化空间,⾮非最优解 优化
60. 需求 瓶颈 定位 优化 优化 优化 原始JS 原始JS直接改写成C 优化JS 输⼊入: 60W个随机数 单位: ms 环境: 15’MBP 2015 chrome 优化JS直接改写成C 0 2.25 4.5 6.75 9
61. 需求 瓶颈 定位 优化 优化 优化 结论 你写代码的⽔水平 对性能的影响远⼤大于⼯工具
62. 4轮 后来,数据量量⼜又增加了了……
63. 需求 瓶颈 定位 优化1 优化2 3个Worker的 map/reduce 优化3 结论 优化4
64. 需求 瓶颈 定位 优化1 优化2 优化3 结论 优化4 原始JS 原始JS直接改写成C 深度优化JS 深度优化JS直接改写成C 输⼊入: 60W个随机数 单位: ms 环境: 15’MBP 2015 chrome +拆分Worker 0 2.25 4.5 6.75 9
65. 5轮 后来……
66. 需求 瓶颈 定位 优化1 优化2 优化3 结论 优化4 优化5 WebGL2 扔给GPU Transform Feedback + copyBufferSubData 实质是将计算与内存读写压⼒力力转移给GPU,不不适合⽣生产环境
67. 需求 瓶颈 定位 优化1 优化2 优化3 结论 优化4 优化5 原始JS 原始JS直接改写成C 深度优化JS 深度优化JS直接改写成C 输⼊入: 60W个随机数 单位: ms 环境: 15’MBP 2015 chrome +拆分Worker * CPU端时间 WebGL2 GPGPU 0 2.25 4.5 6.75 实质是将计算与内存读写压⼒力力转移给GPU,不不适合⽣生产环境 9
68. 背景 架构 底层 框架层
70. 以上 D2 · ⻄西萌 · 阿⾥里里数据-数据可视化 探索海海量量数据的实时渲染