小程序开放平台

文档中心
起步
目录
配置小组件
小组件框架
小组件运行时
自定义组件
基础能力
开放能力
性能优化
性能秒开最佳实践
启动性能
运行时性能
合理使用setData
渲染性能优化
资源加载优化
内存优化
请求性能优化
异常场景处理

资源加载优化

开发
>
指南
>
性能优化
>
运行时性能
>
资源加载优化
>
更新时间:2025-08-04 15:43:47

1. 控制图片资源的大小

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

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

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

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

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

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

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

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

3.开启懒加载

可以使用懒加载优化小组件。智能小组件的image组件提供了lazy-load属性,可以开启图片的懒加载功能:

<image lazy-load="true"/>

4.使用渐进式 JPEG 来优化用户体验

使用 mozjpeg 不仅可以压缩 JPEG 图片的体积,还可以将图片转换为渐进式的 JPEG。 渐进式的 JPEG 图片在加载时会先展示整个图片的模糊轮廓,随着扫描次数的增加,图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下,可以预览到图片的轮廓,一定程度上可以提升用户体验