对微信小程序进行性能优化，主要可以从两大方面进行分析：性能扫描工具和代码优化。

一、使用性能扫描工具

微信小程序提供了一个“体验评分”的工具插件，可以使用它获得微信小程序的一些性能数据和明显的缺陷，进而根据报告进行相应的优化。

同时，为了方便开发者能够及时发现小程序的体验问题，从开发者工具 1.02.1811150 版本起支持体验评分的 “自动运行” 功能。一旦发现体验分数低于 70 分时，系统会在 console 面板打印一个 warning 信息提示开发者。

然后，根据效果图的分析报告，查看需要优化的细项，并根据说明一一进行优化。常见的优化点包括：

应避免出现任何 JavaScript 异常：因为出现JavaScript异常可能导致小程序的交互无法进行下去；
所有请求的耗时不应太久：因为请求耗时太长会让用户一直等待甚至离开，应当优化好服务器处理时间、减小回包大小，让请求快速响应；
避免将未绑定在 WXML 的变量传入setData：因为setData操作会引起框架处理一些渲染界面相关的工作，而一个未绑定的变量意味着与界面渲染无关，传入setData会造成不必要的性能消耗；
避免渲染界面的耗时过长：因为渲染界面的耗时过长会让用户觉得卡顿，体验较差；
避免执行脚本的耗时过长：因为执行脚本的耗时过长会让用户觉得卡顿，体验较差，出现这一情况时，需要确认并优化脚本的逻辑；
网络请求使用 HTTPS：因为使用 HTTPS，可以让你的小程序更加安全，而 HTTP 是明文传输的，存在可能被篡改内容的风险；
避免过大的 WXML 节点数目：建议一个页面使用少于 1000 个 WXML 节点，节点树深度少于 30 层，子节点数不大于 60 个。一个太大的 WXML 节点树会增加内存的使用，样式重排时间也会更长；
及时回收定时器：因为定时器是全局的，并不是跟页面绑定的，所以当页面因后退被销毁时，定时器应注意手动回收；

除此之外，微信小程序官方还给出了如下一些要求：

代码包不包含插件大小超过 1.5 M：小程序代码包单个包大小限制为2M。因此我们建议开发者在开发时，如果遇到单包体积大于1.5M的情况，可以采取分包的方式，把部分代码拆分到分包去，降低单个包的体积，提升小程序的加载速度
引用插件大小超过 200 K：小程序插件的大小是会算进小程序代码包2M体积限制中的。因此当我们发现开发者引用的插件体积大于200K时，会对开发者予以提示，避免出现上传阶段提示代码包体积超限。
图片和音频资源大小超过 200 K：小程序代码包里可以存放一些必要的静态资源（例如tabbar的icon等），不过静态资源体积过大也会影响小程序代码包加载速度。因此我们建议图片、音频等静态资源体积大小超过200K时，将它们上传到CDN，用URL引入会是个更好的选择。
主包存在仅被其他分包依赖的JS：当主包里存在一些JS文件只会被分包使用（而主包自己不使用）时，我们建议把这些JS文件从主包中拆分出去，放到对应的分包里，从而优化主包的加载速度。
主包存在仅被其他分包依赖的组件：当主包里存在一些组件只会被分包使用（而主包自己不使用）时，我们建议把这些组件从主包拆分出去，并且可以使用分包异步化这个特性加载这些组件，从而优化主包的加载速度。
存在无使用的插件：如果有无使用的插件，请将其从 app.json 中去除。不然它会占用代码包体积，也会延迟代码包加载的时间。
存在无使用的组件：如果在对应页面JSON的 usingComponents 里声明的组件但是没有使用，请将其从 usingComponents 里去除。

二、其他常见优化

2.1 启动优化

针对启动性能优化，可以从以下几个方面着手：
控制代码包大小

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

分包加载

将小程序中不经常使用的页面放到多个分包内，主包是保留最常用的核心页面；启动时只加载主包，使用时按需下载分包；
使用分包加载会出现用户首次进入分包页面时需要进行分包的下载和注入，造成页面切换的延迟；开发者可使用分包预下载，预先配置页面可能会跳转到的分包，框架在进入页面后根据配置进行预下载；

独立分包

从分包页面启动时，必需要先依赖于主包的下载和注入，启动速度受主包限制；使用独立分包，从独立分包页面启动，只下载和注入分包就可以打开页面；

2.2 首屏加载的体验优化建议

提前请求：异步数据请求不需要等待页面渲染完成（onLoad 阶段就可以发起请求，不用等ready）；
利用缓存：利用storage API对异步请求数据进行缓存，二次启动时先利用缓存数据渲染页面，而下拉刷新或者缓存过期才更新数据；
避免白屏：先展示页面骨架和基础内容；
及时反馈：即时地对需要用户等待的交互操作给出反馈，避免用户以为小程序无响应；

2.3 避免不当使用setData

