不能用 innerHTML 拼接滚动监听组件，因其每次触发完整 HTML 解析、DOM 重建与重排，200 条后卡顿明显，iOS Safari 键盘弹起恢复滚动时跳屏，且丢失事件绑定、破坏焦点、隐含 XSS 风险；应改用 template.content.cloneNode(true) 克隆 DocumentFragment 并结合 IntersectionObserver 实现高性能增量渲染。
为什么不能用 innerHTML 拼接滚动监听组件
直接 innerHTML += htmlString 看似省事，但每次都会触发完整 HTML 解析 + DOM 重建 + 重排，滚动中频繁插入内容时，列表超过 200 条就明显卡顿；更严重的是，iOS Safari 在键盘弹起后恢复滚动时，会因 DOM 重置导致跳屏，且事件绑定丢失、焦点状态破坏、XSS 风险隐含。
-
template.content.cloneNode(true)返回已解析的 DocumentFragment，插入开销极低，实测千条数据快 2–3 倍 - 模板必须用
template.content，不是template.innerHTML（后者返回空字符串） - 克隆后需手动填充动态内容，不能依赖模板内插值语法
滚动监听该用 IntersectionObserver 还是 scroll 事件
监听“是否进入视口”类行为（如懒加载、触底加载），IntersectionObserver 是唯一合理选择——它不走主线程、不触发重排、不依赖 scrollHeight 计算，能绕过图片未加载、广告插入、缩放错位等导致的误判。
- 占位元素高度必须设为
1px，避免影响布局流 -
rootMargin: '0px 0px 200px 0px'提前 200px 触发，留出网络与渲染缓冲 - 回调里必须校验
entries[0].isIntersecting === true，防止重排或临时脱离视口误触发 - 移动端若容器非
body滚动（如局部overflow-y: auto），需显式传入root参数
自定义元素中如何安全挂载滚动逻辑
在 connectedCallback 中初始化 observer 和模板克隆，而非构造函数里——此时元素已挂载，可安全访问 shadowRoot 或父容器；若用 Shadow DOM，必须先调用 this.attachShadow({ mode: 'open' })。
- 占位节点（如
#sentinel）应放在模板末尾，克隆后 append 到容器底部 - 每次加载完新数据，立刻
observer.unobserve(sentinel)，插入后再observer.observe(sentinel)—— 不删 DOM，复用即可 - 禁止在模板内写
<style>标签并插入 light DOM；样式必须进shadowRoot或用adoptedStyleSheets - ID 冲突要主动处理：克隆后遍历
clone.querySelectorAll('[id]')，用Date.now()或递增计数器重写
滚动位置突变和跳动怎么控住
插入新内容后滚动条上蹿下掉，本质不是“防跳动”，而是浏览器无法预估新增 DOM 高度导致的重排抖动。解决路径是约束布局，而非修补滚动值。
立即学习“前端免费学习笔记（深入）”；
- 所有列表项必须有明确高度：用
height、min-height或aspect-ratio，禁用height: auto且子元素不浮动/不绝对定位 - 插入必须用
append()或insertAdjacentElement('beforeend', el)，拒绝innerHTML += - 容器高度不能靠
auto，需设固定max-height+overflow-y: auto，否则IntersectionObserver在局部滚动容器中可能失效 - 首次渲染后，不要动态改列表项 CSS 尺寸属性（如
font-size、padding），否则触发不可预测的重排
template 和 IntersectionObserver，只要列表项高度不固定或容器 overflow 设置不对，照样跳屏卡顿。 
