微信小程序性能优化

前言

2018年7月份微信公开课上的小程序专场中“小程序性能优化”模块中提到了小程序性能优化方面的知识,其中从启动加载性能优化和渲染性能优化两个方面进行了阐述,提到了日常我们开发中如何去提高小程序的性能优化,以及小程序针对一些性能问题接下来会怎样的改进(其中就有分包预加载和独立分包等概念的提出)

自己本人只是一个做笔记的方式去记录,可能会有些许粗糙,大家可以直接去看演讲的视频,个人认为很精彩。因为是小程序,大家可以直接去微信小程序中搜“微信公开课”进行查看学习。

启动加载性能优化

启动过程机制

  • 资源准备(代码下载)
  • 业务代码注入和渲染
  • 异步请求数据(部分小程序)

控制代码包的大小

  • 开启开发者工具中的“上传代码时候自动压缩”
  • 及时清除无用代码和资源文件
  • 减少代码包中的图片等资源文件的大小和数量

分包加载

分包加载的局限性和解决方法

  • 分包预加载(即将推出的功能)
  • 分包加载——独立分包(即将推出) 可以不依赖于珠宝,独立下载和运行的分包。从独立分包页面启动,只下载和注入分包就可以打开页面。

首屏加载的体验优化建议

  • 提前请求:异步请求数据不需要等待页面的渲染完成。
  • 利用缓存。利用storage API对异步请求数据进行缓存。二次启动的时候,先利用缓存数据渲染页面,再进行后台更新
  • 避免白屏:先展示页面骨架和基础内容
  • 及时反馈

渲染机制的优化

小程序的渲染机制

避免不当使用setData

  • 使用data在方法间共享数据(可能增加setData传输的数据量)——建议data中仅包括与页面相关的数据
  • 使用setData传输大量数据——仅仅传输变化的数据
  • 短时间被频繁调用setData——对连续的setData进行合并
  • 后台页面进行setData,抢占前台页面的渲染资源——页面在切入后台后的setData调用,延迟到页面重新展示的时候执行

总结:

  • 每次setData的调用都是一次进程间的通信过程,通信开销与setData的数据量正相关的
  • setData会引发视图层页面内容的更新,这一耗时操作一定时间内会阻塞用户交互
  • setData是小程序中使用最频繁,也是最容易引发性能问题的

避免不当使用onPageScroll

  • 只在有必要的时候监听pageScroll事件
  • 避免在onPageScroll中执行复杂逻辑
  • 避免在onPageScroll中频繁调用setData
  • 避免频繁查询节点信息(SelectQuery),部分场景建议使用节点布局相交状态监听(IntersectionObserver)替代

使用自定义组件

猜你喜欢

转载自juejin.im/post/5b4aeab6f265da0f6f1a925a