Vue开发小程序之性能优化.pdf

Vue开发⼩程序之性能优化 崔红保@VueConf.2019 主要内容 • 简介 ⼩程序开发⽣态，uni-app概念 • 实现⽅案 通⽤实现思路简介 • 优化⽅案 渲染性能、加载性能 • uni-app产品特征 和其它框架的区别差异 ⼩程序开发⽣态 wepy mpvue uni-app Megalo mpx Chameleon Taro nanachi 框架简介 • 继承⾃Vue.js 完整的 Vue.js 开发体验，彻底的组件化开发 能⼒，⽅便的Vuex数据管理⽅案 • 多端发布 uni-app 可以编译到App 、⼩程序、H5等多个 平台，保证其正确运⾏并达到优秀； uni-app 是⼀个使⽤Vue.js 开发跨平台应⽤的前端框架 实现⽅案 基本都是编译器 + 运⾏时配合实现 编译 运⾏时 uni-app ⼩程序 VueVue runtime ⽣命周期 ⽣命周期 事件函数 事件代理机制 事件函数 AppData 数据同步机制 Data 性能优化 • 启动加载性能 • ⻚⾯渲染性能 性能优化 - 渲染性能 uni-app ⼩程序 VueVue • ⼩程序负责视图渲染，⻚⾯dom由⼩程序负责⽣成 runtime • ⼩程序只接受 data 数据传递 ⽣命周期 • ⽣命周期 Vue 的 vnode 很难和⼩程序真实dom对应 • Vue 的 vnode 遍历对⽐维度复杂 事件函数 事件代理机制 事件函数 AppData 数据同步