如何优化长页面滚动性能：按需渲染与懒加载实践

区块（如 12 个可切换章节），若所有区块始终保留在 DOM 中并默认可见，浏览器需持续计算布局、绘制和合成，极易引发主线程阻塞，造成滚动卡顿、选择器响应迟滞甚至页面冻结。

根本优化思路不是“隐藏后立即显示”，而是延迟渲染 + 按需激活：初始仅保留首屏区域可见，其余区块设为 display: none（彻底移出渲染流），再通过 scroll 事件监听滚动位置，在用户即将抵达某区块前，动态将其设为 display: block，使其进入渲染流程。

以下是一个轻量、无依赖的实现方案：

// 初始化：获取所有待管理区块 const boxes = document.querySelectorAll('.box'); const boxesOffset = new Array(boxes.length); const boxesOffsetHeight = new Array(boxes.length);  let nextScrollTop = 0; let toWhichBox = 0; // 当前已激活的最后一个区块索引  // 预计算各区块顶部偏移量与高度（避免滚动中重复调用 offsetTop/offsetHeight） function updateBoxMetrics() {   boxes.forEach((box, i) => {     boxesOffset[i] = box.offsetTop;     boxesOffsetHeight[i] = box.offsetHeight;   }); } updateBoxMetrics();  // 滚动监听：仅在接近目标区域时激活下一个区块 window.addEventListener('scroll', () => {   const scrollTop = window.pageYOffset || document.documentElement.scrollTop;    // 向下滚动时，逐个激活后续区块（仅激活一个，避免批量重绘）   if (scrollTop > boxesOffset[toWhichBox] + boxesOffsetHeight[toWhichBox] &&        toWhichBox < boxes.length - 1) {      boxes[toWhichBox + 1].style.display = 'block';     toWhichBox++;     // 可选：触发一次重排以确保尺寸计算准确（现代浏览器通常无需）     // boxes[toWhichBox].offsetHeight;   } });

对应 css 建议如下（关键点：首区块默认可见，其余初始隐藏）：

/* 确保 body 有足够高度支撑滚动 */ body {   min-height: 5200px; /* 根据实际内容动态调整，或使用 height: fit-content */ }  .box {   width: 800px;   margin: 0 auto; }  #box1 { background-color: red; height: 600px; } #box2 { background-color: yellow; height: 800px; display: none; } #box3 { background-color: blue; height: 800px; display: none; } #box4 { background-color: green; height: 800px; display: none; } #box5 { background-color: pink; height: 800px; display: none; }

⚠️ 重要注意事项：

• 避免在 scroll 回调中频繁读取 .offsetTop / .offsetHeight：本例已通过预计算 + 缓存解决，否则将强制同步重排（layout thrashing），加剧卡顿；
• 慎用 visibility: hidden 替代 display: none：前者仍占用布局空间并参与渲染树构建，无法缓解性能压力；
• 配合导航 select 的优化：当用户手动切换选项（如选中“显示 A+B”）时，应直接 show(['#box1', '#box2'])，而非依赖滚动触发，确保交互即时性；
• 进阶建议：对含大量图文/iframe 的区块，可进一步结合 IntersectionObserver 实现更精准的懒加载，并添加 loading="lazy" 属性（适用于图片/iframe）。

总结而言，性能瓶颈常源于“过度渲染”。通过 display: none 控制 DOM 存活状态 + 滚动驱动的渐进式激活，既能保持单页应用的导航体验，又能将渲染负载控制在合理区间，是处理超长静态内容页面的高效实践路径。