IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

标签:beforeunload

共 2 篇相关文章

IT 累计浏览 3,823

Beforeunload打点丢失原因分析及解决方案

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

IT 累计浏览 2,730

js防刷新的倒计时代码

这篇代码直接解决了一个在模拟考试、限时测试等场景中常见且烦人的问题:用户刷新页面导致倒计时重置。作者没有使用复杂的后端交互或本地存储API,而是提供了一种轻巧的纯前端解决方案。 其核心思路巧妙地利用了浏览器的 `window.name` 属性。这个属性在页面整个生命周期内(包括刷新)都会保持其字符串值。代码首先检查 `window.name` 是否已有存储值(即之前的倒计时),若有则从中读取时间,否则初始化为60秒。倒计时函数每秒递减,并将最新的剩余秒数实时写回 `window.name`,同时更新页面显示。 实现上,代码还包含了实用的交互提醒:当剩余时间刚好为5分钟时,弹出提示框;倒计时归零时自动结束并弹出最终提醒。整个过程无需依赖任何框架,逻辑清晰,非常便于直接嵌入到需要防刷新计时的HTML页面中,体现了用最直接的技术手段解决具体痛点的务实风格。