JavaScript でのランダム畫(huà)像の生成とキャッシュ

多くの Web アプリケーションでは、プレースホルダー、サムネイル、ビジュアル コンテンツなどのさまざまな目的でランダムな畫(huà)像を表示するのが一般的です。ただし、リクエストごとにランダムなイメージを生成することは、特に同じイメージを複數(shù)回再利用する場(chǎng)合には非効率になる可能性があります。この記事では、JavaScript を使用してランダムな畫(huà)像を効率的に生成し、冗長(zhǎng)な API 呼び出しを回避するキャッシュ メカニズムを?qū)g裝する方法を検討します。

getRandomImage関數(shù)

getRandomImage 関數(shù)は、指定された幅、高さ、およびランダム ID に基づいてランダムな畫(huà)像 URL を生成するユーティリティ関數(shù)です。この関數(shù)がどのように機(jī)能するかを詳しく見(jiàn)てみましょう:

const imageCache = {};

const getRandomImage = (width, height, randomId) => {
  const cacheKey = `${width}_${height}_${randomId}`;

  if (imageCache[cacheKey]) {
    return imageCache[cacheKey];
  }

  const imageUrl = `https://picsum.photos/${width}/${height}?random=${randomId}`;
  imageCache[cacheKey] = imageUrl;

  return imageUrl;
};

コードを段階的に分解してみましょう:

1. 生成された畫(huà)像 URL を保存するためのキャッシュとして機(jī)能する、imageCache という空のオブジェクトを作成します。

2. getRandomImage 関數(shù)は、width、height、randomId の 3 つのパラメータを取ります。これらのパラメータを使用すると、ランダムな畫(huà)像のサイズと一意性を制御できます。

3. 関數(shù)內(nèi)で、width、height、randomId の値を連結(jié)して一意のキャッシュ キーを生成します。このキーは、畫(huà)像 URL をキャッシュに保存したりキャッシュから取得したりするために使用されます。

4. キャッシュ キーに対応する畫(huà)像 URL が既にキャッシュに存在するかどうかを確認(rèn)します。存在する場(chǎng)合は、新しい畫(huà)像 URL を生成するのではなく、単純にキャッシュされた畫(huà)像 URL を返します。

5. 畫(huà)像 URL がキャッシュ內(nèi)に見(jiàn)つからない場(chǎng)合は、picsum.photos API を使用して新しい URL を生成します。この API は、指定された幅、高さ、およびランダム ID に基づいて、さまざまな寸法のランダムな畫(huà)像を提供します。

6. 新しく生成された畫(huà)像 URL は、將來(lái)の使用に備えてキャッシュ キーを使用してキャッシュに保存されます。

7. 最後に、生成された畫(huà)像の URL を返します。

キャッシングの利點(diǎn)

getRandomImage 関數(shù)にキャッシュ メカニズムを?qū)g裝すると、いくつかの利點(diǎn)があります。

• 効率: 畫(huà)像 URL をキャッシュすることで、幅、高さ、ランダム ID の同じ組み合わせに対して冗長(zhǎng)な API 呼び出しを行うことを回避します。これにより、アプリケーションの全體的なパフォーマンスが向上し、不要なネットワーク リクエストが削減されます。

• 再利用: キャッシュ メカニズムにより、毎回新しい畫(huà)像 URL を再生成することなく、同じランダムな畫(huà)像を複數(shù)回再利用できます。これは、アプリケーションの異なるセクションまたはコンポーネント間で同じ畫(huà)像を表示する場(chǎng)合に特に便利で、一貫性を高め、不要なオーバーヘッドを削減します。

• 一貫性: 幅、高さ、ランダム ID の同じ組み合わせが再び見(jiàn)つかった場(chǎng)合、関數(shù)はキャッシュから畫(huà)像 URL を取得し、アプリケーション全體で表示される畫(huà)像の一貫性を確保します。

結(jié)論

この記事では、getRandomImage 関數(shù)を使用して JavaScript でランダムな畫(huà)像を効率的に生成する方法を検討しました。キャッシュ メカニズムを?qū)g裝することで、冗長(zhǎng)な API 呼び出しを回避し、Web アプリケーションのパフォーマンスを向上させることができます。キャッシュ メカニズムには、効率の向上、イメージの再利用、一貫性などの利點(diǎn)があります。 getRandomImage 関數(shù)を自由に調(diào)整してプロジェクトに組み込んで、ランダム イメージの生成を強(qiáng)化してください。

完全なコード:

const imageCache = {};

const getRandomImage = (width, height, randomId) => {
  const cacheKey = `${width}_${height}_${randomId}`;

  if (imageCache[cacheKey]) {
    return imageCache[cacheKey];
  }

  const imageUrl = `https://picsum.photos/${width}/${height}?random=${randomId}`;
  imageCache[cacheKey] = imageUrl;

  return imageUrl;
};

特定の要件に合わせて関數(shù)とキャッシュ メカニズムを適応させ、必要に応じてキャッシュ戦略を調(diào)整することを忘れないでください。

私のニュースレターを購(gòu)読して、スキルを磨き続けるためのヒント、コツ、課題を入手してください。ニュースレターを購(gòu)読する

以上がJavaScript でのランダム畫(huà)像の生成とキャッシュの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。