当setData的数据过大时，通讯方面会带来巨大的消耗，大部分人面对长列表滚动的时候，一开始的处理方式都是这样的，如果数据不多，只有几页可能不会太暴露问题；但当页数过多，几十页甚至上百页的情况，list的数据会越来越大，每次setData的数据就会越来越多，因而每次页面重新渲染的节点就会越来越多，从而导致滚动到后面，加载越来越慢。另外，由于小程序的视图渲染层和数据逻辑处理层是分开的，不是在同一个线程上面的，从用户触发页面交互，到处理数据逻辑，最后呈现页面，数据到视图是需要传输的，因而小程序本身对数据大小也有限制，不能超过1M。

2.4 存在短时间内发起太多图片请求

一次性发送了过多的图片请求，导致了同一时间发起了过多的http请求，http连接是非常耗时的，尤其是一次性发起这么多，并且一次性发起的http链接也是有限制的，比如chrome浏览器就限制一次性最多6个。所以在渲染页面时，不在视图范围内的图片不要不加载，只有元素出现在视图范围内了才渲染。

要实现这一效果，我们可以通过 getBoundingClientRect() 获取元素的位置，然后与页面滚动位置进行比较，如果出现在视图内就加载显示图片。具体实现上，我们可以失业微信提供的 IntersectionObserver 对象，IntersectionObserver 对象可以用于推断某些节点是否可以被用户看见、有多大比例可以被用户看见，示例如下。

let data = list;
<img class="img-{{index}}" wx:for="{{data}}"></img>
data.forEach((item,index)=>{this.createIntersectionObserver().relativeToViewport.observe(`.img-${index}`,res=>{if (res.intersectionRatio > 0){this.setData({item.imgShow:true})}})
})

2.5 在列表渲染中巧用key值

在列表渲染过程中，巧用key值能够提升列表渲染性能。在小程序开发中，页面的渲染主要分为以下几步：

将wxml结构的文档构建成一个vdom虚拟数。
页面有新的交互，产生新的vdom数，然后与旧数进行比较，看哪里有变化了，做对应的修改（删除、移动、更新值）等操作。
最后再将vdom渲染成真实的页面结构。

key值的作用就在第二步，当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

2.6 避免使用onPageScroll不当

不正确的使用onPageScroll，可能会带来重复渲染的问题。因此，使用onPageScroll时，应注意以下几点：

只在必要的时候监听pageScroll事件；
避免在onPageScroll中执行复杂逻辑；
避免在onPageScroll中频繁调用setData；
避免频繁查询节点信息（SelectQuery）；

微信小程序性能优化总结相关推荐

微信小程序性能优化之一
微信小程序性能优化之一原文:微信小程序性能优化之一性能优化界面和业务逻辑之间事件交互小程序调用native Native回调小程序图片源文件优化渲染优化 ----------------- ...
微信小程序性能优化方案
文章目录微信小程序性能优化方案提高加载性能小程序代码包准备(下载代码包) 开发者代码注入页面渲染优化提升渲染性能 setData工作原理优化方法微信小程序性能优化方案微信小程序如果想要 ...
微信小程序性能优化技巧
微信小程序如果想要优化性能,有关键性的两点:提高加载性能和提高渲染性能. 一.提高加载性能当用户点击小程序后发生了什么? 资源准备(代码包下载) -- 业务代码注入和渲染 -- 异步请求数据 ...
小程序性能优化之页面预加载方案——让你的小程序运行如飞集成篇
小程序性能优化之页面预加载方案集成篇转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80802725 前言之前看到一篇文 ...
小程序性能优化之页面预加载方案——让你的小程序运行如飞进阶篇
小程序性能优化之页面预加载方案进阶篇转载请注明出处:https://blog.csdn.net/sinat_27612147/article/details/80798452 写在前面预加载方案 ...
如何给微信小程序搜索优化？
微信小程序搜索优化(Mini Program SEO)是指针对微信小程序的搜索引擎优化,通过优化小程序内容.引流渠道等手段来提高小程序的曝光率和用户转化率. 以下是一些给微信小程序搜索优化的方法: 1 ...
【官方推荐】微信小程序搜索优化指南
最近,微信搜索正式升级为"微信搜一搜",并对能力进行了全面的升级.一方面是覆盖更多的场景服务,整合不同领域内容,另一方面品牌官方区全新的界面样式,除了作为固定首位展示,还为品牌方提 ...
【微信小程序推广营销】教你微信小程序SEO优化，让你的小程序快人一步抢占先机...
今年一月份上线的小程序,经过近一年的沉淀发酵,现在也进入了快速发展期. 在未来肯定会有越来越多的小程序诞生,小程序多了就需要搜索,那么如何让自己的小程序在众多的小程序中脱颖而出,这就需要小程序SEO优 ...
微信小程序项目优化（初学者）
一开始学习的时候,在最后发布的时候居然微信小程序还有各种限制,什么主包大小,依赖js文件,还有静态资源什么的.在之前学的时候,也不注意这些,但是微信小程序,主打的产品就是免安装,一下子就能打开,所以对 ...
微信小程序性能,行为收集探针实现
小程序与普通网页开发的区别小程序的主要开发语言是 JavaScript ,小程序的开发同普通的网页开发相比有很大的相似性.对于前端开发者而言,从网页开发迁移到小程序的开发成本并不高,但是二者还是有 ...

微信小程序性能优化总结