React 应用中图片加载优化：提升性能的实用指南-js教程-PHP中文网

React 应用中图片加载优化：提升性能的实用指南

聖光之護

发布： 2025-09-02 20:30:02

原创

571人浏览过

React 应用中图片加载优化：提升性能的实用指南

本文旨在解决 React 应用中使用 Unsplash API 加载图片时遇到的性能问题。通过分析问题根源，即加载过大尺寸的图片，本文提供了优化方案，包括选择合适的图片尺寸、使用图片懒加载、优化图片格式等，帮助开发者显著提升图片加载速度，改善用户体验。

在 react 应用中，高效的图片加载对于提供流畅的用户体验至关重要。当从外部 api（例如 unsplash api）获取图片并在应用中展示时，未经优化的图片加载可能导致页面加载缓慢，影响用户体验。本文将深入探讨如何优化 react 应用中的图片加载，特别是在使用 unsplash api 的场景下。

1. 选择合适的图片尺寸

从 Unsplash API 获取图片时，一个常见的性能瓶颈是加载了过大尺寸的图片。Unsplash API 提供了多种图片尺寸选项，开发者应该根据实际需求选择合适的尺寸。

原始代码中使用了 item.urls.full，这通常是最高分辨率的图片。对于在较小容器中显示的图片，加载如此高分辨率的图片是没有必要的，反而会浪费带宽和计算资源。

Unsplash API 提供了以下几种常用的图片尺寸：

raw: 原始尺寸
full: 最大尺寸
regular: 中等尺寸
small: 较小尺寸
thumb: 缩略图

通过修改代码，使用 item.urls.regular 或 item.urls.small，可以显著减少图片加载时间。

<img src={item.urls.regular} alt={item.alt_description}/>

登录后复制

建议： 在选择图片尺寸时，应根据图片在页面上的显示大小进行权衡。避免加载大于显示区域的图片，以减少不必要的资源消耗。

2. 图片懒加载

图片懒加载是一种延迟加载页面上非关键区域图片的技术。这意味着只有当图片进入用户视口时才会被加载，从而减少初始页面加载时间。

可以使用 react-lazyload 等第三方库来实现图片懒加载。

首先，安装 react-lazyload：

npm install react-lazyload

登录后复制

然后，在代码中使用 LazyLoad 组件包裹 img 标签：

import LazyLoad from 'react-lazyload';

{containerImgs.map(item => (
    <div key={item.id} className="card">
        <LazyLoad height={200} offset={100}>
            <img src={item.urls.regular} alt={item.alt_description} />
        </LazyLoad>
        <div className='user-info'>{item.user.name}</div>
    </div>
))}

登录后复制

height 属性指定了占位符的高度，offset 属性指定了图片在进入视口多少像素时开始加载。

注意： 图片懒加载可能会影响 SEO，需要根据具体情况进行权衡。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

查看详情

3. 优化图片格式

图片格式也会影响加载速度。通常情况下，WebP 格式的图片比 JPEG 或 PNG 格式的图片具有更好的压缩率，可以在保证图片质量的前提下减少文件大小。

可以使用在线工具或图像处理软件将图片转换为 WebP 格式。

建议： 尽量使用 WebP 格式的图片，并确保服务器正确配置以支持 WebP 格式。

4. 图片压缩

即使选择了合适的图片尺寸和格式，对图片进行压缩仍然可以进一步减小文件大小，提高加载速度。

可以使用在线图片压缩工具或构建时工具（例如 webpack 的 image-webpack-loader）来自动压缩图片。

5. 使用 CDN

内容分发网络 (CDN) 可以将图片缓存在全球各地的服务器上，从而使用户可以从离他们最近的服务器加载图片，减少延迟。

可以将 Unsplash API 返回的图片 URL 直接指向 CDN，或者将图片上传到自己的 CDN。

6. 代码示例优化

原始代码中，getPhotos 函数在每次输入框内容改变时都会被调用，这会导致不必要的 API 请求。可以使用 debounce 或 throttle 函数来限制 API 请求的频率。

import { useState, React, useCallback } from 'react';
import debounce from 'lodash.debounce';

function App() {
  const [search, setSearch] = useState('');
  const [containerImgs, setContainerImgs] = useState([]);

  const getPhotos = useCallback(async (searchQuery) => {
    let response = await fetch(`https://api.unsplash.com/search/photos?page=1&query=${searchQuery}&client_id={APP-SECRET}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });

    let result = await response.json();
    if (result) {
      setContainerImgs(result.results);
      console.log(result.results);
    }
  }, []);

  const debouncedGetPhotos = useCallback(debounce(getPhotos, 300), [getPhotos]);

  const searchInput = event => {
    const searchTerm = event.target.value;
    setSearch(searchTerm);
    debouncedGetPhotos(searchTerm);
  };

  return (
    <div className="container">
      <input type="text" onChange={searchInput} />
      <div className="images-container">
        {containerImgs.map(item => (
          <div key={item.id} className="card">
            <img src={item.urls.regular} alt={item.alt_description} />
            <div className='user-info'>{item.user.name}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

登录后复制

在这个示例中，debounce 函数确保 getPhotos 函数在用户停止输入 300 毫秒后才会被调用。