Chrome浏览器空间不足时会自动清理图片缓存吗？JS如何清理图片缓存？

先明确两个容易混淆的缓存概念 #

所有问题的核心是要区分浏览器的两类图片缓存，二者回收逻辑完全不同：

• 磁盘HTTP缓存：存在本地硬盘中，存储压缩后的原始图片文件，由浏览器全局统一管理，空间占满后会自动按LRU规则淘汰旧资源，这部分不需要手动干预。
• 内存解码缓存：存在页面运行内存中，存储解压解码后的位图（这部分是内存占用的大头，一张4K分辨率的图解码后就能占几十MB内存），这部分的回收规则和大部分人认知的不一样。

1. 是否需要主动清理已加载的<img>资源？ #

如果你的图片查看器总图片量超过100张、单张图分辨率高于2K，必须主动清理。
display:none 完全不会降低内存占用：只要img标签的src属性被浏览器解析，就会触发网络请求、图片解码流程，最终把解码后的位图存在内存中，这个过程和元素是否可见、是否在可视区域没有任何关系。几千张大图不做清理的话，单页内存占用很容易冲到数GB，轻则翻页卡顿、动画掉帧，重则直接被浏览器判定为内存溢出强制关闭页面。

2. 浏览器达到缓存上限时，会自动清理display:none的<img>资源吗？ #

不会专门针对这类资源做清理。
浏览器触发内存回收的时机完全不可控，且回收优先级非常明确：

1. 最先回收：已经从DOM树移除、且没有任何JavaScript变量持有引用的资源
2. 其次回收：距离当前视口极远、且标记了懒加载的资源
3. 最后才会考虑仍在DOM树里的元素——哪怕你设了display:none，只要src还指向原图，这部分内存就会一直被占用，直到页面内存实在不够用了才可能被回收，而且回收过程会跑在主线程上，大概率造成明显的界面卡顿。
   另外不少旧版本WebKit内核浏览器（比如旧版Safari、旧版安卓自带浏览器）根本不会回收仍在DOM树内的图片解码内存，不管你设不设display:none，占用的内存一点都不会释放。

3. JavaScript清理缓存图片的最佳方案 #

没有特殊黑科技，按以下方案实现兼容性和性能表现最好：

• 核心逻辑：只保留当前页+前后相邻1-2页的有效图片资源，距离更远的分页资源全部释放：
  1. 对暂时不需要展示的分页图片，先把src属性替换为1x1透明占位图：data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==，这一步会立刻触发浏览器释放对应图片的解码内存，没有延迟
  2. 对用户已经翻过去5页以上的旧内容，直接把对应的img节点从DOM中移除，同时清空所有JS变量对这些节点的引用，方便垃圾回收器回收内存
• 兜底优化：所有动态加载的img标签默认加上loading="lazy"属性，注意这个属性只对未加载的图片生效，已经加载完成的图片加了没有效果。
• 常见避坑点：
  • 不要试图靠修改opacity、visibility、display属性释放资源，这些操作完全不会触发图片内存回收
  • 不要反复给同一个img节点重复赋值同一个大尺寸图片地址，会重复触发解码流程，浪费性能
  • 如果使用了React/Vue这类前端框架，不要只靠框架的自动重渲染移除节点，要确认旧img的src引用已经被替换，避免虚拟DOM持有引用导致内存泄漏

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