张志坚 基于小程序技术栈的微信客户端跨平台实践
2020-03-01 390浏览
- 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 能否解决性能和体验问题
- 49.
- 50.
- 51.
- 52.
- 53.
