Question

我正在使用Javascript在我的网站上以幻灯片形式预加载图像，以便在请求时缓存它们（注意：通常发生在同一页面上，无需刷新。但是，根据用户行为，这仅适用于一小部分图像！）。

我正在缓存这样的图像：

function cacheImage(url) {
    var img = new Image();
    img.src = url;
    img.onload = function() { // do some stuff }
}

现在，我正在网站上缓存多达数百张图片（甚至是GIF）。我的问题是，如果我在从DOM加载后删除图像以释放内存，那么它不会提高我页面的性能（据我所知，它们仍然会被缓存在其他位置上计算机，如果再次请求，从那里服务）？如果有，怎么样？如果不是，为什么这不起作用？

Answer 1

假设没有对你预加载的img元素的持久引用，它将被Javascript垃圾收集，因此没有DOM元素将保留在内存中。

浏览器缓存将包含图像数据。它将位于磁盘缓存中，并且根据页面中的其他内容，也可能位于内存缓存中。但是，缓存由浏览器自动管理，无法从内存缓存中删除特定项目，即使可以，也不会加快页面性能。

一般来说，加速网站速度的一件事就是只在网站上对给定图片进行一次缓存，而不是在每个页面上进行缓存。一旦它被缓存在一个页面上，没有特别的理由在同一站点的另一个页面上再次预加载它。一旦它从第一个预加载进入磁盘缓存，只要再次需要它就会很快。要跟踪已缓存的内容，您可能需要在LocalStorage中存储一些数据，以便跟踪预先缓存的图像以及何时预览。

如果您真的预先处理了数百张图片，而这些图片都来自同一页面，那可能就是太多了。当用户第一次访问该页面时，它将尝试启动数百个单独的连接以预加载所有这些图像。虽然浏览器将限制一次可以建立多少连接，但这仍然有很多工作要做。我无能为力，但我认为必须有更聪明的方法来预缓存更少或预先缓存最有可能在这个特定页面上实际使用的东西，以将数量减少到不超过20左右。

如何从DOM中删除预加载的图像？

1 个答案: