小程序终端技术架构

Transcript

1. 小程序终端技术架构 何一鸣/承玉
2. 
    INTRODUCTION 2010 年加入阿里，先后负责 KISSY/ant-design/ant- design-mobile 等基础类库的架构和核心研发工作， 自 2016 起开始进行小程序相关工作，负责小程序前端 架构以及框架核心开发。 Github/Twitter/Gmail: yiminghe
3. 
    &217(176 架构 性能优化 后续发展
4.  
    JSCore 保活 机制 离线包 形式 精简 运行环境 扩展性 引入JSCore：小程序会创 建一个JSCore ，专门负 责逻辑处理，绑定所有页 面，页面只负责渲染，尽 可能提升每个页面的渲染 性能。 引入保活机制：当离开当 前小程序时，小程序会在 后台继续运行5分钟，再 次点击直接秒开。 小程序框架以离线包形式 在整个客户端层面统一管 理和更新，并且框架代码 会被UC内核统一缓存为 字节码，所有小程序业务 公用，减少业务包大小。 基础组件，统一api调用 方式，对于纯H5性能较 差的部分提供native实现 以提升性能（map、 input）。 npm第三方模块，自定义 组件，web-view。 3 5 体验差异小 4 5 6 7 小程序整体效果好，H5对开发者要求 高，产出结果体验差异较大 webview 渲染优化 同容器/内核结合优化框架渲染。 1 2
5. 
    DSL (acss/axml/js) Mini-App bundle 编译构建 Mini-App container 离线包下载执行 framework webview jscore video canvas …
6. 
    Components Framework Native SDK React WEBVIEW IDE DSL(template/css/js) js bundle build run
7. 
    JS Template CSS App Page Component
8. 
    App({ onLaunch() {}, onShow() {}, }) Page({ onLoad() {}, onUnload() {}, }) view {color: red} <view><C /></view> Component({ didMount() {}, didUnmount() {}, }) <view><C2 /></view> .c {color: green}
9. 
    onInit deriveDataFromProps
10. 
    
    
11. 
    
12.  
    JSCore Native App java/ios Page A webview Preloaded webview JSON bridge JSON bridge framework worker.bundle framework render.bundle framework render.bundle
13. 
     JSCore webview Page a js Page a css/template Page b js webview Page b css/template native render data ui event render data ui event api system event
14. page data/component data 为 json 格式 Ø 不能有复杂对象，例如 new Date() Ø 不能有循环引用，直接传输出错 Ø 不要直接修改 this.data, 使用 setData/$spliceData 异步渲染/事件 Ø setData：使用回调函数依赖渲染结果， setData(data, callback) Ø 只能静态阻止冒泡：catchTap 
    
15. 
    
16. 
     Native JSCore webview launch onLaunch page onLoad->onShow User Event render onReady handler re-render send data navigateTo onHide onShow webview init data
17. 
     &217(176 架构 性能优化 后续发展
18. 
     0 50 100 150 200 250 300 350 50 90 130 170 210 250 290 330 370 410 小程序中渲染耗时随DOM节点数的变化曲线 小程序中渲染耗时随DOM节点数的变化曲线
19. 
    
20. 
     0 50 100 150 200 250 300 1kB 2kB 25kB 50kB 75kB 150kB 300kB 500kB 1000kB 2000kB 数据传输耗时 (ms) 数据传输耗时 (ms)
21. $spliceData 指定路径修改数据 避免频繁调用 setData 控制 dataset 大小 
    
22. 
    
23. 
    
24. 
    
25. 
    
26. 
    
27. 
    
28. 
     避免过度调用同步 API AXML 中 for 指定 key
29. 背景 包大小限制为 3M 不满足复杂应用。 包大小过大，网络不佳场景下，小程序首页启动慢。
     完整包下载 主包下载 解压 校验 渲染 解压 校验 渲染 剩余包下载 解压 校验 首屏显示 现状： 4月：
30. 背景 首屏 loading 时间长。 启发自 server-side render。 
     首次打开 执行 JS save html 再次打开
31. 
     &217(176 架构 性能优化 后续发展
32. 
     分包加载 snapshot 插件组件 component2 AI 云开放 API …
33. 
     支付宝小程序 阿里小程序 AI