JS `Intersection Observer` 高级：虚拟列表、图片懒加载与无限滚动优化

各位观众老爷们，晚上好！我是今天的主讲人，咱们今天聊聊 Intersection Observer 这个看似不起眼，实则能量巨大的 API。别看它名字有点高冷，其实用好了能让你的网页性能飞升，尤其是在虚拟列表、图片懒加载和无限滚动这些场景里，简直就是性能优化的神器！

咱们今天就来扒一扒 Intersection Observer 的皮，看看它到底能干些啥，又该怎么用才能发挥它的最大威力。

一、Intersection Observer 是个啥？

简单来说，Intersection Observer 就是一个观察者，它会观察目标元素（target element）与根元素（root element，通常是 viewport）的交叉情况。当目标元素进入、退出根元素的视口，或者交叉比例发生变化时，它就会触发回调函数。

是不是有点抽象？没关系，咱们举个栗子：

想象一下，你正在浏览一个很长的网页，Intersection Observer 就像一个勤劳的侦察兵，时刻盯着网页上的某些元素（比如图片）。当这些图片进入你的视线（viewport）时，侦察兵就会通知你：“老大，有情况！图片进入视口了！” 你就可以根据侦察兵的报告，加载这些图片，让用户看到它们。

二、Intersection Observer 的基本用法

创建 IntersectionObserver 实例：
```
const observer = new IntersectionObserver(callback, options);
```
- callback：回调函数，当目标元素与根元素交叉时触发。
- options：配置项，用于设置根元素、交叉比例等。
配置项 options：
- root：根元素，默认为 viewport。可以指定为某个 DOM 元素。
- rootMargin：根元素的 margin，用于调整交叉区域。例如，"100px 0px 100px 0px" 表示上下各增加 100px 的交叉区域。
- threshold：交叉比例，可以是单个数值或数值数组。例如，0.5 表示目标元素 50% 进入视口时触发回调，[0, 0.25, 0.5, 0.75, 1] 表示目标元素 0%、25%、50%、75%、100% 进入视口时分别触发回调。

回调函数 callback：

function callback(entries, observer) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 目标元素进入视口
      console.log('目标元素进入视口了！');
      // entry.target：目标元素
      // entry.intersectionRatio：交叉比例
      // ...
    } else {
      // 目标元素退出视口
      console.log('目标元素退出视口了！');
    }
  });
}

entries：一个数组，包含多个 IntersectionObserverEntry 对象，每个对象代表一个目标元素的交叉状态。
observer：IntersectionObserver 实例本身。

开始观察目标元素：

const target = document.querySelector('#my-element');
observer.observe(target);

停止观察目标元素：
```
observer.unobserve(target);
```
停止观察所有目标元素：
```
observer.disconnect();
```

三、Intersection Observer 的应用场景

咱们现在就来看看 Intersection Observer 在实际开发中能发挥哪些作用。

图片懒加载 (Lazy Loading)

这是 Intersection Observer 最常见的应用场景之一。当图片进入视口时才加载，可以显著减少页面初始加载时间，提高用户体验。

<img data-src="image.jpg" class="lazy-load">

<script>
  const lazyLoadImages = document.querySelectorAll('.lazy-load');

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src; // 将 data-src 赋值给 src
        img.classList.remove('lazy-load'); // 移除 lazy-load class
        observer.unobserve(img); // 停止观察该图片
      }
    });
  });

  lazyLoadImages.forEach(img => {
    observer.observe(img);
  });
</script>

优化技巧：

占位符： 在图片未加载时，可以使用占位符 (placeholder) 避免页面闪烁。可以使用纯色背景、模糊的缩略图，或者 SVG 占位符。
错误处理： 如果图片加载失败，可以显示错误提示信息，或者使用备用图片。
响应式图片： 结合 srcset 和 sizes 属性，根据设备屏幕大小加载不同分辨率的图片。

使用占位符的例子：

<img data-src="image.jpg" class="lazy-load" src="placeholder.gif">

使用 srcset 和 sizes 的例子：

<img data-src="image.jpg" class="lazy-load"
     srcset="image-small.jpg 480w,
             image-medium.jpg 800w,
             image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1200px">

无限滚动 (Infinite Scroll)

当用户滚动到页面底部时，自动加载更多内容，实现无限滚动效果。

<div id="content">
  <!-- 内容列表 -->
</div>
<div id="loading">Loading...</div>

<script>
  const content = document.querySelector('#content');
  const loading = document.querySelector('#loading');

  let page = 1;
  let isLoading = false;

  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting && !isLoading) {
        loadMoreContent();
      }
    });
  });

  observer.observe(loading);

  async function loadMoreContent() {
    isLoading = true;
    loading.style.display = 'block';

    // 模拟异步加载数据
    await new Promise(resolve => setTimeout(resolve, 1000));

    // 加载数据，并将数据添加到 content 中
    const newData = generateDummyData(page);
    newData.forEach(item => {
      const div = document.createElement('div');
      div.textContent = `Item ${item}`;
      content.appendChild(div);
    });

    page++;
    isLoading = false;
    loading.style.display = 'none';

    // 如果没有更多数据，则停止观察 loading 元素
    if (page > 5) {
      observer.unobserve(loading);
      loading.textContent = 'No more data.';
    }
  }

  function generateDummyData(page) {
    const data = [];
    for (let i = (page - 1) * 10 + 1; i <= page * 10; i++) {
      data.push(i);
    }
    return data;
  }
