---
title: 资源加载优化
summary: "介绍图片等资源的加载优化方法，包括懒加载和尺寸优化。"
docType: default
tags: [资源加载优化, 图片压缩, 懒加载策略, 资源预加载]
questions:
  - 如何使用图片懒加载减少首屏渲染压力？
  - 哪些场景适合使用图片懒加载，哪些不适合？
  - 为什么应该避免滥用 widthFix 和 heightFix 模式？
  - 如何避免图片加载导致的页面布局抖动？
  - 如何根据设备像素比选择合适的图片尺寸？
---

# 资源加载优化

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

## 使用懒加载

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

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

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

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

适用场景：

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

## 避免滥用 widthFix / heightFix 模式

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

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

```tsx
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 模式 | 预先指定宽高或使用宽高比容器固定占位 |
| 图片是否加载了超出显示需要的尺寸 | 按需裁剪尺寸 |