九旬的博客

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

运行环境

小程序运行环境

运行环境逻辑层渲染层
IOSJSCorewebview
安卓JSCoreX5浏览器
小程序开发工具NWJSChrome 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进行自定义的异常数据上报。

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

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