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

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

getRandomImage関數(shù)

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

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. 生成された畫像 URL を保存するためのキャッシュとして機能する、imageCache という空のオブジェクトを作成します。

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

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

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

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

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

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

キャッシングの利點

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

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

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

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

結(jié)論

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

完全なコード:

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)整することを忘れないでください。

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

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