首屏 iframe 的 loading="lazy" 无效，因浏览器规范强制立即加载并阻塞 DOM 解析，且未预留尺寸导致布局抖动和 CLS 恶化；正确做法是首屏 iframe 初始不设 src，待需要时再动态注入。
首屏 iframe 加了 loading="lazy" 为什么还会抖
因为根本没生效——浏览器规范强制首屏 iframe 立即加载并阻塞 DOM 解析，loading="lazy" 被忽略，同时又没预留尺寸，加载完成瞬间撑开容器，下方内容被顶下去，CLS 直接爆表。
这不是兼容性问题，是规范行为：只要 iframe.getBoundingClientRect().top ，就视为“首屏内”，无论你写没写 <code>loading="lazy"。
- Chrome DevTools Network 面板里能看到，首屏
iframe的请求时间戳一定早于主页面的DOMContentLoaded -
width和height属性缺失时，浏览器首帧渲染按 0×0 占位，加载后重排不可避免 - 即使写了
style="width:100%; height:400px"，若没写 HTML 原生width/height属性，旧版 Safari 仍可能 fallback 到无占位状态
必须写 width 和 height 属性，不能只靠 CSS
布局抖动（CLS）的根源是 HTML 解析阶段缺乏尺寸确定性。CSS 的 width/height 或 aspect-ratio 是渲染层补救，但首帧不可靠；只有原生属性能让浏览器在解析 HTML 时就锁定容器尺寸。
- 正确写法：
<iframe width="800" height="450" src="about:blank" style="width:100%; height:auto"></iframe>（src="about:blank"是占位，避免空 src 触发跨域错误） - 响应式场景下，仍需保留原生值，再用 CSS 覆盖：
iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; } - 切勿只写
style="width:100%; height:400px"—— 这对 Safari 15.2 及更早版本、部分安卓 WebView 无效 - 如果 iframe 内容高度不确定（如嵌入第三方表单），至少设一个合理最小高度：
height="300"，配合min-height: 300pxCSS
首屏 iframe 绝对不要用 loading="lazy"
加了反而更糟：它既不延迟加载，又可能干扰浏览器对资源优先级的判断，导致首屏关键资源调度失衡。真正可控的方式是彻底移除 src，改用 data-src + IntersectionObserver 主动控制。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- HTML 中删掉
src，只留占位样式：<iframe width="800" height="450" style="background:#f5f5f5"></iframe> -
IntersectionObserver的rootMargin设为"0px 0px 300px 0px"，让用户还没滚到 iframe 就提前触发 - 回调中赋值
iframe.src = iframe.dataset.src后，立刻调用observer.unobserve(iframe)，否则滚动来回会重复加载 - 加载完成后加
data-loaded="true"标记，后续 tab 切换或折叠展开时可直接显示，无需重载
首次加载前必须加视觉占位，不能留白块
哪怕尺寸固定，空白背景也会造成“闪动”感，用户感知上仍是卡顿。骨架屏或 loading 提示不是锦上添花，而是防 CLS 的必要环节。
- 用轻量 SVG 占位：
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='450'%3E%3Crect width='100%25' height='100%25' fill='%23f5f5f5'/%3E%3C/svg%3E"); - 或者加一层
<div class="iframe-skeleton"></div>，CSS 设固定宽高+圆角+灰阶渐变 - 监听
iframe.onload后再移除占位层，注意：仅靠onload不代表内容可交互，contentWindow访问需额外判断同源 - 若 iframe 是折叠面板默认关闭项，初始
display: none，展开时才初始化 Observer —— 避免无意义监听
真正难处理的不是怎么写 loading="lazy"，而是很多人直到 Lighthouse 报出 CLS > 0.25 才意识到：首屏 iframe 的 src 从一开始就不该存在。
