广告脚本应通过async/defer属性异步加载，或用IntersectionObserver监听视口后加载；禁用head内直接初始化，改用load事件或requestIdleCallback；iframe广告需加sandbox、loading="lazy"并固定尺寸；隐藏广告位宜用hidden属性或注释节点替代display:none。
广告脚本阻塞渲染，怎么让它不拖慢首屏
第三方广告 JS 默认是同步加载、立即执行的，document.write、fetch()、WebAssembly.instantiateStreaming() 都会卡住 HTML 解析和 DOM 构建。Chrome DevTools 的「Coverage」面板里一眼就能看出大量未使用的广告脚本占着主线程。
关键不是删广告，而是控制它的加载时机和执行条件：
- 把所有广告
<script>标签加上async或defer属性；若广告 SDK 不支持异步（比如老版百度联盟），就用setTimeout(() => { loadAdScript() }, 3000)延后加载 - 用
IntersectionObserver监听广告容器是否进入视口，只在即将可见时才触发adContainer.load() - 禁止在
<head>里直接写广告初始化代码；统一收口到window.addEventListener('load', initAds)或更晚的requestIdleCallback
iframe 广告为什么让页面滚动卡顿
<iframe> 是独立的渲染上下文，但它的资源加载、样式计算、合成层创建全由主页面进程协调。尤其当广告 iframe 包含 <canvas>、视频自动播放或高频 setInterval 时，会持续抢占主线程和 GPU 资源。
实操上要主动降级它的影响范围：
立即学习“前端免费学习笔记（深入）”；
- 给广告 iframe 加
sandbox="allow-scripts"，禁用allow-same-origin和allow-popups，防止它偷跑 DOM 操作 - 设置
loading="lazy"（现代浏览器已支持），并配合width/height固定尺寸，避免布局抖动 - 用
getComputedStyle(iframe).display === 'none'主动检测是否被隐藏，如果是，调用iframe.contentWindow?.stop?.()中止其内部计时器和动画
广告 DOM 占着内存却不显示，怎么释放
很多站点用 display: none 或 visibility: hidden 隐藏广告位，但节点仍在 DOM 树里，CSSOM 和 Layout Tree 还得为它计算——特别是带复杂子树的广告容器，内存占用可能达几 MB。
真正轻量的“隐藏”是让浏览器彻底跳过它：
- 用
hidden属性替代display: none：它会让浏览器跳过渲染流水线中多个阶段，且兼容性足够（IE11+） - 对长期不展示的广告位，用
adContainer.replaceWith(document.createComment('ad-placeholder'))替换为注释节点，既保结构又零开销 - 监听用户行为（如连续滚动 5 秒无交互），再批量调用
adContainer.remove()；注意别在scroll事件里直接删，要用requestIdleCallback节流
Chrome 120+ 的广告清理降权，怎么绕过
不是所有 remove() 都触发降权，Chrome 只对「主内容缺失率 > 30%」的页面打低分。典型踩坑是：删了 <div class="ad"><p>正文第一段</p></div>，结果 <p> 也跟着没了。
安全移除必须满足两个条件：
- 只删明确标记为广告的容器：
el.hasAttribute('data-ad')，拒绝匹配class="ad"这类泛型名 - 向上检查是否嵌套在语义主体内：
!el.closest('article, main, [itemprop="articleBody"]')，有就跳过 - 删之前先备份关键文本长度：
const mainLen = document.querySelector('main')?.textContent.length || 0，删完再比对，掉超 30% 就回滚
最易被忽略的是：广告 JS 可能异步注入新节点，MutationObserver 必须监听 childList + subtree: true，否则新广告永远逃过检测。
