微信小程序性能优化
小程序的架构
首先要了解的是：小程序的底层运行环境分逻辑层和渲染层：
- 逻辑层是 JScore，主要是 JS 脚本工作
- 渲染层是 webview，主要是 WXML 和 WXSS 渲染页面
WXML 其实可以看做一个 DOM 树，通过 JS 对象描写的 DOM 结构
小程序的逻辑层和渲染层是分开的两个线程。在渲染层，宿主环境会把 WXML 转化成对应的 JS 对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的 setData 方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的 Dom 树上，渲染出正确的 UI 界面，所以频繁的 setData 会影响小程序的性能.
小程序的 JS 脚本是运行在 JsCore 的线程里，小程序的每个页面各自有一个 WebView 线程进行渲染，所以小程序切换页面时，小程序逻辑层的 JS 脚本运行上下文依旧在同一个 JsCore 线程中。在上文中说道 App 实例是单例的，因此不同页面直接可以通过 App 实例下的属性来共享数据。App 构造器可以传递其他参数作为全局属性以达到全局共享数据的目的。
所以 setTimeout 和 setInterval 是全局的函数，会作用在全局中，一定要注意使用之后 clear 掉。
首屏启动
首页渲染耗时主要受页面结构和参与渲染的数据量影响。
- 首屏图片过多时请使用图片懒加载open in new window和骨架屏open in new window。
- 分包：代码包过大通常使用分包来解决
- 分包预下载：在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。
- 通常功能不是很复杂且相对独立（支付页、广告页），对启动性能有很高的要求。独立分包可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。建议开发者将部分对启动性能要求很高的页面放到特殊的独立分包中。
- 善用本地缓存：储存 token、userinfo 等信息，并通过一定的机制定期进行更新
优化手段
- 代码重构和优化：例如使用 webpack 等打包工具，删除无用的代码。
- 图片资源：避免在本地使用大图片，大图可以放在服务器的静态资源里，长列表图使用懒加载。
- 频繁的执行
this.setData会使得 JS 线程一直在更新数据，从而改变 webview 的重绘，使得渲染线程变卡顿。可以将多次的操作合并为一次。 - 谨慎使用
setinterval，由于小程序的设计问题，定时器是全局的，使用之后记得清理定时器。 - 于渲染视图无关的数据尽量不要放在
data中，可以使用纯数据字段来表示，也就是this.xx
性能监控
- 获取更新性能统计信息open in new window: 如果想要知道 setData 引发界面更新的开销，可以使用更新性能统计信息接口。它将返回每次更新中主要更新步骤发生的时间戳，可以用来大体上估计自定义组件（或页面）更新性能
- 小程序助手【性能分析】板块，查看小程序的启动性能、运行性能和网络性能。
- 体验评分，开发工具自带体验评分open in new window的工具。
- 使用
wx.getPerformance，获取当前小程序性能相关的信息,在获取信息后，可以自行上报或使用wx.reportPerformance进行测速