小程序原理

2022-08-11 前端小程序 PV:

需要掌握的基础原理

底层架构

1. 传统的网页，UI渲染和JS脚本同一个线程中执行；小程序基于性能的考虑启用了双线程。
  视图层：webview线程，负责启用不同的webview来渲染不同的小程序页面。
  逻辑层：一个单独的线程执行JS代码，控制视图层的逻辑。

启动过程

1. 准备运行环境
  微信启动双线程环境，在线程中完成小程序基础库的初始化和预执行。
1. 下载、注入并执行对应小程序代码包
  初次启动时，需要下载编译后的代码包到本地。如果启动了分包”subPackages”,则只下载主包内容。
1. 渲染小程序首页
  代码包下载好后，会被加载到适当的线程中，基础库会完成所有页面的注册。

tips: 启动性能优化可以从以上第2、3步来优化小程序的启动性能

代码包

代码包越大，耗时越大。小程序的代码包大小上限已提高到8M。

1. 分包限制
  所有分包大小不超过16M
  单个分包/主包大小不能超过2M
  同一个分包中，分包预加载的限制不超过2M

tips: 自定义第三方组件，需要放在主包内；小程序的tab切换页，必须放在主包里。

// app.json中
"preloadRule": {
    "pages/index/index": {
      "network": "all",
      "packages": [
        "useXXX"
      ]
    }
  }

小程序渲染过程

1. 准备新的webview线程环境，包括基础库的初始化
1. 从逻辑层到视图层的初始数据通信
1. 逻辑层数据 + wxml 构建出节点树（包括节点属性、实践绑定），节点树 + wxss 结合完成页面渲染

微信会提前准备webview环境，所以小程序的渲染损耗主要在以上第2、3步（数据通信和节点树创建/更新）

优化方式

1. 分包
1. 部分页面H5化（降级方案）
  列如数据报告模块、图表库等增加整体包体积的模块，可以采用webview改造H5化。
1. 减少代码包中的静态资源文件
  a. 将图片、视频等静态资源放在CDN上
  b. 通过插件比如gulp-clean 清除一些冗余的样式文件

渲染性能优化
a.降低线程间的通信频次（合并setData)
b.减少线程间通信的数据量(只把与界面渲染相关数据放在data中，setData传输的数据越大，线程间通信耗时越长，渲染速度越慢)

1	// 比如一些js计算，删除数组中的某个元素，不影响wxml的渲染，这个属性就不要放在data中

c.减少wxml节点数量
一个页面少于1000个wxml节点,节点树深度少于30层，子节点数不大于60个。（节点树太大会增加内存使用、增加重排时长）
d.精简首屏数据
延迟（异步）请求非关键渲染数据
e.避免阻塞渲染
小程序启动流程中，会顺序执行app.onLaunch————>app.onShow————>page.onLaunch————>page.onShow————>page.onReady,所以尽量避免在这些生命周期理使用Sync结尾的同步API，如wx.setStorageSync、wx.getSystemInfoSync等。
f.频繁触发的事件，使用节流,减少通信频次。
g.利用本地缓存——wx.setStorage
可以通过文件系统，将图片缓存到本地，官方支持可以缓存200MB.

// 在utils.js里封装存/删方法
......
// 把图片缓存到本地
// 文件系统管理器
const fs = wx.getFileSystemManager();
// 1.先下载图片
// 2.然后保存图片到缓存
fs.saveFile({
    tempFilePath: res.tempFilePath,
    success(res) {
    resolve(res);
    },
    fail(res) {
    reject(res)
    }
})
// 3.判断图片是否已存在缓存中
 fs.getSavedFileInfo({
    filePath: path,
    success(res) {
        resolve(true);
    },
    fail(res) {
        reject(false)
    },
})
// 4.删除缓存里已经存在的图片
fs.removeSavedFile({
    filePath: path,
    success(res) {
        resolve(res);
    },
    fail(res) {
        reject(res)
    }
})

//把图片的路径和订单编号保存在storage里面
wx.setStorageSync('listcache', [])
wx.getStorageSync('listcache')

h.开启http缓存?
i.开启图片缓存?
j.图片懒加载、雪碧图优化
小程序的image组件自带lazy-load懒加载支持
k.使用自定义组件
例如抽离上传图片和视频的功能，封装成一个组件。组件的更新独立并不影响页面上其他元素的更新。
l.回收页面计时器
列如保存草稿功能，需要定时器轮询保存

总结

微信小程序优化

小程序优化性能注意事项

1. 由于小程序的更新机制影响，启动耗时会在版本发布几天内恢复到稳定水平。
  小程序新版本发布后，除了需要重新下载代码包外，版本更新也会引起包含小程序信息缓存、Code Caching、初始渲染缓存在内的各类缓存发生更新，也会影响更新后小程序首次启动的耗时。
  小程序性能优化过程中的思考
1. 小程序性能优化的方式
1. 用哪几种指标判断小程序的性能？体积大小、页面加载速度还有呢？通过何种工具获取这些指标来获取优化前后对比的数据？
1. 在业务不时的迭代过程中（业务需求增加包体积等），如何数据不影响优化后的指标？
1. wxml压缩wxs问题

小程序优化规范

1. 严格控制分包数量，根据业务划分分包名称，对应的需求放在对应分包下
  分包9大类
1. 需求需要判断是否必须放在主包下，如果不必要就放在分包下；如果必要，是否能使用分包异步化
1. 如果自定义组件只在某个分包的页面中使用，应定义在页面的配置文件中
1. 如果插件只在某个分包的中使用，请仅在分包中引用插件

小程序优化方案

第一步：分包归类，确定主包中可移动到分包下的页面
第二步：移、除主包中未依赖的组件到对应的分包下；删除主包中未使用的组件或js文件
第三步：分包异步化
第四步：静态资源上传到CDN
第五步：压缩wxml(解决wxs的问题，提取wxs标签的代码，跳过压缩)