微信小程序性能优化是一个涉及多个方面的过程,包括但不限于代码逻辑优化、界面渲染效率提升以及资源管理等。以下微信小程序加分项:
1. 图片资源优化
- 图片过大而有效区域小:确保使用的图片尺寸与实际显示尺寸匹配,避免不必要的大图加载。可以使用图片压缩工具或服务来减少图片大小而不明显影响质量。
- HTTPS资源:确保所有外部资源(如图片)通过HTTPS协议加载,以提高安全性并避免混合内容问题。
2. 数据更新优化
- setData调用频率:频繁调用
setData会导致性能下降,因为它会触发页面重绘。尽量合并多次数据更新为一次调用,或者只更新真正发生变化的数据部分。 - 未绑定变量的处理:在调用
setData时,确保只传递与界面渲染相关的变量。对于那些不需要更新视图的数据,应该避免将其包含在setData参数中。(注意:绑定的data里面的变量,在wxml有使用-通常是使用 if 用于判断,但是检测报:一个未绑定的变量意味着与界面渲染无关,传入setData会造成不必要的性能消耗,这是因为微信开发者工具版本的问题大概1.06.2407以上的版本都会【可能1.06.2401都会】,旧版本不会检测出来)
3. 用户交互体验
- 惯性滚动:为了获得更流畅的滚动体验,在iOS设备上需要额外设置CSS样式
-webkit-overflow-scrolling: touch;来启用惯性滚动。 - 点击响应区域:增加可点击元素的响应区域大小,特别是对于手指触摸操作,这可以显著改善用户体验。可以通过增加padding或margin来间接实现。两种方式:
方式1:通过使用padding撑大元素(20px * 20px)即可。
问题:比较麻烦需要根据不同的位置给出不同的方案,还得注意挤到周边元素。
方式2:使用伪元素的方式,一比一生成一个一样大小的透明遮罩层,设置最小宽高(20px * 20px)。
问题:还是会在开发者工具检测出来,但是应该更开发者工具有关系,官网也是提倡这种方式的,没验证。另外就是主要,遮罩层挡到旁边元素。