offscreen 元素仍拖慢 layout 是因为只要在 DOM 中且未被 containment 隔离或 display: none，就会参与每次重排计算；display: none 是唯一真正退出渲染树的方式，而 content-visibility、visibility: hidden 等均无法完全避免布局计算。
为什么 offscreen 元素还在拖慢 layout？
浏览器不是看“你有没有显示”，而是看“它会不会影响布局结果”。只要元素在 DOM 树里、没被 containment 隔离、也没用 display: none，每次重排（reflow）都会为它算一遍 offsetTop、getBoundingClientRect()、甚至参与 flex-basis 分配——哪怕它在视口外 2000px。
常见错误现象：content-visibility: hidden 加在长列表项上，却漏设 contain-intrinsic-size，滚动时频繁触发 layout + paint 回退；或者用 visibility: hidden 隐藏 tab 页内容，但父容器仍要为每个隐藏页计算 flex 布局。
-
display: none是唯一真正退出渲染树的方式，不参与任何 layout/paint/composite -
content-visibility: auto只在父容器启用了contain: layout paint且高度可预测时才有效 -
contain: layout不能阻止浏览器为该元素自身做 layout 计算，必须用contain: strict，且容器要有确定尺寸（height或min-height不为auto）
IntersectionObserver 比 scroll 监听更稳的实操要点
靠 scroll 事件手动切换 display 或 content-visibility 容易漏帧或错判：滚动惯性、触摸回弹、键盘焦点移动都会导致元素短暂进入视口后又被判定为 offscreen。
IntersectionObserver 基于渲染管线回调，精度高、无重绘抖动，且支持 rootMargin 提前加载。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 安全阈值建议：
rootMargin: '200px'，确保用户还没滚到就已 layout - 观察到
isIntersecting === false时，不能立刻设display: none，要加setTimeout(() => {}, 100)防滚动抖动误判 - 必须配合状态管理：避免 observer 多次触发同一节点的重复切换
hidden 属性在选项卡切换中到底省了什么？
hidden 属性只省 DOM 构建和事件绑定开销，不省内存或渲染树计算量。它本质是跳过 innerHTML 替换或 document.createElement + appendChild 的完整生命周期。
但它不会减少已存在节点的内存占用，也不会阻止浏览器对 hidden 元素做样式计算（只是不参与 layout 和 paint）。
- 两个视图必须同为同一父元素的直接子节点，且初始由 HTML 属性控制：
<div id="source-view"></div><div id="preview-view" hidden></div> - 父容器不能是
display: contents（会让hidden失效），也不能被 Shadow DOM 隔离 -
el.hidden = false切不回来？检查：el.style.display是否残留'none'；el.offsetParent是否为null；是否在 Web Component 的render()中动态生成内容（根本没 DOM 可切）
display: none 的坑比你想象的多
display: none 是最彻底的隐藏方式，但它的副作用也最硬：触发重排（reflow），且子元素无论设 display: block 都无效——父级已斩断渲染链。
更隐蔽的问题是：内联样式优先级高于 hidden 属性，比如 <div hidden style="display: block">，hidden 就失效了。
- 动画中频繁切换
display会严重卡顿，应改用opacity: 0 + pointer-events: none + tabindex="-1"三件套 - 想兼顾可访问性，必须同步加
aria-hidden="true"，否则屏幕阅读器仍可能读到 - 含视频、iframe 或第三方 SDK 脚本的元素，
display: none不会暂停它们——音频可能继续播放，统计脚本仍会加载
