张志坚 基于小程序技术栈的微信客户端跨平台实践

前端狗

2019/07/09 发布于 编程 分类

GMTC2019 

文字内容
1. 基于小程序技术栈的 微信客户端跨平台实践 张志坚 腾讯微信高级工程师
2. 自我介绍
3. 自我介绍
4. 自我介绍 张志坚 曾就职于阿里 UC 浏览器内核团队,主要从事浏览器内核方向 2018 年加入微信团队,目前主要从事跨平台方向,从基于 C++ 的跨平台 UI 框架到基 于小程序的跨平台框架研发,推进跨平台方案的极致体验和高效开发
5. 目录 一、微信客户端的跨平台实践 二、小程序与微信客户端 三、基于小程序技术栈的微信客户端跨平台实践 四、展望未来
6. 目录 一、微信客户端的跨平台实践 二、小程序与微信客户端 三、基于小程序技术栈的微信客户端跨平台实践 四、展望未来
7. 微信跨平台实践 — 组件 2011 2012.9 上线 注册用户2亿 2012. 10 “雪崩”事件 跨平台组件
8. 微信跨平台实践 — 组件 Symbian network Mars-priv Android network iOS network “mmnet” 统一逻辑 专项优化迭代 (“雪崩”、安全策略、异常) (弱网、容灾等) Mars
9. 微信跨平台实践 — 新业务开发 微信新业务开发 特点 鼓励创新 快速试错 体验一致 稳定生态
10. 微信跨平台实践 — 新业务开发 小程序带来了 新的业务开发模式 小程序形式的业务开发 广受内部认可
11. 微信跨平台实践 微信跨平台—目标 减少平台差异性 提高开发效率 原生的 性能和体验 易学的 可控技术栈
12. 目录 一、微信客户端的跨平台实践 二、小程序与微信客户端 三、基于小程序技术栈的微信客户端跨平台实践 四、展望未来
13. 小程序技术栈分析 开发工具完善 基于前端体系 可动态发布 性能和体验接近原生 可自定义扩展 可跨多平台
14. 小程序技术栈分析 小程序技术栈特点 微信跨平台目标 ○ 开发工具完善 ○ 减少平台差异性 ○ 前端生态体系 ○ 提高开发效率 ○ 灵活的动态部署 ○ 易学的可控技术栈 ○ 性能和体验接近原生 ○ 原生的性能和体验 ○ 可自定义扩展 ○ 跨平台
15. 体验的问题
16. 性能的问题
17. 小程序技术栈 微信跨平台—目标 减少平台差异性 提高开发效率 原生的 性能和体验 易学的 可控技术栈
18. 目录 一、微信客户端的跨平台实践 二、小程序与微信客户端 三、基于小程序技术栈的微信客户端跨平台实践 四、展望未来
19. 小程序技术栈系统架构 PageView x N APP Service x 1 WXML + WXSS JavaScript (app.js) WXA Framework WXA Framework + JSAPI WebView JS Engine JS Bridge 存储 网络 授权 Host 开放能力
20. React-Native-Like 渲染优化 NativePageView x N APP Service x 1 WXML* + WXSS* JavaScript (app.js) 思路——“20/80 RULE” WXA Framework WXA Framework /JSAPI ○ WebView 比客户端复杂 ○ 原生控件树渲染 Android View + v8 engine JS Engine ○ 非完整 wxss/wxml 支持 ○ 渲染失败回滚到 WebView JS Bridge 存储 网络 授权 Native 开放能力
21. React-Native-Like 渲染优化 解决了体验问题 l 字体不一致 l 视频、地图等同层渲染 l 文本输入框 l 性能提升
22. React-Native-Like 渲染优化 解决了体验问题 引入了新的问题 ● 实验环境 ○ Google Pixel 2 XL @Android 7.1 ○ 微信 7.0.3 开发版 l 字体不一致 ○ 表情商店 ○ WebView/RN-Like/原生 l 视频、地图等同层渲染 ● FPS l 文本输入框 l 性能提升 ○ 比 WebView 提升 27.5%
23. ReactNative-Like 渲染优化 解决了体验问题 ● 内存占用 ○ 比 WebView 下降 l 字体不一致 l 视频、地图等同层渲染 l 文本输入框 l 性能提升 引入了新的问题 14%~23%
24. React-Native-Like 渲染优化 解决了体验问题 引入了新的问题 l 字体不一致 l 视频、地图等同层渲染 l 重复资源投入 l 文本输入框 l 多平台维护 l 性能提升
25. React-Native-Like 渲染优化 解决了体验问题 引入了新的问题 l 字体不一致 l 视频、地图等同层渲染 l 重复资源投入 l 文本输入框 ➔多平台维护 l 性能提升
26. React-Native-Like 渲染优化 为什么不直接引入 React Native 做跨平台开发? 1. 客户端中已经存在小程序框架,引入另一套框架的必要性不足 2. 反向提升微信小程序的体验
27. Flutter
28. Flutter Benchmarks
29. Flutter Benchmarks
30. Flutter 渲染优化 PageView x N APP Service x 1 WXML* + WXSS* JavaScript (app.js) Flutter 渲染优化 WXA Framework WXA Framework /JSAPI ○ 使用 Flutter Widgets Tree 渲染 ○ 非完整 wxss/wxml 标准支持 Flutter + JS Engine Engine ○ 渲染失败回滚到JSWebView ○ 主要代码 dart/cpp 跨平台 JS Bridge 存储 网络 授权 Host 开放能力
31. 小程序技术栈视图渲染的抽象结构 WXML* + WXSS* WXA Framework Layout+ CSS-lite DOM-lite JS Engine (V8/JSC) Renderer Android/iOS Flutter WebView
32. 小程序视图体系 - LV-CPP WXML* + WXSS* ● LV-CPP ○ 跨平台的小程序 UI 体系处理器 WXA Framework C/C++ ○ 布局、事件响应 ○ 多重后端支持 Layout+ CSS-lite DOM-lite JS Engine (V8/JSC) ○ Flutter 不是唯一渲染后端 ○ 公共库前端与渲染后端的中介 Renderer Android/iOS Flutter WebView
33. 两个通信的问题 WXML* + WXSS* WXA/JavaScri pt World WXA Framework 1.JavaScript 与 C++ 通信 2.C++ 与 Dart 通信 Layout+ LV-CPP/C++ World CSS-lite DOM-lite JS Engine (V8/JSC) Renderer Flutter/Dart World Android/iOS Flutter WebView
34. JS 的通信 - JS Bridge JavaScript API V8 blink jni Invoke Java JavaScriptInterface (Android WebView) ● 平台相关 ● 复杂度
35. JS 的通信 - JS Binding JavaScript API JavaScript API V8 blink jni JavaScriptInterface (Android WebView) JSEngine (V8/JSC) Invoke Java C++ JS Binding (C++)
36. Flutter 的通信 - Platform Channel
37. Flutter 的通信 - dart2cpp Dart Dart VM Customized Flutter Engine in C++/Dart 自定义实现 Flutter Engine dart2cpp C++
38. Flutter 的通信 - dart2cpp Dart Dart VM tonic dart2cpp C++ Customized Flutter Engine in C++/Dart
39. Flutter 的通信 - js2dart JavaScript API Dart Dart VM JSEngine (v8/JSC) JS Binding in C++ tonic dart2cpp C++ Customized Flutter Engine in C++/Dart
40. Flutter 渲染优化 - 视图体系 WXA/JavaScri pt World WXML* + WXSS* JavaScript WXA Framework C/C++ Layout+ LV-CPP/C++ World CSS-lite JS Engine (V8/JSC) DOM-lite JS Binding Renderer C/C++ Flutter/Dart World Flutter Engine Dart dart2cpp Dart VM Flutter Framework tonic
41. Flutter 渲染优化 - 整体系统架构 APP Service x 1 PageView x N WXML* + WXSS* JavaScript (app.js) WXA Framework CSS-lite Layout+ JS Engine DOM-lite JS Binding WXA Framework + JSAPI Renderer “dart2cpp” Flutter Engine JS Engine Flutter Framework JS Bridge 存储 授权 网络 Host 开放能力
42. Flutter 渲染优化效果 - 体验细节 ● 字体:修改 Flutter Engine 实现一致性 ● 视频、地图:Flutter 支持 ● 文本输入框:Flutter 内嵌支持 ● Flutter 体系内部解决大多数同层问题
43. Flutter 渲染优化效果 - 内存 Flutter 渲染 ~233MB 下降 ~20% WebView 渲染 ~283MB
44. Flutter 渲染性能对比 - CPU ● Google Pixel XL @Android 9.0 ● Flutter Release Build ● 微信 7.0.5 开发版 ● 附近的餐厅(小程序) 39.8% 35.6%
45. Flutter 渲染性能对比 - FPS ● Google Pixel XL @Android 9.0 ● Flutter Release Build ● 微信 7.0.5 开发版 ● 附近的餐厅(小程序)
46. 从 RN-Like Renderer 到 Flutter Renderer Flutter 渲染解决的问题 仍遗留问题 l 字体不一致 l 视频、地图等同层渲染 l 文本输入框 l 性能提升 l 重复资源投入 l 多平台维护 l 性能提升仍有空间
47. 目录 一、微信客户端的跨平台实践 二、小程序与微信客户端 三、基于小程序技术栈的微信客户端跨平台实践 四、展望未来
48. OTHER WAYS Flutter 更多的想象空间 WebView 能否解决性能和体验问题