html - 在单个网页中多次显示光图像时的 Base64 编码或经典 url

Question

我有一个 3.3ko 图像，我在我的网页中以 15 个不同的 img HTML balise 显示。

我想知道 Base64 编码方法对于这个用例来说是否不是一个坏主意，因为与使用“经典 URL”相比，它显着增加了页面的加载负担(因为我显示图像 15 次)。

但是我不确定更大的 HTML 页面加载速度是否仍然比必须从服务器访问图像的较小 HTML 页面慢，理论上最好的选择是什么？

Answer 1

好的，

如果您在页面中加载 base64 图像 15x，那么您将向总页面大小添加大约 510,000 位数据。此数据必须从服务器传输到客户端，并且只需要 0.5 秒多一点(超过 1mb 行)+ 页面传播延迟大约 75 毫秒。所以总时间约为(大约 500 毫秒 + 76 毫秒)=> 称之为 600 毫秒。

如果您将图像放在服务器上并通过 URL 从页面的各个部分引用它)它必须传输大约 34,000 位并且一旦下载将从本地下载缓存中提取图像进一步 14 次 + 传播图像的延迟和页面的传播延迟。从缓存中获取图像几乎不需要时间，通常 < 1ms) 1mb 行的总体预期成本大约为 (34ms + 76ms + 14ms + 76ms) => 大约 200ms。

这是一个高度简化的 View ，展示了页面加载时发生的情况以及许多因素。主机域的数量、下载线程、脚本执行、CSS 样式、定位、绘制事件、布局事件等。

您可以将 base64 字符串直接放在后台:url() CSS 标签，如果它要在 DIV 或按钮后面使用并在您的页面上重复。

但是将资源放在服务器上并根据 URL 在需要的地方下载它通常是一件好事。当图像更改时将 15 Base64 字符串复制并粘贴到页面中时，不仅是为了您的理智:)