长页滚动优化：按需加载与懒加载技巧

根本优化思路不是“隐藏后立即显示”，而是延迟渲染 + 按需激活：初始仅保留首屏区域可见，其余区块设为 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 存活状态 + 滚动驱动的渐进式激活，既能保持单页应用的导航体验，又能将渲染负载控制在合理区间，是处理超长静态内容页面的高效实践路径。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。