我如何設法在網頁上渲染數百萬個小圖像

我正在建立 10MPage.com，它捕捉 2025 年網路的狀態。每個網路使用者都可以上傳 64x64 像素的小圖像並為這個存檔做出貢獻。

顧名思義，它需要能夠處理 1000 萬張這樣的小圖像。當我第一次提出這個概念時，我關心的是如何有效地渲染它們。在這篇文章中，我將討論我的第一次嘗試和最終的解決方案。

在繼續之前，請訪問 10MPage.com，看看您是否能弄清楚它是如何完成的。如果您已達到 10MPage，為什麼不為自己申請一塊圖塊呢？ :)

圖像標籤與畫布

我必須做出的第一個選擇是我想使用 HTML 元素還是全螢幕畫布。

單獨的圖像標籤

我最初對每個圖塊使用單獨的

<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>

這就是它的樣子：

這很好，但有幾點可能會出現問題：

• 瀏覽器捲動
• 大型 DOM
• 延遲載入

帆布

下一個方法是透過畫布，為了簡單起見，我決定只畫一個棋盤。添加滾動也很容易，如下所示：

<p>截圖：<br>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668501927013.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I managed to render million small images on a webpage"></p>

<p>這種方法很好，因為它允許我透過程式碼渲染所有內容，這將使更高級的功能變得更容易。 </p>

<h3>
  
  
  決定圖像標籤或畫布
</h3>

<p>最後我決定使用canvas，因為它比div更靈活。這是因為諸如加載動畫、平滑滾動、延遲加載之類的事情，以及它是透過程式碼進行完整渲染的，這提供了大量控制。 </p>

<p>但是加載大量小圖像會導致大量開銷，為了最大限度地減少我想將小圖像捆綁在更大的塊中。 </p>

<h2>
  
  
  優化磁磚交付
</h2>

<p>單獨載入每個映像會增加大量的網路請求。我們在 1080p 螢幕上快速計算一下。寬度為 1920 像素，即 1920 / 64 = 30 個圖塊。高度為 1080 像素，則變為 1080 / 64 = ~17 個圖塊。因此，要在全高清顯示器上渲染全螢幕圖塊，需要渲染 30*17 = 510 個小影像。 </p><p>但是我們需要能夠滾動！當滾動時，我不想在渲染之前顯示大量加載圖標。所以這意味著我們也必須預先載入周圍的圖像。如果我們想在它周圍預先加載，我們需要添加八倍的圖塊。想像一下黑色長方形是顯示器：</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668502115888.jpg?x-oss-process=image/resize,p_40" class="lazy" 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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668502382486.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I managed to render million small images on a webpage"></p>

<p>腳本將為未填入的位置加上問號。 </p>

<p>因此，我們現在只需要24 張影像，而不是1920 * 3 = 5760 像素x 1080 * 3 = 3240 像素的4080 張影像：5760 / 1024 = ~6、3240 / 1024 = ~4（均向上捨入）、6* 4 = 24.這是可行的！ </p>

<h2>
  
  
  隱藏方塊
</h2>

<p>我實作了一些東西來「隱藏」圖塊以較大的塊加載的情況。 </p>

<h3>
  
  
  載入畫面始終有 64x64 的圖塊
</h3>

<p>載入畫面<br>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668502441571.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I managed to render million small images on a webpage"></p>

<h3>
  
  
  完整網格始終呈現正方形
</h3>

<p>為了隱藏網格底部或右側的大間隙，如果不是正方形，網格將永遠不會載入方塊。您不會在底部看到一個區塊，然後在其左側或右側看到一個空區塊。 </p>

<p>謝謝您閱讀這篇文章，希望您學到了一些東西。 <br>
如果您這樣做了，為什麼不將您最喜歡的程式語言、加密貨幣或您的寵物添加到 10MPage 中呢？它是免費的！ </p>