下面我来一步步讲解一下如何优化小程序。 （实用概述）（如何优化运行缓慢的小程序）

如何优化小程序？这篇文章总结了优化小程序的实践，看看小程序可以优化的地方。 希望对您有所帮助！

小程序执行流程

首先整理一下小程序的运行原理，方便大家砍柴。

眼见为实：

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

优化项

1.合理使用子包

微信小程序的主要特点是启动快。 对于这个功能，官方将包大小限制为最大2M。

分包是小程序优化的重中之重，可以有效提升小程序启动速度和页面打开速度。

套餐分为【主套餐】、【普通分包】、【单个分包】。

[主包]应仅包含启动页面或TabBar页面。

【普通子包】放置TabBar页面以外的页面。 为了减少子包的大小，我们建议根据页面或模块的数量将其拆分为多个子包。 用户只有进入相应的分包页面才会被引导至该页面。 下载这个包也实现了包的按需加载，避免资源浪费。 如果从常规分包页面启动小程序，必须先下载主包，再下载分包。

【独立子包】放置几个高度独立的页面。 从独立子包内的页面启动小程序可以显着加快小程序的启动速度，因为只下载独立子包。 用户进入TabBar页面或其他常规分包页面后返回下载相应的包。

独立的子包不能包含组件、登录等全局的东西，引入其他包的资源会导致错误。

鼓励作者在分包之前清理他们的页面和功能。 分包的限制不是包大小超过2M，而是可以根据任务和功能灵活划分。 在当前正常的网络条件下，下载2M分包和下载500KB分包的用户感知差异可能不是特别大，但在弱网络环境下，这两个原因可能会导致用户长时间出现白屏。 差距巨大（可以说个人经历令人心碎）。

既然包已经拆分了，【提前下载子包】当然是需要的。 您可以遵守官网规则配置用户进入特定页面时预下载的包。

2.按需插入

小程序下载完包后，将打开页面的包中的所有JS、未访问的页面、未使用的自定义内容合并注入。一切。 组件也被注入到运行时环境中。 。 影响注入时间和内存使用。 我们想要的是，当包下载完成后，只注入我们即将打开的页面的代码。

{ "lazyCodeLoading" : "requiredComponents"}

3. 清除 setData。 一些调用原理

小程序运行在微信客户端上。 即wxml、wxs、wxss都运行在客户端。 执行环境分为两个线程，一个渲染线程，一个逻辑线程。 渲染层使用WebView进行渲染，逻辑层使用JSCore执行JS代码。 wxml和wxss工作在渲染线程，wxs工作在逻辑线程。 两个线程之间如何通信？

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

渲染层触发事件并响应客户端。 逻辑层通过setData向客户端发送数据，双方的数据都转换为字符串。 发送后，客户端单独响应，但响应不是实时的。 这意味着逻辑层触发的setData页面不会立即更新，渲染层更新之前会有一定的延迟。

模型如图所示。

Native 是客户端。

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

Native将wxml转换为js对象，与setData传递的对象进行差异比较，并渲染差异。风景之上。

总结以上原则，调用setData时应遵循几个原则。

应尽可能减少setData所需数据的大小，并保证JSON后的数据大小不超过256 KB。 转换为字符串。 为了减少耗时的增量比较，请避免将不需要渲染的数据传递给 setData（数据未绑定到 wxml）。 避免频繁调用 setData。 这使逻辑层保持忙碌并继续处理 setData 发送队列。 这使您无法处理渲染层响应性、渲染阻塞、页面滞后，甚至无效的 setData。 如果可能的话，可以通过节流等方法进行优化。 尽可能将需要更新的多个数据合并到单个 setData 中，以减少通信过程。 阻止后台页面触发setData也会占用Js线程，导致阻塞，并有可能导致真正需要setData的数据变得无响应。

减少 setData 的数据大小通常在列表场景中完成，并且通常仅更新。 需要更新的下标：

