使用content-visibility: auto后筛选失效，求大量图片页面优化方案

问题根因 #

你给顶层容器添加content-visibility: auto后，不在当前视口内的元素会被浏览器跳过渲染流程，此时通过innerText读取元素文本内容时，浏览器不会主动触发未渲染元素的内容计算，拿到的是空值，自然匹配不到筛选关键词，才会出现只有可见元素被命中的问题。

可选解决方案 #

方案1：继续使用content-visibility的修复方案 #

不需要替换现有技术栈，只要调整筛选逻辑即可：

• 提前把每个卡片的筛选关键词存在元素的自定义属性中，不要依赖实时读取innerText做判断。比如给每个itemWrapperColumns元素加data-filter-key属性，提前写入需要匹配的全部文本内容：

  <div class="itemWrapperColumns" data-filter-key="商品名称 分类标签 其他匹配字段">
    <!-- 卡片原有内容 -->
  </div>
  

• 修改筛选逻辑，读取提前存储的自定义属性值做匹配，完全不受元素是否渲染的影响：

  function filter() {
    const input = document.getElementById('userFilter');
    const filter = input.value.toUpperCase();
    const itemWrappers = document.getElementsByClassName('itemWrapperColumns');
    for (let i = 0; i < itemWrappers.length; i++) {
      const item = itemWrappers[i];
      // 读取提前存储的筛选字段，无需访问渲染后的元素内容
      const filterKey = item.dataset.filterKey.toUpperCase();
      if (filterKey.indexOf(filter) > -1) {
        item.style.display = "";
      } else {
        item.style.display = "none";
      }
    }
  }
  

• 额外优化：建议把content-visibility: auto属性加在每个独立的itemWrapperColumns元素上，而非顶层容器，同时给每个卡片配置contain-intrinsic-size预设大致宽高，避免筛选后页面滚动条出现大幅跳变。

方案2：替换为虚拟滚动方案（更推荐） #

content-visibility属于被动渲染优化，适配场景有限，4000张图片的场景更推荐使用虚拟滚动，不管总数据量多大都能保持页面流畅：

• 核心逻辑：把所有卡片的基础数据（图片链接、筛选关键词、排序字段等）提前存在JS数组中，不全量渲染到DOM；监听滚动事件计算当前视口需要展示的数组下标范围，只渲染这部分对应的DOM元素。
• 筛选、排序时直接操作JS数组，再重新计算需要渲染的元素即可，完全不会出现匹配不到符合条件元素的问题，性能比全量DOM加content-visibility的方案稳定很多。

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