瀑布流加载时滚动卡顿，IntersectionObserver优化无效怎么办？

海利 Dev 提问于 2026-02-15 15:18:28 阅读 16

优化

我在用IntersectionObserver实现瀑布流布局时，发现滚动到加载区时页面会卡顿半秒。之前用了虚拟滚动只渲染可视区元素，但瀑布流布局高度不固定，改用观察器动态加载后问题依旧。代码逻辑应该是对的，但加载时控制台显示大量recalculateStyle警告：


const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      for(let i=0; i<20; i++) { // 每次加载20条
        const item = document.createElement('div');
        item.style.height = Math.random()*200+200 + 'px';
        this.container.appendChild(item);
      }
      observer.unobserve(entry.target);
    }
  });
}, { rootMargin: '200px' });

observer.observe(this.loadTrigger);

试过把20改成5，卡顿稍微缓解但图片懒加载时依然明显。是不是DOM操作太频繁了？或者应该用其他方式计算列高度？

长列表优化

我来解答赞 3 收藏

反馈

1 条解答

炎昊 Dev Lv1

问题出在频繁的DOM操作和样式计算上，我一般直接用文档片段（DocumentFragment）来批量插入元素，减少回流重绘。把图片懒加载改成提前预加载，避免加载时的卡顿。

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

  entries.forEach(entry => {

    if (entry.isIntersecting) {

      const fragment = document.createDocumentFragment();

      for(let i=0; i<20; i++) {

        const item = document.createElement('div');

        item.style.height = Math.random()*200+200 + 'px';

        fragment.appendChild(item);

      }

      this.container.appendChild(fragment);

      observer.unobserve(entry.target);

    }

  });

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



observer.observe(this.loadTrigger);

如果还卡，建议把图片资源提前加载好，别等到滚动才加载，太影响体验了。

2026-02-15 16:01