微信小程序增加月份_微信小程序性能优化

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

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

启动加载性能优化

启动过程机制

资源准备(代码下载)

业务代码注入和渲染

异步请求数据(部分小程序)

控制代码包的大小开启开发者工具中的“上传代码时候自动压缩”

及时清除无用代码和资源文件

减少代码包中的图片等资源文件的大小和数量

分包加载

分包加载的局限性和解决方法分包预加载(即将推出的功能)

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

首屏加载的体验优化建议提前请求：异步请求数据不需要等待页面的渲染完成。

利用缓存。利用storage API对异步请求数据进行缓存。二次启动的时候，先利用缓存数据渲染页面，再进行后台更新

避免白屏：先展示页面骨架和基础内容

及时反馈

渲染机制的优化

小程序的渲染机制

避免不当使用setData使用data在方法间共享数据(可能增加setData传输的数据量)——建议data中仅包括与页面相关的数据

使用setData传输大量数据——仅仅传输变化的数据

短时间被频繁调用setData——对连续的setData进行合并

后台页面进行setData，抢占前台页面的渲染资源——页面在切入后台后的setData调用，延迟到页面重新展示的时候执行

总结：每次setData的调用都是一次进程间的通信过程，通信开销与setData的数据量正相关的

setData会引发视图层页面内容的更新，这一耗时操作一定时间内会阻塞用户交互

setData是小程序中使用最频繁，也是最容易引发性能问题的

避免不当使用onPageScroll

只在有必要的时候监听pageScroll事件

避免在onPageScroll中执行复杂逻辑

避免在onPageScroll中频繁调用setData

避免频繁查询节点信息(SelectQuery)，部分场景建议使用节点布局相交状态监听(IntersectionObserver)替代

关注 今日头条 前端小学生 我们一起 共同进步。