如何在无限滚动时追加元素且不阻塞滚动动画

你的问题核心在于使用container.innerHTML = container.innerHTML + newHtmlString这种方式更新DOM——这是个性能大坑！每次执行这个操作，浏览器都会销毁容器内所有旧的DOM元素，重新解析整个HTML字符串并创建新元素，这个同步操作会直接阻塞主线程，而滚动事件的处理、页面渲染都依赖主线程，自然就会出现卡顿。

下面给你几个针对性的优化方案，按优先级排序：

1. 用DOM API直接追加元素（替代innerHTML拼接） #

放弃innerHTML的拼接方式，改用原生DOM方法创建新元素并追加，这样只会操作新元素，不会触动已有DOM：

// 假设newHtmlString是多个<li>的HTML片段，比如"<li>新条目1</li><li>新条目2</li>"
const tempContainer = document.createElement('div');
tempContainer.innerHTML = newHtmlString;
// 把临时容器里的子元素逐个追加到目标列表
while (tempContainer.firstChild) {
  this.scrollableList[0].appendChild(tempContainer.firstChild);
}

如果用jQuery的话更简单，直接用append方法，它内部就是高效的DOM操作：

this.scrollableList.append(newHtmlString);

这两种方式都只会插入新元素，不会重建现有DOM，性能提升非常明显。

2. 给滚动事件加防抖（减少不必要的DOM操作） #

滚动事件触发频率极高（每秒可能几十次），如果每次滚动都触发加载逻辑，即使DOM操作优化了，也会给主线程带来压力。给滚动事件加防抖，让它在用户停止滚动一段时间后再执行：

let scrollDebounceTimer;
this.scrollableList.on('scroll', (e) => {
  // 清除之前的定时器
  clearTimeout(scrollDebounceTimer);
  // 延迟200ms执行加载逻辑（可根据需求调整延迟时长）
  scrollDebounceTimer = setTimeout(() => {
    const container = this.scrollableList[0];
    // 判断是否到达滚动阈值（比如距离底部100px时加载）
    if (container.scrollTop + container.clientHeight >= container.scrollHeight - 100) {
      // 这里用优化后的DOM追加方式加载新元素
      this.loadMoreItems();
    }
  }, 200);
});

这样可以避免频繁触发加载，减少DOM操作的次数。

3. 用requestAnimationFrame把DOM更新放到渲染周期 #

如果你的加载逻辑本身比较重，可以把DOM更新操作放到requestAnimationFrame里，让浏览器先完成当前的滚动渲染，再执行DOM更新：

function loadMoreItems() {
  // 先获取新的HTML字符串（比如从接口请求数据后生成）
  const newHtmlString = getNewItemsHtml();
  // 放到requestAnimationFrame里执行DOM更新
  requestAnimationFrame(() => {
    this.scrollableList.append(newHtmlString);
  });
}

这个方法能让DOM更新和滚动渲染错开，避免阻塞滚动动画。

再唠唠为什么原来的方式会卡？ #

innerHTML +=本质是把旧HTML和新HTML拼接成一个新字符串，然后让浏览器重新解析整个容器的内容。这个过程会：

• 销毁所有旧DOM元素，包括它们的事件监听、状态
• 重新解析HTML，创建新DOM树
• 重新计算布局和样式（重排重绘）
  这些都是同步的阻塞操作，刚好和滚动事件抢主线程，卡顿就不可避免了。

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