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

# 运行环境

小程序运行环境

运行环境 逻辑层 渲染层
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进行自定义的异常数据上报。

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

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

上次更新: 3/19/2021, 2:00:28 PM