预加载图片时如何避免内存占用过高导致页面卡顿？

根本原因是图片元素即使被移除，但只要还有引用存在，内存中的bitmap就不会被释放。你当前的代码里有几个问题需要解决：第一是替换元素的方式不够优雅，第二是没有主动释放图片资源，第三是预加载策略还可以优化。

先说解决方案，分几个步骤来处理：

第一步，调整预加载的数量限制和距离阈值。虽然你设置了rootMargin为200px，但实际场景中这个值可能还是太大了。建议改成更小的值，比如50px，并且严格限制同时加载的图片数量。可以维护一个加载队列，超出数量时暂停新的加载。

第二步，重点来了，要主动释放图片资源。仅仅replaceChild是不够的，因为被替换的图片元素可能还存在于内存中。需要用更彻底的方式来清理：

const observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      loadImage(entry.target);

    } else {

      // 主动清理图片

      releaseImage(entry.target);

    }

  });

}, { rootMargin: '0px 0px 50px 0px', threshold: 0.01 });



function loadImage(target) {

  const img = new Image();

  img.src = getPreloadUrl(target.dataset.id);

  img.onload = () => target.parentNode.replaceChild(img, target);

  observer.unobserve(target); // 加载完成后取消观察

}



function releaseImage(target) {

  const img = target.querySelector('img');

  if (img) {

    img.src = ''; // 清空src

    img.onload = null;

    img.onerror = null;

    img.remove(); // 移除DOM引用

  }

}

这里的关键点在于releaseImage函数，它不仅清空了src属性，还移除了事件监听器和DOM引用，这样才能确保垃圾回收机制能够正常工作。

第三步，考虑使用更现代的图片加载方案。比如可以用<picture>标签配合srcset，或者直接用原生的loading="lazy"属性。虽然Intersection Observer很灵活，但原生懒加载在性能上会更好，浏览器自己做了很多优化。

第四步，优化缓存策略。如果同一个图片可能在不同位置出现，建议使用Map来缓存已经加载过的图片对象，避免重复请求和解码：

const imageCache = new Map();



function loadImage(target) {

  const id = target.dataset.id;

  if (imageCache.has(id)) {

    target.parentNode.replaceChild(imageCache.get(id).cloneNode(), target);

    return;

  }



  const img = new Image();

  img.src = getPreloadUrl(id);

  img.onload = () => {

    imageCache.set(id, img);

    target.parentNode.replaceChild(img.cloneNode(), target);

  };

  observer.unobserve(target);

}

最后补充几点实践经验：一是在低端设备上要特别注意图片尺寸，过大的图片即使只加载几张也会占用大量内存；二是可以考虑使用WebP格式，同等质量下体积更小；三是定期检查内存泄漏，用DevTools的Performance面板监控内存变化。

说实话这种图片预加载的优化挺烦人的，特别是移动端各种机型差异很大，有时候调优调得想砸键盘。不过按照上面这些方法一步步来，应该能把内存占用和卡顿问题控制在可接受范围内。

问题出在你只是替换了 DOM 元素，但浏览器并没有释放图片的内存。你需要手动处理图片卸载。

我之前这样搞的：用一个 Map 缓存加载过的图片，当元素离开视口时，清除 src 并 delete 对应的缓存。

const imgCache = new Map();

const observer = new IntersectionObserver((entries) => {

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      const img = new Image();

      img.src = getPreloadUrl(entry.target.dataset.id);

      imgCache.set(entry.target, img);

      entry.target.parentNode.replaceChild(img, entry.target);

    } else {

      const cachedImg = imgCache.get(entry.target);

      if (cachedImg) {

        cachedImg.src = ''; // 清除引用

        imgCache.delete(entry.target);

      }

    }

  });

}, { rootMargin: '0px 0px 200px 0px' });

再配合限制同时加载数量就能稳了。