MIUI前端技术栈产品优化

Platform SDK
Distribution
App Manager
Platform Services Discovery Distribution App Services
Analytics
Repository
Developer Services
加载体验
• 界面与数据分离加载 • 首次使用
• 初始大小
MIUI前端技术栈产品优化
技术创新，变革未来
MIUI直达服务平台
• 应用和网页服务形态的问题 • 新的服务形态特点 • 用户体验提升
• 开发者获益
• 平台提升效率
体验效果展示
列表滚动 标签滑动 复杂页面 …
* 均为线上真实场景
为什么Web应用体验不好？
Web应用体验问题
功能缺失
加载体验
性能较差
App Services
Push
Render Engine WebKit Native
Hybrid Bridge Bridge Permission
Account
Payment
JS Engine
Operating System
Analytics
架构 - Platform
Entrance App
Application Platform Runtime Sandbox Applications
视图复用
• 相同节点的识别与移动 • unique id • 相同类型的视图复用 • view type • 窗口区域
• 滚动策略
View Change
Render
Display
JS
Native
流程并行
• JS线程与UI线程 • diff在哪里做
16ms
• vsync与帧控制
JavaScript Parse Style Layout Paint Composite Rasterize
• offset的选择 • 必要的同步
Frame
• 应用拆分 • 后续使用 • 离线缓存
• 应用更新
性能优化
功能重组
虚拟DOM
合并调用
流程并行
视图复用
功能重组
• 灵活 vs 性能 • 简化
• 布局：盒模型 + Flex布局
• 增强 • 列表组件、标签组件 • 前置
• JS框架、虚拟DOM
虚拟DOM
• 操作代价低 • 避免同步layout • 批量比较差异
• 传输消耗
能否抛开浏览器的束缚？
新思路：MIUI直达服务平台
架构 - Runtime
Application Framework Widgets Page Router Features MVVM
Built-in Widgets WebKit Native
Built-in Features System Service
• 批量提交改动
合并调用
Web Browser
JavaScript Engine
DOM API
Layout Engine
渲染流程
JS Callback
JS Event
Native Event
JS Listener
Native Listener
Data Chawenku.baidu.comge
VDOM Diff
Batch Submit
浏览器内核渲染流程
16ms
JavaScript
Parse
Style
Layout
Paint
Composite
Rasterize
Frame
性能瓶颈
DOM操作
动画
单线程
WebView
• 同步layout • 解析文本 • 外部调用
• DOM动画 • setTimeout
• 兼容性 • worker局限