利用 Shared Worker 清理多窗口并发请求产生的后端垃圾流量

风杰同学_8721

风杰同学_8721

2026-05-20

642人浏览

原创

shared worker 通过请求合并、带 ttl 的内存缓存、主动取消挂起请求及降级兜底机制,从源头减少重复无效请求。具体包括:用 url+序列化参数作 key 合并请求;map 缓存响应并读时校验过期;页面卸载前通知取消 pending 请求;worker 不可用时自动回退 fetch 并打日志。

利用 shared worker 清理多窗口并发请求产生的后端垃圾流量

Shared Worker 本身不发请求,但能大幅减少后端收到的重复、无效、竞态请求——这才是清理“垃圾流量”的本质。关键不是让它多做什么,而是让它拦住不该发的那些。

合并相同请求,从源头砍掉冗余

多个窗口同时查 /api/user/123,传统做法是发 5 次;Shared Worker 把它们收口成一次真实请求,响应返回后分发给所有等待方。实现靠一个 pending 请求 Map:

  • 用 URL + 序列化参数(如 JSON.stringify({id: 123}))生成唯一 key
  • 首次请求进入时,创建 Promise 并存入 Map,同时发起 fetch
  • 后续同 key 请求不发网络,只把当前 port 加入 resolveList
  • fetch 完成后遍历 resolveList,逐个 postMessage 返回结果

缓存带 TTL 的响应,避免短时高频重刷

用户快速切页、刷新、开新标签,常导致同一接口在几秒内被反复调用。Shared Worker 可用内存 Map 实现轻量缓存:

Codex Auth Cleaner
Codex Auth Cleaner

一款AI工具,主要用于Monitor and clean up invalid Codex authentication files in CPA. Check quota status, disable files returning 401 errors, and perform dual verification before deletion.,适合需要提升相关任务效率的用户。

下载
  • 缓存结构:Map
  • 默认 TTL 设为 30–60 秒,适合用户操作间隙(如列表页切换再返回)
  • get 前检查 expiresAt,过期则删除并返回未命中,不走缓存
  • 不依赖 setTimeout 清理——Shared Worker 可能长期空闲,改用“读时校验”更可靠

主动取消挂起请求,防止页面关闭后残留

用户关掉某个标签页,但该页发起的请求还在 pending 队列里?它不会自动消失,可能等几秒后才超时,白白占着资源。必须由页面主动通知:

  • 页面卸载前发 { type: "cancel", key: "user-123" }
  • Worker 收到后从 pendingRequests Map 中移除对应项
  • 调用 AbortController.abort() 终止正在 fetch 的请求(若尚未完成)
  • 避免使用 onbeforeunload —— 页面崩溃时无法触发,推荐用 pagehide 或 visibilitychange

降级兜底,不让 Worker 失效变成放大器

Shared Worker 在 Safari 旧版、file:// 协议或 HTTPS 缺失时会静默失败。此时若页面逻辑仍依赖它,反而会丢请求或卡死:

  • 创建 SharedWorker 后立即监听 port.onmessage,超时 500ms 无响应即判定不可用
  • 不可用时 fallback 到原生 fetch,并打日志标记“SW fallback”便于监控
  • 避免在 Worker 不可用时还往 port.postMessage,否则消息丢失且无提示
  • 可在页面侧加一层请求代理函数,统一处理 Worker 存在性判断

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2343

5

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6130

13

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

5486

10

js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

2023.06.20

4646

5

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

2023.07.04

1149

3

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

2023.07.04

4584

6

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

920

4

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

1816

5

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

2023.09.04

3325

4

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
LLVM官方文档
LLVM官方文档

共0课时 | 0人学习