Html页面上的多个Base64图像和平滑加载答案

【问题标题】：Multiple Base64 images on Html page and smooth loadingHtml页面上的多个Base64图像和平滑加载
【发布时间】：2015-04-23 00:14:46
【问题描述】：

有人知道在网页上打印（base64）多个图像时进行异步图像解析的技术吗？

这会导致 Firefox 在游戏机上加载/解析时出现小幅卡顿（超过 15 张图像为 1.5MB），所以我有点担心。

我仍然认为提供 url 并使用 javascript 异步（延迟）图像加载更好，如果有人有更多信息提示，我会很高兴听到它。谢谢。

【问题讨论】：

为什么你把你的图片放在 base64 编码元素中？这可以防止浏览器缓存。
因为它们是以二进制形式存储在数据库中的。它们的数量有限，它们对于应用程序的业务模型很重要，而不仅仅是资产。也许在文件上渲染然后链接文件是更好的解决方案？我已经有一个 url 来分别呈现它们（这个解决方案没有 http 缓存）。
如果你有一个 url 来呈现它们，你可能可以设置 http 缓存（一个技巧通常是确保 url 在内容更改时更改，例如通过包含内容的哈希）
是的，不错的技巧，包括一些内容。我有一个类似“avh/intra/misc/binimage/T0RBM1pERTRNemcyTlRrNVptWmtPVEl6Wk....”的网址
标题答案（用于呈现的 url）：Cache-Control: max-age=37739520, public Connection: Keep-Alive Content-Length: 487273 Content-Type: image/gif Date: Fri, 10 Apr 2015 12:15:51 GMT Expires: Fri, 10 Apr 2015 17:15:51 GMT Keep-Alive: timeout=5, max=95 Pragma: public

【解决方案1】：

答案是，没有办法使用打印的 base64 图像控制浏览器解析速度（以 html HTTP 响应发送）。如果您打印大量图像，浏览器将使用更多 CPU 来解析网页。

如果您有 bin 图片的解决方案是单独调用它们，您将必须获取一个 url 来单独提供图片数据（无静态文件）。

这样做的问题是使浏览器缓存工作：如果不是每次加载页面时，您将不得不渲染页面上的每个图像，从而导致网络服务器过热。

另一种解决方案是在服务器端缓存图像，但客户端每次都必须下载图像，消耗网络服务器带宽。

最好是使用缓存控制，但在服务器端也使用缓存。

当然这只适用于二进制数据，如果你有图像文件，让你的网络服务器自然地服务器图像文件。

【讨论】：