WebWorker 即将被取代!JS 发布全新 API

多个页面共享同一数据？这个技术让浏览器标签页不再重复“干活”

多个标签页开同一个网站？你可能在浪费电脑资源。现在有个技术能让它们“共用脑子”，省时省力。

多个标签页=重复劳动

用户习惯用多个标签页开同一个网站。比如左边看订单，右边看商品详情。但这样有个大问题：每个标签页都在独立工作。

页面一请求数据花3秒，处理数据又花0.3秒。同时打开的页面二、页面三，还得把同样的事再做一遍。电脑在偷偷干重复活！

WebWorker 为啥不顶用？

第一反应是用 WebWorker 处理数据。但它有两个致命伤：

1. 每个标签页的 Worker 互相隔离，像隔间办公，没法共享数据

2. 即使靠缓存传数据，也搞不定“状态同步”——页面二不知道页面一的数据做到哪一步了

SharedWorker 才是共享大脑

它的核心就一句话：多个标签页共用同一个后台线程。

- 像开共享会议室：所有同源页面都能进

- 数据只处理一次：比如页面一请求到数据，直接存进 SharedWorker

- 其他页面直接拿结果：页面二打开时，不用再等3秒请求

怎么实现“状态同步”？关键在 Promise

光共享数据不够，还得知道数据“准备好了没”。比如：

- 页面一刚开始请求，页面二就点按钮——这时候该等还是重新请求？

用 Promise 管理三种状态最靠谱：

1. 未缓存

2. 缓存中

3. 已缓存

这样页面二点击时，一看状态是“缓存中”，就等着共享结果；看到“已缓存”就直接用。

代码实操三步走

1. 建共享线程

```javascript

// 每个页面都这样连接

const worker = new SharedWorker

worker.port.start // 启动通信

```

2. 线程里写共享逻辑

```javascript

let dataCache = null // 存数据

let ports = [] // 存所有页面的通信口

// 新页面连接时

self.onconnect = => {

const port = e.ports[0]

ports.push

// 收到页面消息

port.onmessage = => {

if {

// 如果已有数据，直接发回

if port.postMessage

// 否则去请求

else fetchData.then) // 发给所有页面

})

}

}

}

```

3. 页面发指令取数据

```javascript

// 点按钮时触发

document.querySelector.onclick = => {

worker.port.postMessage // 发指令

}

// 收数据更新页面

worker.port.onmessage = => {

showData // 更新页面显示

}

```

实际效果多爽？

- 页面一请求时转圈圈，页面二打开直接显示结果

- 开10个标签页也只请求一次数据，省流量省电量

- 复杂操作后台跑，页面不卡

要避的坑

- 同源才能共享：不同域名的页面没法用这个方案

- 记得关端口：页面关闭前通知 Worker 清除连接，避免内存泄漏

```javascript

// 页面关闭时发通知

window.onbeforeunload = => {

worker.port.postMessage

}

```

- 调试要进特殊入口：浏览器地址栏输 `chrome://inspect/workers` 查看线程日志

现在越来越多网站用这招了。比如：

- 电商网站多标签购物车同步

- 在线工具页免重复计算

- 聊天应用多窗口收同一消息

下次遇到页面加载慢，看看是不是标签页开太多——说不定它们正在背后较劲呢。