如何将现有iframe广告单元代码改造为异步加载模式？

原代码使用document.write同步写入外部广告脚本，页面解析到该段代码时会暂停DOM树构建，等待广告脚本下载、执行完成后才会继续渲染后续内容，单页面部署多个广告位时阻塞效应会叠加，直接拖慢整体加载速度。
改造全程保留原有的iframe广告渲染逻辑，不会影响广告正常展示、计费，改造后的代码完全支持异步加载特性。

改造后可直接复用的代码 #

提前给广告位加固定尺寸的容器占位，避免广告加载完成后出现页面布局偏移：

<!-- 广告位占位容器，尺寸和广告配置保持一致 -->
<div class="ad-slot" style="width: 300px; height: 250px;"></div>
<script>
// DOM解析完成后再触发广告加载，不阻塞首屏内容渲染
document.addEventListener('DOMContentLoaded', function() {
    // 注入广告配置
    window.atOptions = {
        key: 'Ress2mvPP9MeVFjJL5gi',
        format: 'iframe',
        height: 250,
        width: 300,
        params: {}
    };
    // 动态创建异步脚本标签
    const adScript = document.createElement('script');
    adScript.type = 'text/javascript';
    adScript.async = true;
    // 自动适配页面HTTP/HTTPS协议
    adScript.src = (location.protocol === 'https:' ? 'https://' : 'http://') + 'www.domain.com/Ress2mvPP9MeVFjJL5gi/script.js';
    // 将广告脚本插入到对应占位容器内，替代原document.write的写入逻辑
    document.querySelector('.ad-slot').appendChild(adScript);
});
</script>

多广告位部署说明 #

• 每个广告位单独配置对应尺寸的占位容器，避免布局偏移
• 不同广告位替换为自身对应的key参数，不要多广告位复用同一个key
• 同一页面部署多广告位时，按广告位顺序逐个更新window.atOptions配置、插入对应广告脚本即可，脚本按插入顺序执行，不会出现配置串位问题
• 广告代码直接放在对应广告位的展示位置即可，不需要放到页面头部，减少首屏资源加载压力

内容的提问来源于stack exchange，提问作者Daniel