使用JavaScript加载图像的成本有多高？

我已经想了很长时间了，我想我应该在这里问这个问题

---

让我们以旋转器为例。可以使用javascript和CSS3显示微调器。不过，我们只需使用javascript加载一个spinner.gif，就可以完成这项工作。在我看来，在分布式代码（JavaEE应用程序）中，每次都必须从服务器检索映像，因此成本会更高。我的假设正确吗？专家们知道这里还有哪些帖子已经比较了这两个过程吗？

浏览器会缓存图像（包括磁盘缓存和内存缓存），无论图像是否通过页面中的HTML加载，

.innerHTML

由脚本设置，

.src

由脚本设置或由脚本创建的新图像对象。在所有情况下，浏览器都使用缓存，除非客户端已关闭缓存，或者服务器已指示浏览器不缓存特定资源。因此，如果图像已经在缓存中，则在通过脚本设置时，它将立即可用。当在缓存中找到映像时，它不是从服务器加载的，而是直接从本地缓存加载的

脚本设置的图像在后台异步加载

如果您担心第一次访问映像（或映像在缓存中老化）时，则必须从服务器加载映像。如果加载映像时的短暂延迟导致性能问题或延迟，则可以通过在需要之前加载映像来预缓存映像，从而使浏览器缓存映像，以便稍后立即可用

通过确保在图像检索时具有最佳的头设置，以允许浏览器尽可能多地缓存图像，可以减轻服务器上的负载。你可以阅读谷歌对HTTP缓存的评论，下面是一个例子

仅供参考，以下是一些有关如何手动预加载图像（到缓存中）的参考：

---

我不是专家，只是出于好奇，为什么会担心“必须从服务器检索图像…”这不是正确的缓存答案吗？不是JS“加载”图像-它最多只能创建一个图像对象或执行其他触发请求的操作。而相同的图像URL是否再次被请求或从缓存中获取，主要取决于服务器发送的缓存指令。仅“加载”图像可能是企业级的。你应该创建一个合适的

ImageLoaderInterface

，甚至可以创建一个抽象的工厂服务提供商来向用户显示一个图像。这太棒了。这正是我想要的解释。谢谢。@TheDarkKnight-我添加了一些对包含将图像预加载到缓存中的代码的帖子的引用。谢谢！非常感谢@jfriend00上一天我在监控我网站的缓存性能（基于图库），我注意到firebug/chrome中有时缓存=未命中。。所以我想知道为什么浏览器不总是使用缓存的图像。。。我应该去哪里调查？知道缓存未被清除，并且图像缓存在浏览器中，但在每次http请求时，某些图像不会从缓存中加载。。这正常吗？@AwRak-您必须首先从服务器上的缓存设置开始，查看允许缓存图像的时间。有许多设置可能会影响缓存的时间-在对特定情况下的图像设置进行一些调查后，您可能希望发布一个新问题，询问特定类型的帮助以了解您拥有的内容。