小程序性能优化

(Updated: )
面试 › Javascript

小程序优化性能从两点出发：

1.提高加载性能
2.提高渲染性能

1.提高加载性能

用户点击小程序：
image

它们分别对应小程序的下面三个状态：

  • 有三个点的白屏（左侧）： 下载代码包的阶段
  • 没有三个点的白屏（中间）： 业务代码注入和渲染的阶段
  • 加载中（右边）： 业务代码中异步请求数据

1.控制包的大小
提升体验最直接的方法是控制小程序包的大小，基本上可以说，1M的代码包，下载耗时1秒左右。

  • 压缩代码，清理无用的代码
  • 图片放在cdn
  • 采用分包策略
    • 分包预加载
    • 独立分包（版本要求有点高）

2.对异步请求的优化

  • onLoad 阶段就可以发起请求，不用等ready
  • 请求结果放在缓存中, 下次接着用
  • 请求中可以先展示骨架图
  • 先反馈，再请求。比如说，点赞的按钮，可以先改变按钮的样式，再发起异步请求

2.提升渲染性能

setData：每调用一次setData, 都是逻辑层向渲染层的一次通讯，这个通信还不是直接传给webView, 而是通过走了native层，通讯的开销很大。

渲染层收到通讯后，还需要重新渲染出来，所以，一次setData带来两次开销：通信的开销 + webview更新的开销。

  • 1.减少setData的数据量
    • 如果一个数据不会影响渲染层，则不用放在setData里面
  • 2.合并setData的请求，减少通讯的次数
  • 3.列表的局部更新
  • 4.清理定时器等
  • 5.只在必要时候监听pageScroll，避免在pageScroll中频繁setData，避免在pagescroll中写复杂逻辑

3.html和小程序页面加载的不同

传统HTML5在加载的时候受限于网络环境，需要顺序加载HTML、CSS、JS，然后返回数据，最后渲染页面显示在浏览器中。用户经常需要等待很长时间，体验会受到影响。

相比之下，小程序的两个线程：Appservice Thread和ViewThread会同时进行、并行加载，甚至AppserviceThread会更早执行，当视图线程加载完，通知Appservice，Appservice 会把准备好的数据用setData的方法返回给视图线程。

小程序的这种优化策略，可以减少用户的等待时间、加快小程序的响应速度。

4.小程序性能优化

  • 控制包体积的大小，减少包文件个数

  • 分包加载

  • 图片优化:除icon外图片可以放在cdn，不建议把所有图片放在包内，加大包的体积，影响包的下载速度和解压速度;选择合适的图片格式;适当降低图片质量压缩图片;

  • 其他资源文件的优化，压缩json文件

  • 请求数据的优化:关键的早请求，不关键的晚请求，可使页面所需数据尽早可能的处于ready状态，不必等到ready状态后才去请求数据

  • setdata的优化:不要过于频繁的调用setdata，应考虑多次合并请求;不在视图层使用的数据不要使用setdata;通过setdata
    的key值优化

  • 清理页面定时器

  • 合理使用自定义组件(不需要逻辑功能时可使用模板)