如何让网页预加载资源保存在客户端内存直至用户关闭页面？

问题核心原因 #

你当前代码中的Image对象是函数内部的局部变量，图片加载完成后没有被上层作用域的变量持有，很快会被JS垃圾回收机制清理。此时如果服务端没有配置静态资源强缓存，后续给DOM的img元素设置相同src时，浏览器就会重新发起下载请求，和网页内存容量无关。

解决方案 #

1. 建立全局图片缓存池 #

全局声明一个缓存容器持有所有加载完成的图片对象的强引用，只要页面不关闭，引用就不会被释放，图片会一直保留在内存中：

// 全局缓存池，页面生命周期内持续持有图片引用
const GLOBAL_IMAGE_CACHE = new Map();

function doAjaxImg(param, lambda) {
    // 命中缓存直接回调
    if (GLOBAL_IMAGE_CACHE.has(param)) {
        lambda();
        return;
    }
    const image = new Image();
    image.onload = () => {
        // 加载完成后存入缓存池，避免被GC回收
        GLOBAL_IMAGE_CACHE.set(param, image);
        lambda();
    };
    image.src = param;
}

2. 后续使用优化 #

修改页面img元素src时，如果目标图片已经在缓存池中，浏览器会直接读取内存中的资源，不会发起二次请求。你也可以直接从缓存池中取出Image对象克隆后插入DOM，进一步减少性能损耗。

3. 服务端缓存配合（可选） #

给静态图片资源配置Cache-Control: max-age=31536000, immutable响应头，开启强缓存，即使内存缓存失效，浏览器也会优先读取磁盘缓存，完全避免重复请求。

验证方法 #

打开Chrome开发者工具的Memory面板，在图片全部加载完成后拍摄堆快照，搜索对应图片的URL，能检索到对应的Image对象即说明引用持有成功，不会被垃圾回收。

内容的提问来源于stack exchange，提问作者Jurby