向您展示如何优化小程序。（实践总结）（小程序性能优化技巧示例）

如何优化小程序？本文总结了小程序优化的实践，并查看了小程序的优化项目，希望可以帮助到大家！

我们先梳理一下小程序的运行原理，做到磨刀不误砍柴工。

一幅画胜过千言万语；

建议大家仔细理解图中的内容，这对小程序开发和优化方向有很强的理论支撑。

优化项目1。合理使用分包

微信小程序的主要特点是快速启动。对于这个功能，官方因此限制了软件包的大小，上限为2M。

分包是小程序优化的第一要务，可以有效提高小程序的启动速度和页面的打开速度。

总包分为总包、总包和独立分包。

【主包】应该只放置启动页面或标签栏页面。

【普通分包】对于不是TabBar页面的其他页面，建议根据页面或模块的数量划分多个分包，以减少分包的规模。用户只有进入相应的分包页面才会下载该包，这也实现了包的按需加载，避免了资源的浪费。当小程序从一般分包的页面启动时，需要先下载主包，然后再下载分包。

【独立分包】放一些独立性高的页面。当小程序从独立分包中的页面启动时，将只下载独立分包，从而大大提高了小程序的启动速度。当用户进入TabBar页面或其他普通的分包页面时，他将返回并下载相应的包。

作者建议在分包之前对页面和功能进行整理。分包的界限不是包的大小超过2M，而是应该根据业务和功能灵活划分。在今天的正常网络情况下，用户对下载2M分包和500KB分包的感知可能不会有很大的差距，但如果在弱网络环境下，用户黑屏的时间会有很大的差距（从个人经验来看，可以说是令人心碎的）。

包分好之后，自然不能省略【分包预下载】。可以根据官网的规则进行配置。当用户进入某个页面时，软件包会提前下载。

2.按需注入

小程序下载包后，打开页面的包的所有JS将被合并和注入，一些未使用的页面和未使用的自定义组件也将被注入到运行环境中。影响注射时间消耗和内存占用。我们希望在下载软件包时，只注入我们即将打开的页面的代码。

{“LazyCodeLoading“:“必需的组件“} 3。阐明setData的几个调用原则。

小程序运行在微信客户端上，即wxml、wxs和wxss都运行在客户端上，运行环境分为两个线程，渲染线程和逻辑线程。渲染层使用WebView进行渲染，逻辑层使用JSCore运行JS代码。Wxml和wxss在渲染线程中工作，而wxs在逻辑线程中工作。这两个线程是如何相互通信的？

通过客户端作为中转站进行交流。

呈现层触发事件响应客户端，逻辑层通过setData将数据传输到客户端。两边的数据会转换成字符串再传输，客户端单独响应，响应不是实时的。这意味着触发逻辑层中的setData页面不会立即更新，一些延迟的渲染层将被更新。

该模型如下:

本地人是客户。

回到问题，setData是在逻辑层调用的，因此渲染层能否快速响应取决于从逻辑层到客户端的数据传输效率，而这种传输效率取决于您传输的数据大小，因此您在调用setData时应尽可能减少数据传输大小。

Native会将wxml转换为js对象，然后与setData传入的对象进行差异比较，并将差异呈现到视图中。

综上所述，我们在调用setData时应遵循几个原则:

尽量减少所需setData数据的大小，JSON.stringify后不超过256KB .避免将不需要呈现的数据（在wxml中未绑定的数据）传递到setData中，并减少耗时的差异比较。避免过于频繁地调用setData，这会导致逻辑层的业务繁忙，逻辑层一直在处理setData的传输队列，导致无法处理渲染层的响应，从而导致渲染拥塞，页面堵塞，甚至无效的setData。如果可能的话，可以通过节流进行优化。尽可能将需要更新的多个数据合并到一个setData中，以减少通信过程。避免后台页面触发setData也会占用Js线程，可能会造成阻塞，导致真正需要setData的数据没有响应。减少setData的数据大小。通常，在列表场景中，通常只更新需要更新的下标:

const need refresh = ` list【$ { index }】`//写入一个setData（{【need refresh】:& # 39；新价值& # 39；}）//方法2 setdata（{【` list【$ { index }】`】:& # 39；新价值& # 39；}）//写三个setData（{ & # 39；列表【0】& # 39；: '新价值& # 39；}）//正在写入四个const need refresh = ` list【$ { index }】。已禁用` setdata（{【need refresh】:& # 39；新价值& # 39；}）//Write 5更新对象setData（{ & # 39；personal.name & # 39:'xxx & # 39})4.控制图像尺寸比例

一张合格的照片应该满足以下两点:

图片宽度和高度的乘积。

显示屏的高度/宽度与原始图像的高度/宽度不得超过15%。

由于这些图片都来自UI，因此在这次优化中您需要做的是:拿这两个指标与UI进行战斗。

