Question

我的应用程序看起来像一个carousal，用户在其中通过单击相关按钮相应地标记图像，然后加载下一个图像。

为了让这个应用程序更快地运行，我一次缓存10个图像。当用户处于第8个图像时，我提前缓存另外10个图像（第11到第20个）。当它是18时，我缓存下一个10（21到30），依此类推。对于缓存，我在for循环中执行以下操作：

var img = new Image();
img.src = 'https://some-site/some-image.jpg'; // different image URL each time, of course

现在，问题是当缓存中有500个图像时，应用程序会变慢。我测试了700多张图片，应用程序真的真的慢。

有没有办法在用户标记后从浏览器缓存中删除图像？

更新1：我的代码的相关部分：

    for (var i = start, l=start+10; i < l; i++) {

        var img = new Image();

        img.onload = function() {
            console.log('images loaded in cache');
            var index = list.indexOf(this);
            if (index !== -1) {
                // remove image from the array once it's loaded
                // for memory consumption reasons
                list.splice(index, 1);
            }
        };

        list.push(img);

        img.src = 'https://xxx/xxx/' + screenshotFilenames[i];

    }

Answer 1

这里有一些问题。

首先，JavaScript无法更改磁盘上的浏览器缓存。磁盘上的缓存将随着已加载的图像数量的增加而增长，并且没有停止。

您可以控制的是浏览器在页面中分配的内存量。这取决于您的图像存在多少引用。我不确定您是否使用了与帖子中显示的相同的设计方案，但基本上您已在全球范围内显示了图像。

这需要改变。保存图像的变量的生命周期需要存在较短的时间。这样就可以失去范围。一旦它失去范围，它将成为垃圾收集的候选者。但是，如果其范围仍然存在，则不会收集。

垃圾收集将递归地迭代存储在页面上的执行上下文集，并检查其变量环境是否包含合格的候选者。请注意，全局范围内的所有内容都位于词法环境中，因此在页面卸载之前永远不会进行垃圾回收。

所以你需要移动缓存的临时数组或＆＃34; active＆＃34;将图像放到某处的变量环境中，并确保一旦元素放在页面上或队列中也失去范围，它就会失去范围。

从浏览器缓存中删除特定图像

1 个答案: