小程序优化

简介: 评测步骤:微信开发者工具­——》调试器——》Audits——》运行(操作)——》结束点击运行以后,尽可能多的对小程序进行操作,最好覆盖全页面和所有的交互动作。操作完成以后,点击结束,出行评测结果以及评测的具体列表,需要优化的地方。

前言:


小程序已上线一段时间,评测结果性能良好,这个成绩相对来说还是不错,但是良好不是我们的目标,优秀才是。

46f220201f89c7684f58c1bef52d921.png


依据提示,点击查看性能体检报告,列出了几点待改善的意见,但是没有具体细则。开发工具-调试器-Audis面板可进行详细跳转有优化

1541a86f0f032002c12c7f261ae5ff9.png

1、开发者工具进行评测


评测步骤:

微信开发者工具­——》调试器——》Audits——》运行(操作)——》结束

点击运行以后,尽可能多的对小程序进行操作,最好覆盖全页面和所有的交互动作。操作完成以后,点击结束,出行评测结果以及评测的具体列表,需要优化的地方。

a9f44ecef4c4ec0d4ef74271275b8ed.png


42e5e2c7025093e284e7d57c143a0e6.png


2、性能优化


2.1存在将未绑定在 WXML 的变量传入 setData


详解:setData 是小程序开发中使用最频繁的接口,setData操作会引起框架处理一些渲染页面的相关工作,一个未在页面结构绑定的变量意味着与界面渲染无关,传入不必要的setData会造成不必要的性能消耗。


常见的setData错误操作:


频繁的去setData,(页面不停的渲染,导致卡顿)


setData 都传递大量新数据。(渲染压力太大,会出现延迟,页面不显示的数据不要传递)


所有的变量都定义在data属性,进行setData操作,进行数据渲染(不需要渲染页面的数据要定义在外面,定义成变量)


Demo解决实例:


a64fc1802336556141613b16399834a.png


如上图,contentWidth肯定不是被绑定的数据,在给出的页面路径里,找到这个变量,把他从data属性里面移出去,放在外面,定义成一个全局变量。


2.2 存在网络图片资源未开启 HTTP 缓存控制


详解:开启 HTTP 缓存控制后,下一次加载同样的图片,会直接从缓存读取,提升加载速度。


解决方案:片请求里,服务器没有返回cache-control头部。一般对于资源请求建议加上缓存头部,这样下次访问相同的资源就不用重新向服务发起请求。


2.3 存在可能没有对请求进行缓存的情况


详解:发起网络请求总会让用户等待,可能造成不好的体验,应尽量避免多余的请求,比如对同样的请求进行缓存 。


解决方案:对相同的请求进行缓存,但是如果遇到需要实时获取动态数据的,就没有办法了


2.4  存在图片太大而有效显示区域较小


详解:图片太大会增加下载时间和内存的消耗,应根据显示区域大小合理控制图片大小 。


解决方案:例如,前端展示图片大小为100*100,那么后台维护图片大小最好也是100*100,如果后台图片1000*1000,势必增加下载时间和内存的消耗。


3、体验优化


3.1存在可点击元素的响应区域过小


详解:我们应该合理地设置好可点击元素的响应区域大小,如果过小会导致用户很难点中,体验很差,在前期设计的时候,应该尽量避免点击元素相应区域过小的问题。来提高用户体验。


3.2页面设计


详解:文字颜色与背景色需要搭配得当,适宜的颜色对比度可以让用户更好地阅读,提升小程序的用户体验。设计尽量符合小程序的设计原则。


小程序设计规范:


微信小程序设计指南 | 微信开放文档最佳实践优化


4、最佳实践


4.1存在定时器未跟随页面回收


详解:时器是全局的,并不是跟页面绑定的,当小程序从一个页面路由到另一个页面之后,前一个页面定时器应注意手动回收。


解决:离开页面的时候,释放定时器。


d6a5335ee2c8353641dc90c433ddeef.png



4.2 wxss 覆盖率较低,存在未使用的样式


详解:们应该按需引入 wxss 资源,如果小程序中存在大量未使用的样式,会增加小程序包体积大小,从而在一定程度上影响加载速度


解决:随着业务的调整和优化,会有冗余代码和样式文件,应该及时的删除。


