小程序发布已经快两年了，越来越多的企业开始关注小程序生态带来的流量。随着小程序平台越来越开放和自我优化，越来越多的开发者也开始自主投入小程序的开发。现在作为前端，如果会写小程序，绝对是不折不扣的面试加分项。相信很多人在刚接触小程序的时候都会觉得小程序很简单。只要会写html、css、js开发就可以了。但是，当他们的第一个小程序开发上线的时候，却发现小程序的体验非常糟糕，那么我们就来看看如何优化小程序吧。加载过程如果要优化小程序，就必须对小程序的加载过程有一定的了解，小程序是如何加载的，我们先来看一张图：这三张图大家一定不陌生，当你在做的时候你打开一个小程序，你会经历这三个过程：资源准备，这个过程就是小程序下载你的代码包的过程，业务代码注入渲染，这个过程就是小程序将业务代码注入到视图层和逻辑层，并在视图层中请求异步数据渲染视图。当显示正在加载时，实际上是到达主页时。如果首页有异步数据请求，此时小程序会执行异步数据请求。简要概述程序的启动过程。我们来看一张更具体的图，或许可以帮助我们更好的理解小程序的启动过程：从这张图我们可以看出，小程序在启动和加载的时候，其实是分为两部分的，一部分是逻辑层的启动，一部分是视图层的启动。逻辑层的启动是加载小程序的js代码。视图层webview的启动加载并渲染页面。什么时候执行预加载？羊毛布？实际上，当微信处于活跃状态时，小程序平台会启动静默执行和加载的过程，包括JS引擎初始化和WebView初始化，然后注入小程序自带的公共库，比如自己的api、组件等。程序启动就是上面提到的打开一个小程序，下载代码包，分别注入逻辑层和视图层，然后共同完成首屏渲染的具体启动和加载过程。启动性能优化说完小程序的启动过程，我们就可以开始介绍具体的性能优化方案了。下面我们就来看看影响小程序性能的因素以及具体的解决方案。代码包大小代码包的大小会直接影响小程序的启动。速度，代码包越大，小程序启动时间越长。小程序启动时，下载代码包和代码注入的时间与小程序代码包的大小成正比。一般小程序的平均启动时间是2s左右，可以看看你的小程序是否落后，那么如何控制包大小呢？资源控制启用开发工具“上传代码时自动压缩”。小程序开发工具有上传代码时自动压缩的功能。当它打开时，它会在您上传代码时为您压缩代码。除此之外，我们还可以通过使用第三方打包工具进行代码压缩，比如webpack、grunt、grulp。及时清理无用的代码和资源文件，无用的代码和资源也会占用一定的包大小。减少代码包中的资源文件，将资源存放在CDN上。小程序开发工具对资源文件的压缩率很低。资源尽量放在CDN，因为小程序开发工具对资源文件的压缩率很低，只有10%左右，或者可以使用第三方编译工具自己压缩资源文件分包加载分包加载是小程序提高加载和启动性能的重要方法。如果有人不明白，可以点击打开链接看官方介绍，那么如何做好分包加载呢？将小程序中不常用的代码放在分包中，主包中只保留最常访问的页面。但是由于官方规定，标签页只能放在主包中，因为小程序启动时只会加载主包，使用时按需下载子包，不会一次性下载整个代码包加载时，可以有效减少启动加载的时间。但是，分包加载也有其局限性。用户第一次打开分包页面时，需要先加载注入分包代码，这会在页面切换时造成一定的延迟。因此，在此基础上，官方推出了Subpackages预加载和独立分包。分包预加载首先我们先看一下之前分包加载的过程：那么分包预加载是如何进行的呢？分包预下载：提前配置可以跳转到哪些分包。进入页面后框架会根据配置进行预下载。分包预加载会在你进入主包页面后悄悄开始为你下载和注入分包代码，这个过程是无感的，我们来看看分包预加载的过程：分包预加载需要注意：同一个页面分包共享一个普通的预下载大小限制2M，该限制会在工具中设置，因此分包预加载配置中不能配置所有分包页面，只能配置主包页面将跳转的页面.什么是独立分包、独立分包？由于从分包页面启动必须依赖主包的下载注入，启动速度会受到主包大小的限制，所以有独立分包，独立分包启动时可以独立分包页。启动时不依赖主包，可以减少主包的下载和注入时间。通常，我们会将活动、广告等具有独立逻辑的功能代码标记为独立的分包，在分包页面启动，不依赖主包启动，只下载分包代码进行注入.我们来看看独立分包的加载过程：首屏加载性能优化首屏加载体验对于小程序来说非常重要，那么如何提升首屏加载性能呢？提前请求：异步数据数据请求不需要等待页面渲染完成利用缓存：使用存储API缓存异步请求数据，二次启动时使用缓存数据渲染页面，再更新后台避免白屏：先显示页面骨架和基本内容及时反馈：对需要用户等待的交互操作及时反馈，避免用户认为小程序没有响应。渲染性能优化要提高渲染性能，需要知道小程序是如何渲染页面的。我们先来看一下。页面渲染流程图：js引擎和native都可以??通过js计算或者数据修改来发起对Webview的绘制操作，但是对于开发者来说最重要的是js引擎和Webview之间的通信。通信过程是一个跨进程通信是一个非常耗时的过程。我们要提高渲染的性能，也就是减少这个跨进程通信的时间，那么如何减少跨进程通信的时间呢？避免不当使用setData使用data在方法间共享数据，会增加setData传输的数据量，增加页面重绘的概率时间与数据量正相关，页面更新延迟可能会导致更新开销增加。只传输页面中变化的数据，通过setData这个特殊key实现后台页面的本地更新。SetData抢占前台页面的资源。综上所述，data中只定义了与页面渲染相关的数据，其他与页面渲染无关的数据定义为普通变量。在做setData操作时，尽量只传输页面渲染需要的数据。当页面切换时，销毁后台执行的setData操作，重新显示页面时执行。避免不当使用onPageScroll，只在必要时监听pageScroll事件避免在onPageScroll中执行复杂的逻辑onPageSroll事件监听在处理js引擎和webview之间的通信时也是跨进程通信，所以在使用onPageScroll事件时要注意以上几点，在需要频繁更新的场景下优化自定义事件的使用。自定义组件的更新只在组件内部更新，不受页面其他部分复杂度的影响，也可以在一定程度上优化渲染性能我没有介绍方法，所以需要自己摸索总结。希望大家在阅读本文后，能够对小程序的性能优化有一定的了解。如有错误或不严谨的地方，欢迎批评指正。如果喜欢，请点赞收藏。
