报告预览

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

编号：157173

PDF 39页 7.43MB 下载积分：VIP专享

下载报告请您先登录！

【腾讯赵裕】跨平台自渲染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)：1.emscripten_run_s

7、cript()2.EM_JS()3.EM_ASM()4.Embind val classWeb适配(3)：渲染与WebGLWeb平台不支持！Implemented,except it is not possible to call this function multiple times to create multiple render windows.VSync从哪来？Render A Gif ImageWeb适配(3)：渲染与WebGL离屏渲染：基于WebGLTexture的折中方案const canvas=document.getElementById(canvas);const gl

8、=canvas.getContext(webgl);const texture=gl.createTexture();Why Not:OffscreenCanvas+Web Worker?VSync：基于emscripten_set_main_loop()渲染适配(4)：图片与文字(基于Skia)隐患：包大小&能力扩展受限编入图片编解码库+字体资源小结交叉构建，基于强大的LLVM跨平台的设计，快速适配线程、交互、WebGL等限制Web平台的限制为后续留下了隐患：包大小、性能、扩展性Mobile BrowserPC Browser脱敏Part 3深度优化：从可用到好用好用的标准1.更快的启动时间

9、：加载+显示第一帧2.稳定流畅的帧率3.更低的内存/CPU占用Severhtmljswasmdata常规加载优化1.压缩Accept-Encoding:gzip,deflate2.裁剪设置最高的优化参数(-Os)-preload-file只保留首屏资源3.延迟非必要数据异步延迟加载4.缓存-use-preload-cache：IndexDB效果有限！包大小分布（静态库视角）包大小优化(1)：从Skia到TGFXSkiaTGFX更专注于硬件渲染，但也兼容软绘充分利用平台能力，精简库增量充分复用现代硬件的特性，如并发访问、硬件加速更安全、便捷的环境管理内部团队，沟通协作方便功能完备质量稳定生态成熟

10、https:/skia.org/https:/ metricsFont Family(Style)ligaturesanti aliasingemojisub-pixel alignmentKerningSwashesAtlas包大小优化(3)：文字渲染通用方案ICU+Harfbuzz+Freetype1.Freetype/Harfbuzz加载字体2.ICU处理文本3.计算布局信息4.获取字形并渲染5.导出6.资源释放与销毁包大小优化(3)：行业参考-FlutterWeb的中文字体支持懒加载blink包大小优化(3)：基于宿主的文字渲染1.读取系统字体列表，进行匹配2.以一段文字为输入，生成矢

11、量路径信息塑形：从字体获取字形排版：结合样式，生成每个字形的大小、位置信息生成Atlas纹理集（基于Web Canvas）3.生成TextBlob（以文字块为Key的纹理缓存）4.TextBlob(纹理)上屏Compare ToSkia脱敏效果总结ReleaseRelease+GZip压缩率Before(web_example.wasm)27M12M44%After(web_example.wasm)10M2.5M75%裁剪率62%79%Amazing ！C+/Resource Library Wasm gzip性能优化异步、缓存、预处理节点复用、UI扁平化局部绘制缓存：RasterCacheCPU-GPU批处理、延迟执行、无锁化使用Trick接口，减少跨语言、跨API通信Part 4落地展望：从技术到业务实践(1)：Web开发+Wasm渲染 Hippy To WebRender C+VDom CustomRender Wasm 实践(2)：复杂渲染场景下的无限可能（Beyond Web）无桌面环境的嵌入式系统高性能图表脱敏展望分包与动态加载能力多线程、WebWorker与离屏渲染Service Worker与自定义缓存Web特性：跨域/SEO/安全混合开发：内嵌Html与嵌入Html谢谢观看thanks

友情提示

1、下载报告失败解决办法
2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。
3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。
4、本站报告下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。

本文（【腾讯赵裕】跨平台自渲染UI引擎在Web平台的探索之旅.pdf）为本站（stock）主动上传，三个皮匠报告文库仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若此文所含内容侵犯了您的版权或隐私，请立即通知三个皮匠报告文库（点击联系客服），我们立即给予删除！

温馨提示：如果因为网速或其他原因下载失败请重新下载，重复下载不扣分。

上海品茶

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

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