“纯前端实现 A/B Test”，意思就是 没有后端分流、也不依赖流量网关，那么只能靠前端逻辑来做“流量切分”。
🎯 目标
- 80% 的用户 → A 页面
- 20% 的用户 → B 页面
- 且要保证 同一个用户每次访问结果一致（否则用户刷新页面时 A/B 会跳来跳去，没意义）。
✅ 实现思路
方法一：基于随机数 + 本地存储（推荐）
function assignABTest() {// 先看本地是否已有分组结果let group = localStorage.getItem('ab_group')if (!group) {// 随机生成一个 [0,1) 的数const rand = Math.random()// 按比例分配group = rand < 0.8 ? 'A' : 'B'localStorage.setItem('ab_group', group)}return group
}// 使用
const group = assignABTest()
if (group === 'A') {window.location.href = '/pageA.html'
} else {window.location.href = '/pageB.html'
}
👉 特点：
- 第一次访问时随机分配。
- 后续访问保持一致（因为结果存了
localStorage）。 - 不需要后端，不需要流量标识。
方法二：基于用户特征（比如 UA / IP Hash）
如果你不想依赖 localStorage（例如用户清理缓存后可能变化），可以用一些用户环境特征来算哈希值：
function hashCode(str) {let hash = 0for (let i = 0; i < str.length; i++) {hash = (hash << 5) - hash + str.charCodeAt(i)hash |= 0}return Math.abs(hash)
}function assignABTestByUA() {const ua = navigator.userAgentconst hash = hashCode(ua)const ratio = hash % 100 // 映射到 0-99return ratio < 80 ? 'A' : 'B'
}
👉 特点：
- 同一设备 UA → 分组稳定。
- 但不同浏览器、换设备就会变组。
方法三：基于 Cookie（和 localStorage 类似）
function getCookie(name) {const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'))return match ? match[2] : null
}function setCookie(name, value, days) {const d = new Date()d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000)document.cookie = `${name}=${value};expires=${d.toUTCString()};path=/`
}function assignABTest() {let group = getCookie('ab_group')if (!group) {group = Math.random() < 0.8 ? 'A' : 'B'setCookie('ab_group', group, 30) // 保存30天}return group
}
👉 特点：
- 可以跨刷新稳定，甚至跨子页面。
- 但 cookie 会随请求发给后端，不太纯粹。
)
_280)