“純前端實現 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)