应采用滚动触发+DOM动态管理，而非display:none；因后者不释放DOM节点，仍参与样式计算、布局及内存占用，而动态卸载/加载才能真正提升性能。
直接结论：不要一次性渲染全部数据，而是用滚动触发 + DOM 动态管理来控制可见区块的加载与卸载。
为什么 display: none 不解决海量列表性能问题
很多人第一反应是“把滚出去的列表项设成 display: none”，但这只是视觉隐藏——DOM 节点还在，样式计算、布局参与、事件监听器（哪怕没绑）都照常存在。浏览器仍需维护整个 DOM 树，滚动时重排重绘压力不减，内存占用持续升高。
-
display: none的元素仍参与 CSSOM 构建，选择器匹配成本不变 - 首次显示时仍要走完整 layout → paint 流程，等同于新挂载
- 1000 个
display: none的<div> 和 1000 个真实渲染的节点，内存开销差异极小 <h3>滚动懒加载 + DOM 移除才是有效解法</h3> <p>核心动作不是“隐藏”，而是“按需存在”：只让视口附近 ±200px 范围内的区块保留在 DOM 中；超出阈值（如顶部距离 > 1000px 或底部距离 remove() 或用 <code>DocumentFragment批量清理。- 监听
scroll事件时加节流（requestAnimationFrame优先），避免高频触发 - 每个区块用唯一
id或data-section-id标识，便于精准控制生命周期 - 移除前保存必要状态（如展开/折叠态、表单输入值），下次进入时恢复
- 避免在滚动中频繁调用
getBoundingClientRect()，可缓存并复用位置信息
HTML 结构必须支持动态拆分与插入
硬编码在主 HTML 里的超长列表无法拆解，必须提前设计为模块化结构——每个逻辑区块独立可加载、可销毁。
立即学习“前端免费学习笔记（深入）”；
- 主页面只留容器占位符：
<div id="list-container"></div> - 每个区块对应一个轻量 HTML 片段文件（如
section-a.html），不含/，仅<section id="a">...</section> - 用原生
fetch()+insertAdjacentHTML()加载，比 jQueryload()更可控、无依赖 - 插入时统一用
DocumentFragment批量操作，避免逐个appendChild触发多次重排
真正难的不是写几行加载代码，而是决定“哪些状态该持久、哪些该丢弃”，以及如何在滚动快速来回时避免重复请求和 DOM 冲突——这些细节不处理好，优化反而引入新 bug。
- 监听
