【JS 】SharedWorker 优化前端轮询请求

紫剑真人

已于 2023-02-19 00:23:02 修改

阅读量804

点赞数 1

分类专栏： javascript 文章标签：前端 javascript json

于 2023-02-17 22:17:55 首次发布

本文链接：https://blog.csdn.net/zijian8848/article/details/129094631

版权

文章介绍了如何解决单个页面每分钟发送一次定时请求的问题，提出使用SharedWorker和BroadcastChannel来实现多tab共享后台任务，减少服务器压力并提升前端性能。通过建立后台任务js文件进行定时请求，并通过BroadcastChannel在各个页面间同步数据，同时提供了不支持SharedWorker的浏览器的兼容方案。

摘要由CSDN通过智能技术生成

1. 背景

目前公司系统首页存在一个定时的轮询请求/Admin/Dashboard/GetAppRelaseNotice，包含一些需要实时反映在前端的操作（如：页面版本，站内信，页面配置更新等）

问题很明显，单个页面的情况下，每分钟会发送一次请求；
但如果同时打开多个tab，每个tab每分钟都会发送一次请求

2. 思路

针对这个情况，可以使用 SharedWorker + BroadcastChannel 来实现多个tab共用一个后台任务的情况，减少后端服务器压力的同时也可以提升部分前端的性能；

SharedWorker：接口代表一种特定类型的 worker，可以从几个浏览上下文中访问。
BroadcastChannel：接口代理了一个命名频道。它允许同源的不同浏览器窗口下的不同文档之间相互通信。

使用SharedWorker将请求任务移至后台轮询，多页面共享
通过BroadcastChannel通知所有页面请求结果
兼容不支持 SharedWorker 的浏览器

3. 编码

3.1 使用SharedWorker将请求任务移至后台轮询，多页面共

建立一个后台任务js文件 GetAppRelaseNotice.js

onconnect = function (e) {
   
    checkAppReleaseCallBack();
    setInterval(checkAppReleaseCallBack, 1000 * 1);  //先设置1秒钟，用于测试
}

function checkAppReleaseCallBack() {
   
    // 这里请求 GetAppRelaseNotice 接口获取返回值
}

页面启动后台任务

function startCheckAppRelease() {
   
    // 给后台任务一个名字 GetAppRelaseNotice 后面用于调试
    const worker = new SharedWorker('/Scripts/Workers/GetAppRelaseNotice.js', "GetAppRelaseNotice");
    worker.port.