最后总结,上面的这些问题,是没有经过小程序评审通过。评审的过程还会涉及到其他很多问题,以此类推,遇到问题解决,如果解决不了,去社区搜索提问。问题总会得到解决。


目录
相关文章
|
6月前
|
缓存 监控 小程序
关于抖音小程序数据加载速度优化
提升抖音小程序数据加载速度的建议:压缩和优化数据,减少请求次数(批量或合并请求),利用缓存策略,惰性加载和图片优化。代码示例包括数据压缩、批量请求、设置缓存、分页加载和图片懒加载。实际应用时,应根据项目需求选择合适策略,并进行性能测试和监控。
|
3月前
|
小程序 UED 开发者
揭秘支付宝小程序成功之道:UI/UX设计原则与用户体验优化秘籍大公开!
【8月更文挑战第27天】支付宝小程序在移动互联网中扮演着重要角色,优秀的UI/UX设计能显著提升用户满意度。本文首先强调了设计的一致性、简洁性、易用性和响应性原则,确保用户获得顺畅体验。接着,介绍了最佳实践,包括利用支付宝设计组件库保持界面统一、优化加载速度、适应多设备显示、设置清晰导航以及重视用户反馈。最后,提供了一个简单示例展示如何应用支付宝设计组件。遵循这些指导原则,开发者能够构建既美观又实用的小程序。
74 0
|
4月前
|
存储 JSON JavaScript
小程序优化:第三方SDK过大解决方案
小程序开发中,项目目录中存放过大的js包,会被警告影响手机端性能,同时让开发编译启动变得很慢。慢是其次,单是影响性能这一点,就需要解决一下。
|
6月前
|
小程序 JavaScript 前端开发
微信小程序全栈开发中的数据交互与渲染优化
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的数据交互与渲染优化,旨在提升小程序性能和用户体验。数据交互涉及GET、POST、PUT和DELETE请求,优化措施包括使用HTTPS、数据压缩、缓存及限流。渲染优化则涵盖虚拟DOM、减少DOM操作、组件化和模板使用,以及WXSS样式设计和媒体查询。利用性能监控工具可识别并优化性能瓶颈。开发者应综合运用这些策略,持续优化小程序。
58 0
|
缓存 小程序 数据挖掘
微信小程序优化手段
微信小程序优化手段
|
存储 小程序 前端开发
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
【易售小程序项目】小程序私聊页面完善(带尾巴聊天气泡组件封装、滑至顶端获取历史聊天数据逻辑优化)【后端基于若依管理系统开发】
63 0
|
JSON 小程序 前端开发
小程序长列表优化实践
小程序如何实现长列表优化呢
小程序长列表优化实践
|
移动开发 小程序 JavaScript
总结10条~高级前端必知的小程序体积优化策略
我们都知道微信小程序有包体积限制,整个小程序所有分包大小不超过 20M,单个分包/主包大小不能超过 2M。然而面对业务的不断更新迭代,代码和资源会越来越多,如果不尽早规划包体积的治理,势必有一天会对业务的发展造成阻碍。所以如何在有效支持业务逻辑的同时,尽量减少资源占用,在小程序开发环境中显得尤为重要。 代码包体积是其中的一个重要方面,本文将就此进行分析与探讨。
499 0
总结10条~高级前端必知的小程序体积优化策略
|
缓存 小程序 JavaScript
【小程序】爆肝 3 天总结的微信小程序优化指南(收藏夹吃灰吧!)🔥🔥(下)
前言 大家好,我是HoMeTown,最近要做一个小程序的项目,项目启动之前,回顾自己之前做过的小程序,感觉做的还是不够好,最近学习了一下小程序优化方案,这块总结一份个人笔记,以便参考,同时分享给大家,共勉。
584 0
|
缓存 小程序 JavaScript
【小程序】爆肝 3 天总结的微信小程序优化指南(收藏夹吃灰吧!)🔥🔥(上)
前言 大家好,我是HoMeTown,最近要做一个小程序的项目,项目启动之前,回顾自己之前做过的小程序,感觉做的还是不够好,最近学习了一下小程序优化方案,这块总结一份个人笔记,以便参考,同时分享给大家,共勉。
337 0