微信小程序性能优化

前言

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

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

启动加载性能优化

启动过程机制

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

控制代码包的大小

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

分包加载

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

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

首屏加载的体验优化建议

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

渲染机制的优化

小程序的渲染机制

避免不当使用setData

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

总结：

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

避免不当使用onPageScroll

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

使用自定义组件