本文介绍通过动态控制 dom 元素显隐、结合滚动监听实现按需渲染，显著缓解超长 html 页面（2800+ 行）因一次性加载全部内容导致的卡顿与滚动延迟问题。
当一个 HTML 页面内容极长（如本例中主内容达 1500+ 行、总文件 2800+ 行），且包含多个大型
区块（如 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 建议如下（关键点：首区块默认可见，其余初始隐藏）：
