前端性能指标采集与隐私保护(采样/去标识)最佳实践概述前端性能采集需控制采样比例与数据最小化,避免携带可识别信息。在合规前提下支持持续性能优化。指标采集type PerfEvent = { url: string; lcp?: number; fid?: number; cls?: number; ts: number } function collectPerf(): PerfEvent { const nav = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming const lcp = (window as any).__lcp || undefined const fid = (window as any).__fid || undefined const cls = (window as any).__cls || undefined return { url: sanitizeUrl(location.href), lcp, fid, cls, ts: Date.now() } } 采样控制class RateSampler { constructor(private rate: number) {} allow(): boolean { return Math.random() < this.rate } } const sampler = new RateSampler(0.1) // 10%采样 去标识与脱敏function sanitizeUrl(u: string): string { try { const url = new URL(u) url.search = '' return url.origin + url.pathname } catch { return '/' } } function redactPayload(p: PerfEvent): PerfEvent { return { ...p, url: sanitizeUrl(p.url) } } 上报示例async function reportPerf(p: PerfEvent) { if (!sampler.allow()) return const payload = JSON.stringify(redactPayload(p)) await fetch('/perf/report', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: payload }) } 运维要点严格控制采样比例并动态调整URL与参数去标识,禁止携带PII仅采集必要指标并保留上报审计通过采样与去标识,可在保障隐私合规的同时持续提升前端性能体验。

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部