我如何设法在网页上渲染数百万个小图像

我正在构建 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>