小程序终端技术架构

 小程序终端技术架构

D226fdd4b353d92a66a1ef71539357f8?s=128

yiminghe

March 30, 2019
Tweet

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

  34. None