小程序性能优化和异常监控

运行环境

小程序运行环境

运行环境	逻辑层	渲染层
IOS	JSCore	webview
安卓	JSCore	X5浏览器
小程序开发工具	NWJS	Chrome webviwe

JS 执行环境的不同

浏览器中：ES、DOM、BOM

Node中：ES、NPM、Native

小程序中：ES、小程序框架、小程序API

逻辑层和渲染层

JS工作在逻辑层

wxml和wxss工作在渲染层

小程序的渲染层和逻辑层分别由两个线程管理，两个线程的通信由微信客户端(Native)做中转。

数据驱动

通过JS对象可以渲染DOM上元素，使用JS对象描述DOM最后经过比对通过setData渲染到页面上。

性能分析

分析工具

浏览器：Performance、Lighthouse

小程序：audit、体验评分、小程序助手[性能分析]板块、和wx.getPerformance

分析指标

FMP：First Meaningful Paint 首屏加载

白屏率：打开某一页面后，白屏的时间和概率

服务可用性：HTTP请求失败率，JSError小程序运行发生的错误。

性能优化

首屏加载

• 删除无用代码，减少代码体积，压缩代码，图片体积，gzip压缩。
  • webpack
  • gzip
• 使用CSS3效果代替图片
  • 图片渐变阴影等
• 将重复逻辑封装，使用组件。
• 静态资源CDN
• 提前首屏数据请求
  • 数据预拉取：能够在小程序冷启动时候，荣国微信后台提前向第三方服务器拉取数据。
  • 周期性更新
• 代码分包
  • 不分包：小程序启动时，一次性下载所有代码
  • 分包：小程序启动时，先下载主包，后进入其他分包，在加载分包代码
• 预加载，perload与解析
• 图片的优化和格式选择，比如小图使用base64，大图jpg，logo使用png等，在可以使用webp的图，优先使用webp格式的图片
• 使用字体图标库（iconfont）代替图标
• 图片懒加载，数据懒加载
• 使用http2.0
  • 多路复用
• 使用骨架屏（提升体验）
• 非必要数据不放在首屏，加快页面渲染时间。

白屏率

• 减少this.setData，或者将多次的操作合并为一次，减少线程之间的通信，可以使用wx.nextTick()优化。
• 将不会渲染只用于逻辑判断的字段设置在page上而不是data上，（组件中可以使用_xx命名）
• 善用缓存
  • 浏览器缓存
  • http缓存
• 避免setInterval/setTimeout，使用之后及时clear掉

服务可用性

• 使用wx.onError，捕捉全局的错误，然后分类上传。浏览器中对应window.onerror
• 使用同一的http方法，进行网络请求，同一设置请求拦截和响应拦截，实现接口的分析和统计。
• 防抖和节流
• 减少重排和重绘

异常监控

为什么要做异常错误的监控？

通过线上的异常监控，可以复现一些本地难以复现的bug，比如某个bug只有在特定环境下的特定机型下才能复现，通过异常监控得到bug的复现条件，然后才能更好的去解决问题。

监控方式

• 通过wx.onError监控错误异常然后分析上报。

• 小程序后台结合wx.reportMonitor进行自定义的异常数据上报。

• 通过小程序后台的监控平台查看，然后做异常报警。

• 通过邮件/微信群，超过异常点后进行异常推送。