微信小程序性能与体验—资源加载优化

微信小程序性能与体验—资源加载优化

# 资源加载优化

# 1. 控制图片资源的大小

开发者应根据功能需要和实际显示区域的大小,选择合适的图片尺寸、图片格式和压缩比。

图片体积太大,可能导致下列后果

  • 增加图片下载时间,导致用户看到图片时机延迟;
  • 对用户造成非必要的流量消耗;
  • 影响图片解码和绘制的耗时,可能更容易造成掉帧、卡顿或白屏,甚至无法正常进行滚动和页面切换(低端设备上会尤为明显);
  • 内存占用增长,尤其是大图片和长列表中的大量图片会导致内存占用急剧上升。

图片对内存的影响

iOS 系统内存紧张时,会主动回收掉一部分 WebView。大图片和长列表中的大量图片很容易引起系统对 WebView 的回收,导致小程序白屏,严重时会触发微信强制关闭小程序。

内存增长如果超过了限制,也会导致小程序出现白屏或黑屏,甚至整个小程序发生闪退。

# 2. 避免滥用 image 组件的 widthFix/heightFix 模式

widthFix/heightFix 模式会在图片加载完成后,动态改变图片的高度或宽度。图片高度或宽度的动态改变,可能会引起页面内大范围的布局重排,导致页面发生抖动,并造成卡顿。

对于页面的背景图或 banner 图,应尽量预先指定图片的尺寸,避免图片加载完成后再进行二次的尺寸调整。