---
title: 资源加载优化
summary: "介绍小程序图片资源加载优化方法，包括懒加载和尺寸匹配策略。"
questions:
  - image 组件的 lazy-load 属性是如何工作的？
  - 哪些场景适合使用图片懒加载，哪些不适合？
  - 为什么应避免滥用 widthFix 和 heightFix 模式？
  - 如何使用宽高比容器解决图片布局抖动问题？
  - 如何根据设备像素比选择合适的图片尺寸？
  - 不合理的图片使用会导致哪些性能问题？
  - 首屏可见的关键图片为什么不推荐使用懒加载？
  - 图片尺寸优化中 2x 图片为什么是画质和性能的较好平衡？
docType: default
---

# 资源加载优化

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

## 使用懒加载

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

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

```html
<image src="{{item.imageUrl}}" lazy-load />
```

适用场景：

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

## 避免滥用 widthFix / heightFix 模式

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

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

```html
<!-- ❌ 避免：使用 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%; padding-bottom: 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 |

## 检查清单

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