真正拖慢高频滚动渲染的是dom节点膨胀、嵌套超4层、语义无效的冗余标签、未节流的动态插入、图片缺宽高属性及结构不稳定的滚动高亮html。
滚动页面里哪些HTML结构会拖慢渲染
高频滚动页面（比如长列表、文档阅读页、仪表盘）最怕 DOM 节点膨胀和嵌套失控。document.querySelectorAll("*").length 超过 1500 就该警觉，超过 2500 时低端设备首次滚动卡顿概率明显上升。真正卡的不是 JS，是浏览器重排重绘时遍历深层嵌套带来的开销。
<div> 嵌套超 4 层（如 <code><div><div><div><div> <p>）会让 <code>querySelector查找变慢，尤其配合 class 模糊匹配时- 用
<section></section>包裹单个<p></p>或按钮，语义无效，还多一层节点 - 动态插入内容时没做节流或虚拟滚动，
innerHTML += ...频繁触发完整 DOM 重建 - 所有图片没设
width/height属性，导致滚动中 layout thrashing -
<main></main>全局只出现一次，且不能是@#@#@#@#@#@#@#@#@#@0→<section id="intro"></section> - 所有目标区块统一加 class，如
class="scroll-section"，避免用标签名硬匹配（section可能被其他逻辑复用） - 避免在目标区块上设
position: absolute或transform，会干扰getBoundingClientRect()计算 - 不要用
<div id="section1"> 代替 <code><section id="section1"></section>—— 语义缺失不影响 JS 运行，但会让IntersectionObserver的阈值判断失准验证重构后滚动是否真变轻了
别只看代码行数少了没。真正有效的验证是跑得起来、滚得顺、读得懂。
- 关闭 CSS 后手动滚动，检查纯 HTML 是否仍按逻辑顺序可读（标题层级不断层、段落不跳序）
- 在 Chrome DevTools 的 Elements 面板里右键任意容器 → “Break on” → “Attribute modification”，观察滚动时是否频繁触发不必要的属性变更
- 用 Lighthouse 跑 Performance + Accessibility，重点关注 “Avoid large layout shifts” 和 “Heading levels should only increase by one” 两项
- 在低端 Android 设备上打开 Chrome 的 Rendering 面板，勾选 “FPS meter”，滚动时看帧率是否稳定在 55+，低于 40 就说明还有 DOM 或样式瓶颈
滚动页面的 HTML 重构，最难的不是换标签，而是判断哪个节点该留、哪个该拆、哪个该删——它取决于内容意图，而不是视觉位置。
怎么用语义标签减节点又不破结构
不是把所有 <div> 换成 <code><section></section> 就行。关键看内容是否具备「独立性」和「可分发性」——能单独被 RSS 抓取、被搜索引擎索引、被屏幕阅读器当一块内容读完。
