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

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

# 运行环境

小程序运行环境

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进行自定义的异常数据上报。
• 通过小程序后台的监控平台查看，然后做异常报警。
• 通过邮件/微信群，超过异常点后进行异常推送。