MIUI系统框架负责人董红光 - 新平台:优化前端技术栈产品体验新思路

祖鹤骞

2017/11/14 发布于 技术 分类

传统前端开发,大多数情况下只能通过纯粹前端的手段对产品的性能体验进行优化,受限于Web平台的束缚,优化效果有限,与原生应用的差距不小,小米直达服务是小米的一个应用开发平台,使用前端技术栈开发,但体验可以达到原生应用的效果,分享的内容主要围绕直达服务平台的性能体验优化原理展开,展示如何使用新的平台思路,跳出Web平台,对前端技术栈进行深度优化,以达到原生应用的体验效果。

文字内容
1. MIUI
2. MIUI • • • • •
3. … *
4. Web
5. Web
6. 16ms JavaScript Parse Style Layout Paint Composite Rasterize Frame
7. DOM • layout • • • DOM • setTimeout • • worker WebView •
9. MIUI
10. - Runtime Widgets Application Framework Page Router Features Built-in Widgets WebKit Native Built-in Features System Service Render Engine WebKit Native Hybrid Bridge Bridge Permission JS Engine Operating System MVVM App Services Push Account Payment Analytics
11. - Platform Entrance App Platform SDK Application Platform Runtime Sandbox Distribution App Manager Applications Platform Services Discovery Distribution Analytics Repository App Services Developer Services
12. • • • • • • •
13. DOM
14. • vs • • • • • • JS + Flex DOM
15. DOM • • layout • •
16. Web Browser JavaScript Engine DOM API Layout Engine
17. JS Callback JS Event Native Event JS Listener Native Listener Data Change VDOM Diff Batch Submit View Change JS Native Render Display
18. • JS UI • diff • vsync • offset • 16ms JavaScript Parse Style Layout Paint Composite Rasterize Frame
19. • • unique id • • view type • •
20. MIUI