使用 Intersection Observer API 实现无限滚动，通过监听哨兵元素进入视口触发分页加载，避免频繁 scroll 事件性能问题。创建观察器监听末尾占位元素，当其可见时请求数据并插入内容。需设置 isFetching 状态锁防止重复请求，并在组件卸载时调用 disconnect() 避免内存泄漏。配合加载提示、失败重试、最大页数限制和图片懒加载优化体验。该方案声明式监听，提升流畅度与稳定性。
使用 Intersection Observer API 实现无限滚动，能避免频繁监听 scroll 事件带来的性能问题。它通过异步观察元素是否进入视口，实现懒加载内容或触发分页请求，从而提升页面流畅度。
创建观察器监听触底元素
在页面底部设置一个占位元素（哨兵元素），用 Intersection Observer 监听它何时进入视口。一旦可见，就加载下一页数据。
基本实现方式：
- 创建一个 DOM 元素作为“触底标记”，放在列表末尾
- 初始化 IntersectionObserver，传入回调函数
- 当该元素被用户看到时，发起新的数据请求
- 加载完成后插入新内容，并可移除旧的哨兵元素，插入新的
const sentinel = document.querySelector('#sentinel');
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
loadMoreData(); // 触发数据加载
}
}, { threshold: 1.0 });
observer.observe(sentinel);
避免重复请求与内存泄漏
在真实场景中，需防止用户快速滚动导致多次触发加载。可以通过状态锁控制请求频率。
建议做法：
- 定义一个 isFetching 变量，加载开始时设为 true，完成后再设为 false
- 只有当 isFetching 为 false 且哨兵可见时才发起请求
- 在组件卸载或页面跳转时调用 observer.disconnect() 释放资源
优化用户体验与容错处理
无限滚动不应只关注技术实现，还要考虑网络异常和用户感知。
可以加入以下改进：
- 在加载过程中显示“加载中”提示，让用户知道正在获取更多内容
- 请求失败时提供重试按钮，而不是静默卡住
- 限制最大加载页数，防止内存占用过高
- 对图片等资源配合懒加载，进一步提升性能
