前端全链路优化实战课
唐俊开
前阿里前端技术专家,前教育企业前端总监
957 人已学习
新⼈⾸单¥59
前端全链路优化实战课
15
15
1.0x
00:00/00:00
登录|注册

06|指纹ID:如何通过指纹ID关联全链路日志?

你好,我是三桥。
在之前的课程当中,我们设计了一套基于最少字段原则的全链路日志模型。你还记得数据模型中提到的 fpId 字段吗?
对,它就是指纹 ID。在我们深入探讨指纹 ID 之前,先来看看前端同学在实际项目遇到的一种情况。这次,我们以极客时间的网站为例。
通常,一个 Web 网站总会有陌生的访客通过浏览器访问。我注意到极客官网会对陌生访客自动弹出一个提供双方意向匹配度的产品功能,给用户推荐合适的内容。
咱们来看看这个业务场景,用户在选好信息选项后,直接提交并跳转至登录页面。登录成功后,页面会自动跳转至个人主页。
我们假设,你进入个人中心页面时发现很多地方都是空白的,没任何数据显示,包括推荐购买课程的列表。
在这种情况下,我们的前端同学只能针对发生这个问题的用户检查接口是否存在问题。虽然检查结果显示接口没有问题,但我们还是无法追踪用户登录前的流程状态,因为我们无法关联任何未登录用户的交互日志。
想一下,如果我们能在用户访问我们的服务时提供有一个唯一的标识,并将这个标识和用户的行为日志关联起来,那么是不是无论用户是否登录,我们都可以追踪到用户的行为轨迹了?

指纹 ID

我们每个人的指纹都是独一无二的,浏览器指纹也是同样道理。由于浏览器提供了很多有价值的特性给前端同学通过代码获取,例如 UserAgent、分辨率、色彩深度、系统平台、语言、触摸屏、地理位置、语言支持特性、图像特性等等。所以,我们只要收集这些具有较高辨析度的信息,并进行一定的计算处理,就能生成一个能唯一标识当前浏览器的值,也就是我们所说的指纹 ID。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

1. 指纹ID是通过浏览器提供的特性生成一个能唯一标识当前浏览器的值,可以用来关联用户的行为日志,实现用户行为轨迹的追踪。 2. 使用Canvas特性生成指纹ID是一种轻量级的解决方案,因为在同一设备和浏览器下生成的指纹几乎不变,能产生唯一标识。 3. 指纹ID的目的是追踪前端应用的用户行为,帮助用户提升体验,快速解决问题,而不是获取用户的隐私。 4. 通过指纹ID的关联全链路日志的流程,可以追踪用户的行为轨迹,了解用户在登录前的状态,帮助解决问题和提升用户体验。 5. 指纹ID生成方案的选择需要根据具体业务情况和环境特点进行权衡,选择适合的轻量级解决方案. 6. 浏览器指纹ID可能侵犯用户的隐私,当多款前端产品使用的是同一套指纹逻辑,那么产品之间的指纹ID就可以实现用户信息的共享。 7. 不同设备和浏览器生成的指纹ID是存在差异的,无法关联分析两个浏览器之间的状态,这是指纹ID的局限性之一。 8. 在大公司里,指纹ID的实现方案大同小异,需要增加更多的影响元素来减少重复率问题,例如浏览器语言、屏幕色彩、屏幕分辨率、操作系统、CPU信息等。 9. 海外的前端工程师更倾向于使用商业产品如Fingerprint,这类产品提供的指纹ID更精准,接近100%无重复,但需要付费且价格不菲。 10. 为了提高指纹识别ID的精度并降低重复率,可以尝试增加更多的影响因素,修改通用函数逻辑,并观察指纹ID是否有明显的差异和重复的问题。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《前端全链路优化实战课》
新⼈⾸单¥59
立即购买
登录 后留言

精选留言

由作者筛选后的优质留言将会公开显示,欢迎踊跃留言。
收起评论
显示
设置
留言
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部
文章页面操作
MAC
windows
作用
esc
esc
退出沉浸式阅读
shift + f
f11
进入/退出沉浸式
command + ⬆️
home
滚动到页面顶部
command + ⬇️
end
滚动到页面底部
⬅️ (仅针对订阅)
⬅️ (仅针对订阅)
上一篇
➡️ (仅针对订阅)
➡️ (仅针对订阅)
下一篇
command + j
page up
向下滚动一屏
command + k
page down
向上滚动一屏
p
p
音频播放/暂停
j
j
向下滚动一点
k
k
向上滚动一点
空格
空格
向下滚动一屏
播放器操作
MAC
windows
作用
esc
esc
退出全屏
⬅️
⬅️
快退
➡️
➡️
快进
空格
空格
视频播放/暂停(视频全屏时生效)