好幸运~

上面第一项与设备的【dpr】有关，移动终端的开发必须了解【dpr】，这里就不赘述了。

我们应该合理利用图片资源。例如，在【dpr】为2的设备上，为了兼顾清晰度和资源大小，在60x60元素区域中显示的图片不应超过120x120。同样，对于【dpr】为3的设备，图像不应超过180x180。

我们小程序的资源都放在cdn上，可以利用cdn的图像云处理功能来控制资源请求。我公司使用齐牛云和排云，如下所示:

//七牛云` ${_src}？imageMogr2/thumbnail/！${scaleRatio}p`//再次拍摄云` ${_src}！/scale/${scaleRatio} `更多云处理功能可移至官方网站:七牛云（https://developer.qiniu.com/dora/8255/the-zoom）和优拍云（https://help . upyun . com/knowledge -base/image/）。

我们在小程序中定制了图片组件cus-image，它将根据【dpr】对图片进行云端处理。提供ratio属性以灵活调整图像大小（因为操作员上传的图像可能在不同大小的元素区域中被引用，开发人员需要灵活控制它们）。

5.避免在短时间内发起太多请求。

小程序中wx.request、wx.uploadFile、wx.downloadFile发起的网络请求在短时间内最大并发限制为10个，超过10个会导致请求阻塞。并发图片请求的最大数量为6。

如何定义短时间？

【网络请求】耗时超过300毫秒的并发请求数不应超过10个（通常不会出现此问题。如果有这个问题，可能是时候考虑拆分页面、拆分服务或合并界面了。）【图片请求】使用时间超过100ms的同一域名的并发图片请求数不超过6个。例如，12个请求在300毫秒内发送，其中10个请求在300毫秒内完成，只有2个请求超过300毫秒，这是没有问题的。

【解决方案】

我们应该尽可能减少接口上的请求数量。图片可以设置为lazy -加载。精灵图可以用作图标。将图片资源拆分到多个域名下。定制一个分片处理函数，将请求分成几个阶段发送出去。function interltasks（task，Wait）{ this . data . timer = setInterval（（）=》{ task（）}，Wait）} async function task（promise list =【】）{ const result = Await promise。All（承诺列表）//dosomething} 6。请求耗时的优化。

这主要体现在两个方面——【接口】和【静态资源】。

【界面】应该基本不会超过1000ms，即使是几百毫秒，也可能需要一些优化。基本上正常速度是10-200ms，几百个接口也正常，大部分应该不会超过500ms（请冷静）。

【静态资源】首先考虑资源的大小，大部分资源都是图片，可以参考上面的图片大小标准。其次，考虑资源缓存。对于小程序来说，静态资源基本都存储在cdn上，设置缓存可以有效提升客户端性能。

这里是图片压缩网站:https://tinypng.com/.

7.避免使用太多WXML节点。

应该注意，页面中的节点数包括所有子节点数。如果子节点的数量大于60，也许您应该考虑重新划分组件或页面。

基本功！

8.使用骨架屏幕

骨架屏相信大家都很熟悉。如果我们的优化方法用尽了，页面本身就会有更多的资源需要加载，那么骨架屏也是我们退而求其次的最佳解决方案，也算是“曲线救国”了。

骨架屏的实现方式有很多种。你可以自己编写一个框架组件或者使用一些插件来生成框架屏幕。此外，小程序还提供白嫖方案，并且开发者工具提供了自动生成骨架屏幕代码的能力。

9.合理拆分组件并减少数据量。

微信小程序的更新是基于组件的，自定义组件的更新只会在组件内部进行，可以减少差异比较带来的耗时。

控制数据大小的主要目的是减少内存消耗，例如在数据中定义一些图像路径变量。如果可能的话，我建议在后台加载一些图像。

10.滚动区设置为惯性滚动。

惯性滚动将使滚动更加平滑。惯性滚动是Android下的默认设置，但-WebKit -溢出-滚动:触摸的样式需要在iOS下额外设置。

11.展开单击元素的可单击区域。

微信规定最小可点击面积不小于20x20像素。我不需要详细介绍这种风格。八仙过海各显神通。

最后，性能优化不是技术债，而是需要我们在通常的迭代版本中不断优化或重构，团队的所有成员都应该清楚这一点。

还有一些更详细的优化点可以参考官网地址:

https://developers . weixin . QQ . com/mini program/dev/framework/auditors/auditors . html如有疑问，欢迎留言指正。

【相关学习推荐:小程序开发教程】

以上就是给大家展示如何优化小程序。（实践总结）更多详情请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 暂无相关推荐文章

本文由主机参考刊发，转载请注明：向您展示如何优化小程序。（实践总结）（小程序性能优化技巧示例） https://zhujicankao.com/105308.html