【腾讯赵裕】跨平台自渲染UI引擎在Web平台的探索之旅.pdf

1、跨平台自渲染UI引擎在Web平台的探索之旅赵裕 腾讯-客户端工程师关于我 赵裕腾讯-客户端开发（2018至今）腾讯学堂优秀讲师 Flutter内核源码剖析 长期深耕跨平台UI引擎领域PART 1背景简介：跨平台与WebAssemblyPART 3深度优化：从可用到好用PART 2牛刀小试：从Mobile/PC到WebPART 4落地展望：从技术到业务Part 1背景简介：跨平台与WebAssembly跨平台技术的历史 更高的代码复用度更定制化的渲染能力JS EngineWeb RenderHostDev FrameworkJS EngineNativeRenderHostDev Framewo

2、rkAOTRuntimeCustom RenderHostDev FrameworkWebAssembly简介 二进制格式的指令集 基于栈的虚拟机 可作为多种语言(C+/Rust)的编译目标 可运行在Web客户端(如浏览器)和服务器Java Applet JavaScript asm.js&NaCI Wasm WASI跨平台&Web跨平台UI自渲染WasmFigma/AutoCADVSCodeWasmEdge游戏引擎工业软件UI框架ReactHippyWeexFlutter一个基于自渲染方案实现的跨平台UI引擎，在Web平台的实现（基于Wasm）Part 2牛刀小试：从Mobile/PC到We

3、b为什么需要支持Web平台？支持Web平台，有哪些技术方案？HTML+CSS+JS WebAssembly使用Wasm的收益有哪些？使用Wasm的挑战有哪些？工具链(1)：大型跨平台工程如何从C+到 Wasm$cat test.cc#include int main()printf(Hello Worldn);return 0;$emcc test.cc-o test.html$lstest.cc test.html test.js test.wasm理想use emcc as a drop-in replacement for gcc工具链(1)：大型跨平台工程如何从C+到 Wasm现实1.

4、项目文件多，依赖关系相对复杂,通常基于CMake/GN/Bazel组织2.每个平台存在一定数量的胶水代码，如Java/OC/JS/TS3.存在对三方库的依赖(.a/.so)，需要构建对应的Wasm制品4.本身的场景与宿主有复杂的交互，不是一个功能单一的模块脱敏工具链(2)：解构Emscripten+CMake构建方法一：emcmake cmake.&emmake make-j20方法二：cmake.-DCMAKE_TOOLCHAIN_FILE=/path/to/Emscri pten.cmake&make-j20上层视角：Wrapper底层视角：交叉编译工具链(3)：开发&调试体验-g3-gs

5、ource-map-source-map-base=http:/127.0.0.1:6931/Dev ToolsBuild SucessBuild Sucess !=Run Success1.Web的线程机制和Wasm的内存模型决定了其对多线程支持的复杂性2.与平台能力（如事件输入、VSync）的对接需要针对Web平台重新实现，其他能力可复用3.渲染（Path、图片、文字）需要对接WebGL4.etc.Web适配(1)：Wasm线程的局限性与适配RunLoop&TaskRunner：优雅的隔离物理线程！Web 多线程：完成度很低！std:threadSystem VSyncCustom Tri

6、ggerRunLoopTaskDriverTaskRunnerTaskTask多线程默认关闭，相关提案目前处于实验阶段，浏览器支持程度不一非主线程的UI访问（Canvas元素）有限制UI&Raster&Platform&IOWeb适配(2)：C+与JavaScript的互操作C+与JavaScript交互的常见场景：1.平台事件：键盘、鼠标、手势 2.调用特殊的平台能力，如访问文件 3.复用平台能力，见后文.方法比较(JavaScriptC+)：1.ccall/cwrap 2.WebIDL-Binder 3.Embind方法比较(C+JavaScript