</script>

优化技巧：

节流 (Throttling)： 避免频繁触发 loadMoreContent 函数，可以使用节流函数限制其执行频率。
防抖 (Debouncing)： 避免用户快速滚动导致多次触发 loadMoreContent 函数，可以使用防抖函数延迟其执行。
加载状态： 在加载数据时，显示加载状态 (loading)，提示用户正在加载中。
没有更多数据： 当没有更多数据时，显示提示信息，并停止观察 loading 元素。

节流函数的例子：

function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const context = this;
    const now = Date.now();

    if (!timeoutId) {
      if (now - lastExecTime >= delay) {
        func.apply(context, args);
        lastExecTime = now;
      } else {
        timeoutId = setTimeout(() => {
          func.apply(context, args);
          lastExecTime = Date.now();
          timeoutId = null;
        }, delay);
      }
    }
  };
}

const throttledLoadMoreContent = throttle(loadMoreContent, 500); // 500ms 节流

虚拟列表 (Virtual List)

只渲染可见区域内的列表项，可以显著提高长列表的渲染性能。

<div id="virtual-list" style="height: 300px; overflow-y: scroll;">
  <div id="list-container" style="position: relative;">
    <!-- 渲染的列表项将在这里 -->
  </div>
</div>

<script>
  const virtualList = document.querySelector('#virtual-list');
  const listContainer = document.querySelector('#list-container');
  const data = Array.from({ length: 1000 }, (_, i) => `Item ${i + 1}`); // 模拟 1000 条数据
  const itemHeight = 30; // 每个列表项的高度
  const visibleCount = Math.ceil(virtualList.clientHeight / itemHeight); // 可见列表项的数量
  const totalHeight = data.length * itemHeight; // 列表总高度

  let startIndex = 0; // 起始索引
  let endIndex = startIndex + visibleCount; // 结束索引

  listContainer.style.height = `${totalHeight}px`; // 设置列表容器的高度

  function renderList() {
    const fragment = document.createDocumentFragment();
    for (let i = startIndex; i < endIndex; i++) {
      if (i >= data.length) break; // 防止索引越界
      const item = document.createElement('div');
      item.style.height = `${itemHeight}px`;
      item.style.lineHeight = `${itemHeight}px`;
      item.style.position = 'absolute';
      item.style.top = `${i * itemHeight}px`;
      item.textContent = data[i];
      fragment.appendChild(item);
    }
    listContainer.innerHTML = ''; // 清空列表容器
    listContainer.appendChild(fragment); // 添加列表项
  }

  renderList(); // 初始渲染

  virtualList.addEventListener('scroll', () => {
    const scrollTop = virtualList.scrollTop;
    const newStartIndex = Math.floor(scrollTop / itemHeight);
    const newEndIndex = newStartIndex + visibleCount;

    if (newStartIndex !== startIndex) {
      startIndex = newStartIndex;
      endIndex = newEndIndex;
      renderList();
    }
  });
</script>

优化技巧：

缓存： 可以缓存已渲染的列表项，避免重复创建 DOM 元素。
双缓冲： 使用双缓冲技术，避免页面闪烁。
滚动优化： 使用 requestAnimationFrame 优化滚动性能。

使用 Intersection Observer 实现虚拟列表：

虽然上面的例子没有直接使用 Intersection Observer，但我们可以使用它来优化虚拟列表。例如，我们可以使用 Intersection Observer 观察列表容器，当列表容器进入视口时才开始渲染列表项。

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      renderList();
      observer.unobserve(virtualList); // 停止观察，避免重复渲染
    }
  });
});

observer.observe(virtualList);

其他应用场景
- 广告曝光监测： 监测广告是否进入视口，用于统计广告曝光量。
- 元素动画： 当元素进入视口时，触发动画效果。
- 视频自动播放： 当视频进入视口时，自动播放视频。
- 页面分析： 追踪用户在页面上的行为，例如用户浏览了哪些区域。

四、Intersection Observer 的兼容性

Intersection Observer 的兼容性还是相当不错的，主流浏览器都支持。

浏览器	版本	支持情况
Chrome	58+	支持
Firefox	55+	支持
Safari	12.1+	支持
Edge	79+	支持
Internet Explorer	不支持

对于不支持 Intersection Observer 的浏览器，可以使用 polyfill 进行兼容。

五、Intersection Observer 的注意事项

性能： 虽然 Intersection Observer 性能很好，但过度使用仍然会影响页面性能。尽量避免观察过多的元素。
异步： Intersection Observer 的回调函数是异步执行的，不要在回调函数中执行耗时操作。
内存泄漏： 记得在不需要观察时，停止观察目标元素，避免内存泄漏。

六、总结

Intersection Observer 是一个非常强大的 API，可以用于实现各种各样的性能优化。掌握 Intersection Observer 的用法，可以让你在开发中更加游刃有余，写出更高效、更流畅的网页。

咱们今天的分享就到这里，希望大家有所收获。记住，性能优化没有银弹，只有不断地学习和实践，才能找到最适合自己的解决方案。感谢各位的观看！

发表回复 取消回复

发表回复取消回复