Web ページ上に何百万もの小さな画像をレンダリングする方法

<div>



<p>With this CSS:<br>
</p>

<pre class="brush:php;toolbar:false">    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: auto; /* Enable scrolling */
        }

        .grid {
            display: block;
            position: relative;
            width: 100%; /* The grid will take the full width */
        }

        .row {
            display: flex; /* Each row is a flex container */
        }

        .tile {
            width: 64px;
            height: 64px;
            box-sizing: border-box;
            border: 1px solid #ccc; /* Visual separation between tiles */
        }

        .tile img {
            width: 64px;
            height: 64px;
            object-fit: cover;
        }
    </style>

<p>スクリーンショット:<br>
<img src="https://img.php.cn/upload/article/000/000/000/173668501927013.jpg" alt="How I managed to render million small images on a webpage"></p>

<p>このアプローチは、コードを介してすべてをレンダリングできるため、より高度な機能が簡単になるため、優れています。</p>

<h3>
  
  
  イメージタグまたはキャンバスの決定
</h3>

<p>最終的には、div よりも柔軟性が高い Canvas を使用することにしました。これは、アニメーションの読み込み、スムーズなスクロール、遅延読み込み、および多くの制御を提供するコードを介してレンダリングされるという事実によるものです。 </p>

<p>しかし、小さな画像をたくさん読み込むと多くのオーバーヘッドが発生するため、それを最小限に抑えるために、小さな画像を大きなブロックにバンドルしたいと考えています。</p>

<h2>
  
  
  タイル配信を最適化する
</h2>

<p>各画像を個別にロードすると、大量のネットワーク要求が追加されます。 1080p 画面で簡単に計算してみましょう。幅は 1920 ピクセルで、1920 / 64 = 30 タイルになります。高さが 1080 ピクセルの場合、1080 / 64 = ~17 タイルになります。したがって、フル HD ディスプレイでタイルの全画面をレンダリングするには、30*17 = 510 個の小さな画像をレンダリングする必要があります。 </p><p>ただし、スクロールできる必要があります。また、スクロールするときに、レンダリング前に大量の読み込みアイコンを表示したくありません。つまり、周囲の画像も事前にロードする必要があります。それを事前にロードしたい場合は、8 倍のタイルを追加する必要があります。黒い長方形がディスプレイであると想像してください:</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173668502115888.jpg" alt="How I managed to render million small images on a webpage"></p>

<p>*<em>これは、510 * 8 = 4080 枚の画像になります。 *</em></p>

<p>これほど多くの画像を高速にレンダリングするのは現実的ではありません。解決策は？  個々のタイルを組み合わせて大きなブロックにします。</p>

<p>PHP を使用して、16*16 タイルを含む画像を生成するコントローラーを作成しました。各ブロックの幅と高さは 64 * 16 = 1024 ピクセルです。これは、10MPage にアクセスしてコンソールのネットワーク タブを見ると確認できます。</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173668502382486.jpg" alt="How I managed to render million small images on a webpage"></p>

<p>スクリプトは、塗りつぶされていない箇所に疑問符を追加します。</p>

<p>つまり、1920 * 3 = 5760 ピクセル x 1080 * 3 = 3240 ピクセルの場合、4080 枚の画像の代わりに、必要な画像は 24 枚だけになります: 5760 / 1024 = ~6、3240 / 1024 = ~4 (両方とも切り上げ)、6* 4 = 24。どちらが可能ですか!</p>

<h2>
  
  
  ブロックを隠す
</h2>

<p>タイルが大きなブロックで読み込まれることを「隠す」ために、いくつかのことを実装しました。</p>

<h3>
  
  
  ロード画面には常に 64x64 タイルが表示されます
</h3>

<p>ロード画面<br>
<img src="https://img.php.cn/upload/article/000/000/000/173668502441571.jpg" alt="How I managed to render million small images on a webpage"></p>

<h3>
  
  
  フルグリッドは常に正方形にレンダリングされます
</h3>

<p>グリッドの下部または右側にある大きなギャップを隠すために、グリッドが正方形でない場合、グリッドはブロックをロードしません。一番下にブロックが表示されず、その左側または右側に空のブロックが表示されます。</p>

<p>この記事をお読みいただきありがとうございます。何かを学んでいただければ幸いです。 <br>
もしそうなら、お気に入りのプログラミング言語、暗号通貨、またはペットを 10MPage に追加してみてはいかがでしょうか?無料です!</p>