Intersection Observer 适合表格懒加载，因其以元素是否可见为判断依据，无需依赖 scroll 事件和 scrollTop 计算，且通过共用实例观察带 data-status="pending" 的行节点、设置 root 为滚动容器及 threshold=[0,0.1]，可精准高效触发加载。
Intersection Observer 为什么适合表格懒加载
表格滚动懒加载不是靠监听 scroll 事件，因为表格内容常嵌在固定高度容器里（比如 <div style="height: 400px; overflow-y: auto">），而 scroll 在父容器上触发时，目标行元素可能根本没进入视口——尤其当表格行数多、每行高度不一、或使用虚拟滚动时，scroll 的节流和坐标计算极易出错。Intersection Observer 天然以“是否可见”为判断依据，无视滚动源、不依赖 scrollTop 计算，且浏览器原生优化了性能。
关键点：IntersectionObserver 观察的是 行元素本身（如 <tr> 或包裹行的 <div>），不是整个表格容器；它只在元素真正进入或离开视口时回调，没有误触发风险。
如何给表格行注册 Observer 实例
不能对所有 <tr> 单独 new 一个 Observer——开销太大。正确做法是：共用一个 Observer 实例，批量观察所有待加载的行节点。
- 初始化时只观察那些
data-status="pending"的行（即尚未加载数据的占位行） - Observer 的
root应设为表格的可滚动容器（不是document），否则视口判定会失效 -
threshold建议设为[0, 0.1]：0 表示刚接触视口就触发，0.1 表示 10% 高度进入即加载，兼顾提前量与响应性 - 每次回调中，遍历
entries，对entry.isIntersecting === true的行调用加载逻辑，然后移除该行的data-status属性或改为"loaded"，避免重复加载
示例片段：
立即学习“前端免费学习笔记（深入）”；
const container = document.querySelector('#table-container');
const observer = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const row = entry.target;
if (row.dataset.status === 'pending') {
loadRowData(row); // 自定义加载函数
row.dataset.status = 'loaded';
}
}
});
},
{ root: container, threshold: [0, 0.1] }
);
document.querySelectorAll('tr[data-status="pending"]').forEach(row => {
observer.observe(row);
});
表格结构必须满足的 DOM 条件
Observer 对 <tr> 直接生效的前提是：这些 <tr> 必须能被正常计算几何位置。常见破坏条件：
-
<tr>父级是<table>，但<table>本身不在可滚动容器内 → 视口永远是整个页面，失效 - 使用了
display: contents或visibility: hidden的祖先元素 →entry.boundingClientRect返回全零，isIntersecting恒为false - 行元素被
transform或position: absolute移出文档流 → Observer 无法追踪其真实位置 - 表格设置了
table-layout: fixed但列宽未定义 → 浏览器可能延迟渲染行高，导致首次观测返回错误intersectionRatio
稳妥方案：把每行包装进一个 <div class="table-row-wrapper">，让这个 <div> 成为 Observer 的目标节点，并用 CSS 模拟表格布局（display: table-row），这样控制权完全在你手上。
加载后如何避免布局抖动与重复请求
懒加载的数据插入后，如果新内容高度大于占位行，会导致下方行突然下移，触发新一轮 Intersection 回调，形成循环加载。这是最隐蔽也最常见的坑。
- 所有占位行初始必须有明确高度（如
min-height: 48px或height: 48px），且禁止用height: auto - 加载完成后，用
observer.unobserve(row)主动取消对该行的观察，而不是等它移出视口再靠isIntersecting === false判断 - 如果加载的是富文本或图片，确保图片加
loading="lazy"，并设置width/height属性预留空间 - 避免在加载回调里直接修改表格结构（如 appendChild 到
<tbody>）——改用row.innerHTML = ...替换整行内容，保持 DOM 节点复用
复杂点在于：当用户快速滚动时，Observer 可能批量触发几十个回调，而你的 loadRowData 如果是 Promise，需注意并发控制。简单场景用 Promise.allSettled 批量处理；高频滚动场景建议加防抖或队列限流，否则网络请求数会爆炸。
