HTML 本身不支持广告位轮替权重，必须由 JavaScript 或后端广告系统实现；前端 JS 加权随机仅适用于小规模自管广告，但易受缓存、多脚本竞争、本地存储等影响失效；生产环境应由服务端或广告平台基于上下文决策权重并返回结果。
广告位轮替权重在 HTML 中没有原生支持
HTML 本身不提供“轮替权重”机制，iframe、div 或 img 标签无法声明“这个广告展示概率是 70%，那个是 30%”。所谓轮替权重，必须由 JavaScript 控制渲染逻辑，或由后端广告系统返回带权重的广告内容。前端硬编码权重容易失效，且无法应对缓存、CDN、SSR 等场景。
用 JS 实现简单权重轮替（适用于小规模自管广告）
若广告位由你完全控制（比如几条内部推广 Banner），可用 JS 按概率抽样决定当前展示哪一条。关键不是随机，而是加权随机：
- 把广告配置为数组，每项含
url、weight字段（如{ url: '/ad1.html', weight: 7 }） - 累加所有
weight得到总和（如 7 + 3 = 10） - 生成
Math.random() * totalWeight，遍历累加判断落在哪个区间 - 用
innerHTML或src注入对应广告内容，避免直接写死display: none
注意：该逻辑必须在广告容器首次渲染前执行；若页面使用 SSR 或框架（如 Vue/React），需确保 JS 在 hydration 完成后运行，否则可能被服务端内容覆盖。
权重失效的常见原因
即使代码逻辑正确，权重也常因以下原因“看起来没生效”：
- 浏览器缓存了旧版 JS 文件，导致权重逻辑未更新 —— 检查 Network 面板确认加载的是最新脚本
- 广告位被多个 JS 片段竞争控制（如同时引入统计 SDK 和自写轮替脚本）—— 查看
console.log输出或打断点确认执行顺序 - 使用了
localStorage或cookie记录用户上次看到的广告，人为绕过权重逻辑 —— 清理存储后重试 - 广告容器本身有 CSS 动画或
opacity: 0过渡，造成视觉上“跳变”误判为轮替异常
真正可靠的权重控制应在服务端或广告平台侧
生产环境不建议靠前端 JS 做核心权重分发。真实广告系统（如 Google Ad Manager、穿山甲、优量汇）的权重策略实际发生在请求阶段：
- 前端只发一次
fetch('/api/ad?pos=home_banner')，参数中可带设备、用户标签等上下文 - 后端根据规则引擎计算出本次应返回哪个广告（含权重、频控、定向等），再返回完整 HTML 片段或 JSON 数据
- 前端仅负责安全地插入响应内容（如用
element.innerHTML = response.html，并过滤 script 标签） - 若需 A/B 测试不同权重策略，直接改后端配置，无需发版
前端能做的只是“呈现”，权重决策必须脱离 DOM 生命周期和客户端不确定性。这点最容易被忽略，却直接决定轮替是否稳定可信。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