const needRefresh = `list[${index}]`//方法1写入setData({ [needRefresh]: '新值'})//写入方法2 setData( { [ `l ist[${index}]`]: '新值'})//写方法3 setData({ 'list[0]': '新值'})//方法4 write const needRefresh = `list[${index }].disabled`setData({ [needRefresh]: 'new value'}) //写入5个对象更新 setData({ 'personal.name':'xxx'})

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] 为一个对图像进行云处理的小程序。 它还提供了rate属性，可以灵活调整图片大小（开发者需要，因为运营商上传的图片可能会被不同大小的元素区域引用）。

5.避免在短时间内发起大量请求。

wx.request、wx.uploadFile发起的最大并发网络请求数限制。 短命小程序中的wx.downloadFile为10。 如果超过 10 个，请求将被阻止。 最大并发图片请求数为6。

如何定义短持续时间？

【网络请求】大于300毫秒的并发请求数不能超过10个（一般不会出现这个问题，如果您遇到这个问题，我们会及时处理）建议您考虑分页。接口、业务分离或者接口集成。 ) 【图片请求数】同一域名超过100ms的并发图片请求数不超过6个

示例：300ms内发送12个请求，其中300ms内有10个 300ms内完成且仅2个请求已完成。

【解决方案】

应尽可能减少接口请求次数。 图像可以设置为延迟 - 加载。 精灵图像可以用作图标。 将您的图像资源拆分到多个域名。 自定义分片流程以分多个阶段发出请求。 function interelTask​​s(task,wait){ this.data.timer = setInterval(()=>{ task() }, wait)}async function task(promiseList = []){ const result = wait PromiseList.all(promiseList) / / 做一些事情}

6.耗时的优化请求

这主要是针对[接口]和[静态资源]。 体现在两个方面。

【接口】基本上请不要超过1000ms。 即使只有几百毫秒，也可能需要进行一些优化。 基本上正常的速度是10-200ms。 对于单个接口，通常需要数百毫秒。 大多数情况下不应该超过500ms（后端大佬冷静点）。

[静态资源] 首先，考虑资源的大小。 大多数资源都是图像。 请参阅上面的图像尺寸标准。 接下来，考虑缓存资源。 对于小程序，静态资源通常存储在CDN上。 配置缓存可以有效提高客户端性能。

这里是一个图像压缩网站：https://tinypng.com/

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

页面节点数包括所有子节点数。 您需要注意的是子节点的数量。 如果子节点的数量超过 60 个，您可能您应该考虑重新分区您的组件或页面。

基本功！

8.使用骨架屏

骨架屏想必大家都很熟悉。 如果你用尽了所有的优化方法，而页面本身需要加载更多的资源，骨架屏也是最好的解决方案，退而求其次，认为“曲线救国”也可以。 。

实现骨架屏的方法有很多种。 您可以自己创建骨架组件或使用生成骨架屏幕的插件。 此外，小程序还提供了免费的卖淫解决方案，其开发者工具提供了自动生成骨架屏代码的能力。

9、适当划分组件，减小数据

微信小程序的大小。 更新基于更新组件和自定义组件。 仅在组件内部，减少差异比较的耗时。

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

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

惯性滚动使滚动更加流畅。 惯性滚动在 Android 上默认可用，但在 iOS 上需要额外配置 -webkit-overflow-scrolling: touch style。

11.放大可点击元素的可点击区域

微信规定最小可点击区域必须至少为20x20像素。 我不会详细讨论这种风格的问题。 八仙渡海，展现神通。

最后

性能优化不是技术债务，而是应该在常规迭代版本中持续优化或重建。 团队成员需要清楚这一点。

更多优化点请参考官网地址：

https://developers.weixin.qq.com/miniprogram/dev/framework/audits/audits.html

如果您有任何疑问，请留言，我们会解决。

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

PHP轻松学习视频免费教程（从初学者到专家）

如何学习PHP PHP应该从哪里开始？我学PHP怎样才能快速学好PHP呢？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

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

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

本文由主机参考刊发，转载请注明：下面我来一步步讲解一下如何优化小程序。 （实用概述）（如何优化运行缓慢的小程序） https://zhujicankao.com/142423.html