资源加载优化

图片是小程序中最常见的资源类型，也是影响性能的重要因素。不合理的图片使用会导致代码包体积增大、页面加载缓慢、内存占用过高。

使用懒加载

对于页面中大量的图片（如列表页、瀑布流），使用懒加载可以避免一次性加载所有图片，减少首屏渲染压力和网络带宽消耗。

Image 组件提供了 lazyLoad 属性，开启后图片只有进入或即将进入可视区域时才会开始加载：

import { Image } from '@ray-js/ray';

<Image src={item.imageUrl} lazyLoad />

适用场景：

场景	是否使用懒加载
长列表中的图片	推荐
瀑布流 / 图片墙	推荐
首屏可见的关键图片	不推荐（会延迟展示）
轮播图 / Banner	不推荐（应预加载）

避免滥用 widthFix / heightFix 模式

Image 组件的 widthFix 和 heightFix 模式会在图片加载完成后动态调整图片尺寸，导致页面布局重排和抖动。

优化方法：提前指定宽高，或使用宽高比容器固定占位：

import { Image, View } from '@ray-js/ray';

{/* ❌ 避免：使用 widthFix，高度不确定 */}
<Image src={imageUrl} mode="widthFix" style={{ width: '100%' }} />

{/* ✅ 推荐：预先指定宽高 */}
<Image src={imageUrl} mode="aspectFill" style={{ width: '100%', height: '400rpx' }} />

{/* ✅ 推荐：宽高比容器固定占位（以 16:9 为例） */}
<View style={{ position: 'relative', width: '100%', paddingBottom: '56.25%', overflow: 'hidden' }}>
  <Image
    src={imageUrl}
    style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
  />
</View>

图片尺寸优化

使用与显示尺寸匹配的图片，避免加载过大的原图。

根据设备像素比选择合适的图片尺寸，使用 2x 图片是画质和性能的较好平衡：

显示尺寸	1x 图片	2x 图片	3x 图片
100 × 100	100 × 100	200 × 200	300 × 300

检查清单

检查项	优化方法
列表图片是否一次性全部加载	使用 `lazyLoad` 属性开启懒加载
是否使用了 widthFix / heightFix 模式	预先指定宽高或使用宽高比容器固定占位
图片是否加载了超出显示需要的尺寸	按需裁剪尺寸

#资源加载优化

#使用懒加载

#避免滥用 widthFix / heightFix 模式

#图片尺寸优化

#检查清单

资源加载优化

使用懒加载

避免滥用 widthFix / heightFix 模式

图片尺寸优化

检查清单