MIUI前端技术栈产品优化.pptx

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