广告加载需四层协同：脚本必须async并移至body开头；iframe需显式sandbox="allow-scripts allow-popups"；禁用loading="lazy"改用intersectionobserver动态创建；csp须分设script-src和frame-src且禁用unsafe选项。
广告脚本同步加载直接卡死HTML解析
浏览器遇到没加 async 或 defer 的 <script src="ad.js"></script>，会立刻暂停 HTML 解析，等脚本下载、执行完才继续——首屏 DOM 树构建就此中断。这不是“慢”，是“停”。常见现象包括：首屏文字/图片完全不出现、DOMContentLoaded 延迟 2s+、LCP 指标崩坏。
实操建议：
- 所有广告 SDK 脚本（如
gpt.js、qg.js）必须加async，严禁放里 - 把
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>移到开头，紧贴首屏容器之后 - 删掉所有内联广告初始化代码（比如
googletag.cmd.push(...)），统一用googletag.enableServices()在async脚本加载完成后调用
iframe 广告没设 sandbox 或权限过窄导致白屏静默失败
sandbox="" 或 sandbox 属性空值，等于让浏览器直接拒绝解析 iframe 内容，Network 面板显示 net::ERR_BLOCKED_BY_RESPONSE，控制台无报错、无日志、无请求——广告位彻底空白，且查不到原因。
实操建议：
- 广告
<iframe></iframe>必须显式写sandbox="allow-scripts allow-popups"，不能只写sandbox - 绝对禁止
allow-same-origin和allow-top-navigation，前者破坏隔离，后者可能被用于跳转劫持 - 如果广告返回的是内联 JS（如
onclick、javascript:void(0)），仅allow-scripts不够，需确认 SDK 是否支持无内联行为模式；否则要改用动态fetch+innerHTML注入
loading="lazy" 对广告 iframe 完全无效还引发重复请求
原生 loading="lazy" 只对静态 HTML 中直接书写的 <iframe src="..."></iframe> 生效，而广告 SDK 多数动态创建 iframe，或返回跨域 src，导致该属性被忽略。更糟的是：浏览器可能提前预加载 src，JS 再调一次 refresh()，造成两次曝光计费。
实操建议：
- 广告容器一律不用
<iframe src="..." loading="lazy"></iframe>，改用占位<div class="ad-slot" data-ad-unit="/123/home_top"></div> - 用
IntersectionObserver监听进入视口（threshold: 0.2），触发后手动创建 iframe 并设src - 容器必须预设宽高（如
style="width:300px;height:250px;"），否则加载时 layout shift 会触发 CLS 报警
CSP 策略缺失让广告脚本随意执行并拖垮性能
没配 Content-Security-Policy 头，等于放行所有第三方脚本——广告 SDK 可能注入 eval、内联 onclick、甚至重写 document，不仅带来安全风险，还会因频繁 DOM 操作阻塞主线程。
实操建议：
- 服务端响应头至少加：
Content-Security-Policy: script-src 'self' https://cdn.yourdomain.com; frame-src 'self' https://*.doubleclick.net https://*.google.com - 删掉
'unsafe-inline'和'unsafe-eval'，否则内联广告脚本照常运行 - 若广告域名在
frame-src里漏写，iframe 仍能加载，但脚本执行会被 CSP 拦截，表现为广告空白+控制台报Refused to load...
sandbox 权限必须显式声明，且不能靠“试错”去加；CSP 的 frame-src 和 script-src 必须分开配，漏一项就失效。**前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
