Beforeunload打点丢失原因分析及解决方案
这篇技术文章由1688的朱铁根和胡大军撰写,他们从淘宝团队早年发现的“页面跳转前发送的打点请求丢失”现象切入,深入剖析了这一前端数据采集中的经典痛点。 作者指出,问题核心在于浏览器页面卸载机制与网络请求时序的冲突:当页面跳转指令发出后,浏览器会迅速销毁当前页面的所有对象,包括用于发送打点请求的Image对象。如果此时打点服务器尚未完成响应,该HTTP请求就会被强制终止,导致数据丢失。 为解决这一矛盾,文章并未建议以牺牲用户体验(如延迟页面响应)为代价,而是巧妙地利用了`window.name`属性的特性。在页面卸载前,将打点数据临时附加到`window.name`中;页面刷新加载后,新页面立即读取并发出这个积攒的打点请求。该方案有效规避了`window.name`在页面刷新后依然保留的特性,同时解决了`cookie`或`localStorage`存在的跨域限制问题。 实测数据显示,该方案效果显著,在Chrome浏览器中打点回收率平均提升了约13%,在各版本IE浏览器上也取得了稳定的提升,为解决此类前端数据采集问题提供了一种可靠且兼容性良好的工程思路。