前端埋点有哪几种方式？曝光、停留时长和上报可靠性怎样处理？
先理解原理和示例，再练习完整口述与追问。
回答要点
代码埋点在业务代码中手动调用，数据精确但成本高；可视化埋点在圈选工具中配置元素与事件；无埋点（全埋点）自动采集点击和页面浏览，后期再筛选。曝光用 IntersectionObserver 判断元素可见比例和持续时间；停留时长结合 visibilitychange 计算；上报优先 sendBeacon 或 fetch(keepalive)，配合批量队列、本地重试与采样。
原理拆解
埋点事件通常包含事件名、时间、页面、用户与设备标识、会话 id 以及业务属性。无埋点依赖元素路径（XPath 或 data 属性）定位，页面结构变化后容易失效，建议给关键元素加稳定的 data-track-id。
曝光的常见定义是元素至少 50% 可见并持续 1 秒以上，需要对同一元素去重。停留时长要排除页面在后台的时间：页面隐藏时累计并上报，显示时重新计时。unload 事件在移动端不可靠，且会阻止页面进入往返缓存，应改用 visibilitychange 中 hidden 的时机上报。sendBeacon 以 POST 异步发送，页面关闭时浏览器仍会尝试发出，但有大小限制。
示例与推演
const queue = []
function track(event, props = {}) {
queue.push({ event, props, time: Date.now(), page: location.pathname })
if (queue.length >= 20) flush()
}
function flush() {
if (!queue.length) return
const body = JSON.stringify(queue.splice(0))
if (!navigator.sendBeacon('/collect', new Blob([body], { type: 'application/json' }))) {
fetch('/collect', { method: 'POST', body, keepalive: true, headers: { 'Content-Type': 'application/json' } }).catch(() => {})
}
}
document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') flush() })
易错点
埋点 SDK 抛错不能影响业务，所有逻辑要 try...catch 并异步执行；采集用户输入内容可能违反隐私法规，需要脱敏和用户同意。用 1×1 GIF 上报有 URL 长度限制。
参考回答可直接练习口述
埋点有代码埋点、可视化圈选埋点和无埋点自动采集三种，关键业务用代码埋点保证准确，其他用自动采集补充，并给关键元素加稳定的 data 标识。曝光用 IntersectionObserver，比如可见 50% 且持续 1 秒算一次，并去重；停留时长通过 visibilitychange 排除后台时间。上报时先进队列批量发送，页面隐藏时用 sendBeacon 或 fetch keepalive 发出，SDK 自身错误不能影响业务，还要注意隐私脱敏。