微信小程序性能优化入门指南

小程序从发布到如今也已经有将近两年的时间，愈来愈来多的公司开始重视小程序生态带来的流量，今年也因为小程序平台对外能力的愈来愈多的开放以及小程序平台的自身优化，愈来愈多的开发者也自主的投入到小程序的开发当中，如今，做为前端若是会写小程序，绝对是一个彻彻底底的面试加分项。
相信很多人刚接触小程序时的感受大都是小程序很简单，开发只要是会写html、css、js就能够了，可是当本身的第一个小程序开发完成上线时，却发现小程序体验很是糟糕，接下来就让咱们一窥小程序优化之道。

加载流程

要想给小程序作优化，对小程序的加载流程必定要有必定的了解，小程序是怎么加载的，让咱们先来看一个图片：

这三个图片你们必定都不陌生，当你打开一个小程序的时候就会经历这三个过程：

1. 资源准备，这个过程就是小程序在下载你的代码包的过程
2. 业务代码注入和渲染，这个过程就是小程序将的业务代码分别注入视图层和逻辑层，并在视图层作视图的渲染
3. 异步数据的请求，显示加载中的时候，其实就是在到达首页时，若是首页有异步数据请求，这个时候小程序就会执行异步数据请求

上述就是对小程序的启动过程的一个简单概述，让咱们再来看一个更加具体一点的图片，可能会更好理解小程序启动过程：

从这个图片能够看到，小程序在启动加载的时候，其实分为两部分，一部分是逻辑层的启动启动，另外一部分是视图层的启动，逻辑层的启动就是加载小程序的js代码，视图层的启动webview对页面进行加载和渲染，那预加载又是何时执行的呢？其实在微信动的时候，小程序平台就开始静默执行与加载的过程，包括JS引擎初始化和WebView的初始化，而后会注入小程序自带的公共库，例如自带api、组件等，后面的小程序启动，就是上面说过的打开一个小程序具体的启动加载过程了，下载代码包，分别注入逻辑层和视图层，而后共同完成首屏渲染。

启动性能优化

讲完小程序的启动过程，就能够开始介绍具体的性能优化方案了，让咱们一块儿看看影响小程序性能的因素以及具体的解决办法

代码包大小

代码包大小会直接影响小程序的启动速度，代码包越大，小程序的启动时间就越长，在小程序启动时，下载代码包和代码注入的时间和小程序代码包大小是成正比的，通常小程序的平均启动时间是2s左右，能够看看你的小程序有没有拖后腿，那么如何控制包大小呢？

资源控制

1. 开启开发工具”上传代码时自动压缩”，小程序开发工具备一个上传代码时自动压缩的功能，当开启时，会在你上传代码时为你作代码压缩，除了这个，咱们也能够经过使用第三方打包工具作代码压缩，如webpack、grunt、grulp。
2. 及时清理无用代码和资源文件，无用的代码和资源也会占用必定的包大小。
3. 减小代码包中的资源文件，将资源存放在cdn上，小程序开发工具对资源文件的压缩比率很是低，资源有条件的能够尽可能放在CDN上，由于小程序开发工具对资源文件的压缩比率很是低，只有10%左右，或者也能够用第三编译工具对资源文件本身进行压缩处理

分包加载

分包加载是小程序提升加载启动性能的一个重要方法，若是有人还不了解，能够点开连接看官方介绍，那么如何作好分包加载呢？
将小程序中不经常使用的代码放在分包中，主包内只保留用户最常访问的页面，可是因为官方规定tab页面只能放在主包中，由于小程序启动时只会加载主包，使用时按需下载分包，不会在加载时一次将整个代码包下载，这样就能有效减小启动加载的时间。
可是分包加载也有它的局限性，用户首次打开分包页面时，须要先进行分包代码的加载和注入，会形成页面切换时产生必定的延时，所以在此基础上，官方又推出了分包预加载和独立分包。

分包预加载

先来看一下以前分包加载时的流程是怎样的：

那么分包预加载是怎么干的呢？分包预下载：提早配置可能会跳到哪些分包，框架在进入页面后根据配置进行预下载，分包预加载会在你进入主包页面后，为你静默开启分包代码的下载和注入，这个过程是无感的，来看一下分包预加载的流程是怎样的：

分包预加载须要注意的是：同一个分包中的页面享有共同的预下载大小限额2M，限额会在工具中打包时校验，所以不能把全部的分包页面都配置到分包预加载的配置中，只配置主包页面会跳转的页面便可。

独立分包

独立分包又是什么呢？因为从分包页面启动是，必需要依赖于主包的下载和注入，启动速度会受到主包大小的制约，所以这就有了独立分包，独立分包在启动分包页面时，能够独立启动而不须要依赖主包，这样就能够减小主包下载和注入的时间，一般状况下咱们会将活动、广告一类的具备独立逻辑的功能代码标记为一个独立分包，在分包页面启动时，能够不依赖于主包启动，只下载分包代码进行注入。让咱们来看一下独立分包的加载流程是怎样的：

首屏加载性能优化

首屏加载的体验对小程序来讲十分重要，那么如何提高首屏加载性能呢？

1. 提早请求：异步数据数据请求不须要等待页面渲染完成
2. 利用缓存：利用storage API对异步请求数据进行缓存，二次启动时先利用缓存数据渲染页面，再进行后台更新
3. 避免白屏：先展现页面骨架和基础内容
4. 及时反馈：及时地对须要用户等待的交互操做给出反馈，避免用户觉得小程序没有响应

渲染性能优化

要想提升渲染性能，就须要知道小程序如何作页面渲染的，让咱们先来看一个页面渲染的流程图：

js引擎和native均可以过js的计算或者data修改来对Webview发起绘制操做，可是对开发者来讲最重要的就是js引擎和Webview之间的通讯，这通讯过程是一个跨进程通讯，是很是耗时的一个过程，咱们要提升渲染的性能，也就是减小这个跨进程通讯的时间，那么怎么去减小跨进程通讯的时间呢？

避免不当使用setData

1. 使用data在方法间共享数据，会增长setData传输的数据量，同时会增长页面重绘的几率
2. data仅包括与页面相关的数据
3. 使用setData传输大量数据，通信耗时与数据量正相关，页面更新延迟可能形成更新开销增长
4. 仅传输页面中发生变化的数据，使用setData的特殊key实现局部更新
5. 后台页面进行setData抢占前台页面的资源
6. 页面切入后台后的setData调用，延迟到页面从新展现的时候执行

总结来讲就是在data中只定义与页面渲染相关的数据，其余与页面渲染无关的数据都定义成普通变量，在作setData操做时，尽可能只传输页面渲染须要的数据，当页面切换时，将后台执行的setData操做销毁，等到页面从新展现的时候再执行。

避免不当使用onPageScroll

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

因为onPageSroll事件监听在处理js引擎和webview之间的通讯时也是一个跨进程通讯，所以在使用onPageScroll事件时，要注意以上的几点内容，来进行相关的优化

使用自定义事件

在须要频繁更新的场景下，自定组件的更新只在组件内部更新，不受页面其余部份内容复杂性影响，这样也能够在必定程度优化渲染性能

总结

这篇文章简单的介绍了微信小程序性能优化的一些方法，还有不少我没有介绍到方法就须要你们本身去探索总结了。但愿你们看完这篇文章能对小程序性能优化有必定的认识，若是有错误或不严谨的地方，欢迎批评指正，若是喜欢，欢迎点赞收藏。