JavaScript Image对象如何与浏览器缓存进行交互？

所以我使用简单对象换图片对象，并在加载时跟踪，就像这样：JavaScript Image对象如何与浏览器缓存进行交互？

 
var preloader = { 
    loaded: false, 
    image: new Image() 
} 
preloader.image.onload = function() { 
    preloader.loaded = true; 
} 
preloader.image.src = 'http://www.example.com/image.jpg';

当图像完成加载，preloader.loaded设置为true。这一切都很好。

我的问题是，当我拥有如此多的这些对象以及浏览器缓存用尽的很多图像时会发生什么。最终一旦加载了足够的图像，浏览器就会开始将旧的图像转储出缓存。在这种情况下，我不会得到JavaScript对象，其中loaded = true，但图像文件实际上不再被缓存？

这很难测试，因为我无法告诉任何给定的点哪些图像仍然在缓存中，哪些不在。

来源

2011-09-22 alexp

您是指RAM内缓存还是磁盘缓存？ –

从理论角度来看非常好的问题，但实际上，@ Kolink的答案是正确的 –

从网页加载图像后，它不会从缓存中使用。它实际上在浏览器页面生存期内的浏览器页面内存中，或者直到你摆脱这个JS对象，因此它可以被垃圾收集。

缓存不用于在页面上存储加载的图像。缓存被使用，以便下一次请求该图像的加载时，可以加载得更快。如果您加载的图像超过了缓存的存储量，那么您已经加载的图像在页面的持续时间内（独立于缓存）在浏览器内存中不会发生任何变化。会发生什么情况是，您加载的某些图像将不再存在于缓存中，因此下次某些浏览器页面想要加载它们时，它们将不在缓存中，并且必须从其原始网站通过互联网。

来源

2011-09-22 17:04:06 jfriend00

我明白了。所以我注意到，随着我加载更多图像，内存使用量将上升到一定的限制（Chrome中约为300M），然后下降到大约一半。这是否意味着图像仍然可用，但只存储在磁盘而不是内存中？ – alexp

加载到网页上的图像将在该网页的持续时间内保留在MEMORY中。他们唯一的办法就是将操作系统中的物理内存耗尽并将虚拟分页用于磁盘，但仍会报告内存使用情况。如果你看到浏览器的内存使用量下降，那将是其他原因。请记住，如果您通过JavaScript加载大量图像，那么如果您没有在JavaScript中保留对每个图像对象的引用，则可以对这些图像进行垃圾收集（从内存中释放并丢弃）。 – jfriend00

昨天我删除了过去几个月内建立的800MB网络缓存。总之，我认为除非用户有一台真正的旧机器，否则你不会耗尽浏览器缓存，否则你会预装太多的图像。

来源

2011-09-22 16:53:11

有磁盘缓存和内存缓存。在大多数浏览器中，可以设置这两种尺寸，包括将尺寸设置为零。他们可以很容易地被填满，虽然填满缓存与已经加载的网页图像无关 - 请参阅我的答案了解详情。 – jfriend00

虽然答案仍然适用于RAM：p谢谢您的澄清。 +1 –

JavaScript Image对象如何与浏览器缓存进行交互？

回答

相关问题