Vue/Vuetify海量图片列表：非可见节点卸载优化方案咨询

关于虚拟DOM diff耗时的推测合理性 #

你的推测完全合理。当DOM节点数量达到数万级时，Vue在响应式数据更新（比如控制覆盖层显隐的变量变化）时，需要遍历整个虚拟DOM树执行diff对比操作，这个过程的时间复杂度随节点数量线性增长。即便只是修改一个全局状态（如覆盖层的显隐），Vue也会检查所有组件的虚拟DOM节点，当节点数超过2万时，这个diff过程会显著增加主线程耗时，导致操作卡顿。

而content-visibility: auto是浏览器层面的渲染优化，它只会影响真实DOM的绘制逻辑，不会干预Vue的虚拟DOM diff流程，因此对你遇到的问题没有改善效果，这也进一步验证了问题根源在于虚拟DOM的对比开销。

实现分组卸载的基础思路 #

要解决这个问题，核心是只在视口附近保留真实DOM节点，其余分组用固定高度的占位容器替代，同时配合Intersection Observer实现动态加载/卸载的逻辑，具体步骤如下：

1. 维护分组的活跃状态 #

在组件数据中新增集合，记录当前需要渲染真实内容的分组ID，以及每个分组的真实高度（用于占位）：

data: () => ({
  imageURLsBySection: new Map() as Map<string, string[]>,
  activeSections: new Set<string>(), // 存储当前活跃的分组ID
  sectionHeights: new Map<string, number>(), // 存储每个分组的真实高度
})

2. 自定义Intersection Observer监听 #

放弃v-lazy组件，创建单个全局Intersection Observer实例（性能优于多个实例），监听所有分组容器的可见性：

mounted() {
  // 创建Observer，设置上下各1个视口高度的缓冲范围，提前加载/延迟卸载
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      const sectionId = entry.target.dataset.sectionId as string;
      if (entry.isIntersecting) {
        // 进入视口范围，标记为活跃
        this.activeSections.add(sectionId);
        // 第一次加载时记录分组高度
        if (!this.sectionHeights.has(sectionId)) {
          this.sectionHeights.set(sectionId, entry.target.offsetHeight);
        }
      } else {
        // 离开视口范围，移除活跃标记
        this.activeSections.delete(sectionId);
        // 释放本地Blob URL，避免内存泄漏
        const urls = this.imageURLsBySection.get(sectionId);
        urls?.forEach(url => URL.revokeObjectURL(url));
      }
    });
  }, {
    rootMargin: '100% 0px',
    threshold: 0.01
  });

  // 监听所有分组容器
  this.$nextTick(() => {
    document.querySelectorAll('.section-container').forEach(el => {
      observer.observe(el);
    });
  });
}

3. 模板动态渲染真实内容或占位容器 #

根据分组是否处于活跃状态，决定渲染真实图片网格还是固定高度的占位div：

<template>
  <div 
    v-for="(imageURLs, section) in imageURLsBySection" 
    :key="section"
    class="section-container"
    :data-section-id="section"
  >
    <!-- 活跃状态：渲染真实内容 -->
    <div v-if="activeSections.has(section)">
      <span>{{ section }}</span>
      <v-row>
        <v-col v-for="(imageURL, index) in imageURLs" :key="index" cols="2">
          <v-img :src="imageURL" @click="showOverlay()"/>
        </v-col>
      </v-row>
    </div>
    <!-- 非活跃状态：渲染占位容器 -->
    <div 
      v-else
      :style="{ height: `${sectionHeights.get(section) || 500}px` }"
    ></div>
  </div>
</template>

4. 额外优化点 #

• 缓冲范围调整：根据实际场景修改rootMargin的值，平衡预加载体验和DOM节点数量；
• Blob URL释放：如果使用本地Blob URL展示图片，卸载时必须调用URL.revokeObjectURL，避免内存泄漏；
• key值优化：确保分组的key唯一且稳定，避免Vue不必要的组件销毁重建；
• 内存监控：可通过浏览器DevTools的Memory面板监控内存占用，排查潜在泄漏点。

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