Accueil Sujet library logo Bibliothèque Mon profil
Plus

飞猪跨端容器建设与思考

如果无法正常显示，请先停止浏览器的去广告插件。
分享至：
1. Flugy in Fliggy ⻜猪跨端容器建设与思考 ⻜猪用户技术 / 旅鹤 & 承荫
2.
3. 分享大纲 • ⻜猪跨端技术背景与挑战 • 跨端标准化基建 • ⻜猪 Web on Flutter 容器建设 • 未来展望
4. 分享大纲 • ⻜猪跨端技术背景与挑战 • 跨端标准化基建 • ⻜猪 Web on Flutter 容器建设 • 未来展望
5. ⻜猪跨端技术的背景和挑战 1. 前端的性能优化和客户端的动态性建设让两端逐渐走向借鉴和合作 2. 跨端技术实质是在「性能体验」与「研发效率/动态性」间找寻更佳平衡点的过程 3. 自渲染容器似乎是各个 App 不约而同的结果，但对需要跨端的业务开发确是痛苦不堪的 前端视⻆ 客户端视⻆ 研发效率 动态性 性能体验 H5 Hybrid 小程序 RN/Weex 动态模板 Flutter Native
6. ⻜猪跨端技术的背景和挑战 1. 各 BU App 平均接入和维护 3.15 套跨端方案，对应 2.75 套研发框架，80% 以上 BU 对渲染容器存在定制化诉求 2. ⻜猪业务⻚面至少投放 5个 App， 编写 3 套代码，适配各个渲染容器 3. 多容器多解决方案多 DSL 给业务开发带来极高的成本，本质来说是自渲染容器缺少标准的约束 React Rax Vue 小程序DSL Remax …… Webview Flutter Weex Cube AJX 小程序 支付宝 淘宝 ⻜猪 饿了么 淘特 微信 高德 UC 优酷 天猫 咸⻥ 字节
7. 分享大纲 • ⻜猪跨端技术背景与挑战 • 跨端标准化基建 • ⻜猪 Web on Flutter 容器建设 • 未来展望
8. 跨端标准化基建 业务项目 统一研发框架（JSFramework） 标准化容器（Web子集BOM/DOM/CSSOM） 渲染容器 Weex AJX CUBE 淘宝 高德 支付宝 遵循W3C规范，以Web标准的方式进行跨端标准化建设 Flugy ⻜猪
9. 跨端标准化基建 - 标准化容器 目标：构建能力⻬平的多端渲染容器 核心：制定和推进渲染容器分层标准落地 • CSS 标准 • Web API 标准 • 桥通道标准
10. 跨端标准化基建 - 标准化容器 容器自有规范 W3C标准规范 标准规范子集 高性能标准子集 遵循W3C和WHATWG标准的子集分层
11. 跨端标准化基建 - 标准化容器 CSS M0：133 条 CSS 属性 M1：5 条 CSS 属性 基于 W3C 标准子集 Web API M0：20 个 API 的 178 个属性 M1：11 个 API 的 82 个属性 基于 W3C/WHATWG 标准子集 桥通道 支持异步/同步调用协议 统一桥通道 API 设计
12. 跨端标准化基建 - 统一研发框架 业务框架 Vue Rax Remax 小程序DSL DX XML Dart DinamicX Flutter 构建 Weex Bundle 构建产物 JS Bundle 小程序 Bundle 部署 渲染容器 Weex AJX Webview Cube 多DSL方案，让业务开发者在选型和维护上耗费巨大精力
13. 跨端标准化基建 - 统一研发框架 Rax Driver Spec 机制 Driver-dom Driver-weex Driver-server Driver-miniapp Webview/Flugy Weex NodeJS 小程序 implement Weex Driver
14. 分享大纲 • ⻜猪跨端技术背景与挑战 • 跨端标准化基建 • ⻜猪 Web on Flutter 容器建设 • 未来展望
15. Flugy - ⻜猪Web On Flutter 实践 WebView Web on Flutter • ⻓列表性能/复杂交互体验问题 • 继承 Flutter 优点（性能，一致性） • 系统 WebView 兼容性/一致性问题 • 提升 Flutter 动态性能力 JS Bundle 前端优势 完备生态 Flugy 动态能力 高性能 Flutter 跨端 WebView Flutter优势 Bridge GPU 渲染一致性 Foundation Video Audio 将Web代码运行在Flutter引擎上 WiFi GPS Sensor
16. Flugy 渲染过程 JS Bundle 渲染指令 Flutter Widget Tree Flutter渲染上屏
17. Flugy - 流程图 Web Web API Web 代码 构建 Element Flutter Flugy Eval JS JS Bundle CSS 调用 JS 方法 V8/JSC 调用 Dart 方法 JSI 调用 JS 引擎 Dart FFI Binding Flutter 扩展组件 Web API 渲染指令 Flutter Framework CSS 解析 Element Render Engine Framework 生成widget Engine Embedder 事件回调 Android iOS
18. Flugy 实现原理 - DOM 树映射 DOM树 构建指令 Widget树 createElement(body) body createElement(div) BodyWidget createElement(span) body.appendChild(div) div span body.appendChild(span) DivWidget 还记得Flutter是响应式框架吗 setState [] State Children 更新渲染 ⻚面 SpanWidget
19. Flugy 实现原理 - CSS 映射 让我们来实现一个如下图的效果吧： 构建 CSS Style 03 固顶的文字 Positioned 渲染指令 createElement、appendChild等 Align Container 01 卡片容器 Stack Container 02 背景图 Container DecorationImage NetworkImage 卡片定位模式：position Text 定位：top、left 文字对齐方式：text-align 背景色：background-color 边框：border 圆角：border-radius 文本颜色：color 字体大小：font-size 卡片宽高：width、height 图片宽高：width、height 图片填充模式：background-size 图片地址：background-image 04 底部对齐的价格 Flex Expanded 排列方向：flex-direction 副轴对齐方式：align-items 弹性空间分配：flex
20. Flugy 实现原理 - CSS 树映射难点 1 P o s i ti on DIV 在遇到脱离文档流的复杂情况时，不仅影响到 自身定位，同时会影响到父容器中后续子元素 的排布，这种不稳定的关系给属性映射带来非 非定位 DIV DIV 常大挑战 当解析到脱离文档流的元素，在原父元素中 D元素 D元素 非定位 Div 占位；另外创建“副本”，向上寻找目标父容 器，找准位置，通过实现高效的通讯组件， D元素 占位 优化组件查找效率 D 元素 position：static D 元素 Position：absolute
21. Flugy 实现原理 - CSS 树映射难点 2 O ve r f l o w ：visibl e Web 中子元素可以比较灵活的设置成可超出 父容器边界，而 Flutter 中 Overflow 有诸 O v er f l ow ： v i s i b l e 多限制满足不了 W3C 标准 实现自定义的RenderObject支持 O v er f l ow ： v i s i b l e overflow：visible，并封装成相应的 Widget组件，各种容器类组件都有其对应扩 展组件，例如CssScrollView,CssFlex, CssWrap 子元素显示超出父容器边界 Widget Tree
22. Flugy 实现原理 - CSS 树映射难点 3 A n i ma tio n Web 中动画属性简单灵活，对容器的解析和 构建提出了不小的挑战 @keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:100px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} } 先与元素原本属性做匹配，筛选出需要做动画的属性，根据 css 的动画 百分比，创建一组动画对象，通过 AnimatedContainer 实现动画
23. Flugy 的性能优化 - 1 列表 优化 映射 Web ⻚面布局，通过 SingleChildScrollerView 模拟 Web 滑动列表，会在滑动过程中不断触发每个子元素的重绘，引 起滑动卡顿 1 1 2 RePaint Boundary 2 3 4 5 3 6 4 5 6 1.根据场景合理使用RePaintBoundary，通过新建图层，减少不 必要的重绘，提升滚动性能 2.定制列表组件，映射到Flutter List组件，具备更高的滚动性能
24. Flugy 的性能优化 - 2 滑 动 插 值器优 化 在 Flutter 中为了模拟现实世界的物理运动，使用 Simulation 来计算惯性滑动过程中 的滚动offset，而当⻚面有卡顿时（丢1帧，dt2 = 1/60*2），计算出的滚动offset会 放大，从而加剧了视觉上的顿挫感 自定义改造 Simulation，固定 时间间隔在1/60 s，在惯性滚动 上，视觉体验上会有比较大的提 升，对帧率没有影响
25. Flugy 的性能优化 - 3 圆⻆ 性能 优化 div 元素设置了 overflow:hidden ，在属性映射上 Flugy 会对容器类 Widget 设置 clipBehavior 属性，可能会导致 ClipPathLayer 的创建或者 saveLayer() 的调用， 这些都会产生性能消耗 优化方案：用 DecorationImage 来展示 帧率 UI耗时(ms) Raster耗时 (ms) ClipPath实现 圆⻆ 21 9 31 非ClipPath实 现圆⻆ 38 8 13 图片，通过外层 Container 的 Decoration 来配置实现圆⻆功能 注：限制开启父元素的剪裁特性，通过给 父元素和子元素都加上圆⻆能对应到上面 优化分支，对前端开发有一定限制 某低端手机性能表现
26. Flugy 的性能优化 - 4 N SR Flutter渲染速度非常快，通过提前加载JS Bundle，缓存 生成好的Flutter Widget，可以实现直出的渲染效果 NSR 预加载流程 加载URL 生成渲染指令 预构建Widget Tree 缓存NSR Widget Tree 加载 NSR 加载 URL 绑定PreNSR⻚面 NSR 缓存？ 获取缓存的NSR WidgetTree 绑定⻚面
27. Flugy 的整体架构设计
28. 分享大纲 • ⻜猪跨端技术背景与挑战 • 跨端标准化基建 • ⻜猪 Web on Flutter 容器建设 • 未来展望
29. 展望 挑战型 • 计划在一款小型 App 全面落地 Flugy，验证方案的可靠性 ，对标 WebView • Flutter 混合开发深度探索，通过 Flugy 结合 Dart 和 JavaScript 技术栈，兼顾性能和动态性，找到最佳实践 承诺性 • 多端小程序方向，通过一码多端，发布平台建设减小多端部署的成本 • 渲染引擎方向，和 UC 内核合作，对 H5 ⻚面性能做针对性优化，例如⻓列表滚动
30. Thanks 欢迎加入⻜猪旅行 客户端：lvhe.zc@alibaba-inc.com 前端：hengfei.whf@alibaba-inc.com
31. 副标题

Accueil - Wiki
Copyright © 2011-2024 iteam. Current version is 2.137.1. UTC+08:00, 2024-11-17 02:29
浙ICP备14020137号-1 $Carte des visiteurs$