Vue开发小程序之性能优化

1. Vue开发⼩小程序之性能优化 崔红保@VueConf.2019
2. 主要内容 • 简介 ⼩小程序开发⽣生态,uni-app概念 • 实现⽅方案 通⽤用实现思路路简介 • 优化⽅方案 渲染性能、加载性能 • uni-app产品特征 和其它框架的区别差异
3. ⼩小程序开发⽣生态 wepy mpvue uni-app Megalo mpx Taro Chameleon nanachi
4. 框架简介 • 继承⾃自Vue.js 完整的 Vue.js 开发体验,彻底的组件化开发 能⼒力力,⽅方便便的Vuex数据管理理⽅方案 • 多端发布 uni-app 可以编译到App、⼩小程序、H5等多个 平台,保证其正确运⾏行行并达到优秀; uni-app 是⼀一个使⽤用 Vue.js 开发跨平台应⽤用的前端框架
5. 实现⽅方案 基本都是 编译器器 + 运⾏行行时 配合实现
6. 编译
7. 运⾏行行时 ⼩小程序 uni-app runtime ⽣生命周期 Vue ⽣生命周期 事件函数 事件代理理机制 事件函数 AppData 数据同步机制 Data
8. 性能优化 • 启动加载性能 • ⻚页⾯面渲染性能
9. 性能优化 - 渲染性能 ⼩小程序 uni-app Vue • ⼩小程序负责视图渲染,⻚页⾯面dom由⼩小程序负责⽣生成 runtime • ⼩小程序只接受 data 数据传递 ⽣生命周期 ⽣生命周期 • Vue 的 vnode 很难和⼩小程序真实dom对应 • Vue 的 vnode 遍历对⽐比维度复杂 事件函数 事件代理理机制 事件函数 AppData 数据同步机制 Data Vue的vnode在⼩小程序端意义不不⼤大
10. 性能优化 - 渲染性能 Vue优化
11. 性能优化 - 渲染性能 ⼩小程序调⽤用setData更更新⻚页⾯面流程 逻辑层 (JS引擎) data Native 视图层 (webview)
12. 性能优化 - 渲染性能 减少调⽤用setData频次 nextTick机制⾃自动优化
13. 性能优化 - 渲染性能 减少调⽤用setData数据量量
14. 性能优化 - 渲染性能 减少调⽤用setData数据量量 • 改写Vue的patch实现,删掉vnode,仅Diff Data数据 • 借鉴 westore JSON Diff库,实现⾼高效、精确的差量量数据
15. 性能优化 - 渲染性能 ⾃自定义组件实现局部数据刷新
16. 性能优化 - 渲染性能 - 通⽤用建议 • 注意onPageScroll使⽤用 避免频繁通讯,部分场景考虑 InterSectionObserver 替代 • 避免后台⻚页⾯面执⾏行行JS逻辑 ⽐比如定时器器等 逻辑层 (JS引擎) pageScroll Native 视图层 (webview)
17. 性能优化 - 渲染性能 渲染性能优化测试结果 ⻓长列列表性能测试数据 点赞组件性能测试数据 Tips:⽼老老版uni-app是基于template模板编译,未经过上述优化措施
18. 性能优化 - 加载性能 • 改写Vue的patch实现,删掉vnode,仅Diff Data数据 框架⼤大⼩小,影响着⼩小程序加载性能体验
19. 性能优化 - 加载性能 - 通⽤用建议 • 分包加载 快捷创建项⽬目模板、代码块、真机运⾏行行、云端打包 • 开启上传时代码压缩 语法提示、转到定义强过其它⼯工具 • 资源⽂文件上传CDN 中⽂文符号⾯面⼲干扰,⾃自动补⾏行行尾逗号、智能双击
20. uni-app产品主要特征 画外⾳音:和其它框架有什什么区别?
21. uni-app产品介绍 • 性能更更好 不不吹不不⿊黑,数据说话,对性能⽅方⾯面确实⾃自信 • Vue语法⽀支持度更更⾼高 ⽀支持 filter、v-slot、原⽣生事件绑定等
22. uni-app产品介绍 • 跨端更更好 除了了各家⼩小程序,还⽀支持发⾏行行到App(iOS/Android)、H5平台,⼀一套代码,多端发⾏行行
23. uni-app产品介绍 • 跨端更更好 uni-app 已发布各⼤大平台
24. uni-app产品介绍 • 平台能⼒力力不不受限 在跨端的同时,通过条 件编译 + 平台特有API 调⽤用,轻松为特有平台 编写个性化代码 ⽀支持原⽣生代码混写和原 ⽣生SDK调⽤用
25. uni-app产品介绍 • 周边⽣生态更更更更丰富 复⽤用Vue⽣生态,⽐比如:代码提示、校验、组件库、教学培训等 配套⾼高效的IDE配套⼯工具 插件市场轮⼦子众多 https://ext.dcloud.net.cn
26. uni-app产品介绍 - App平台架构 渲染层 webview 框架层 配置 路路由 能⼒力力层 蓝⽛牙 存储 平台层 iOS weex ⽣生命周期 ⽀支付 … 分享 Android …
27. Thanks uniapp.dcloud.io