背景

首先，简单介绍一下背景。我们正在开发一个基于 Vue3 的项目，客户习惯通过多个浏览器标签页同时打开相同的项目，这样可以轻松地操作多个页面。比如，客户会这样操作（虽然这只是一个简化的例子，实际情况可能是两个非常不同的页面）：

这种做法其实可以理解，因为一些客户不喜欢频繁地在同一标签页内切换菜单，他们认为这样太麻烦了。

尽管这两个页面的布局和内容差异很大，但有一部分内容其实是相似的（虽然它们有所不同，因此没有封装成独立组件）。

这部分相似的逻辑是依赖同一个接口和相同的数据处理逻辑的，而且这两个过程都需要花费比较长的时间：

• 接口请求： 需要大约3000ms，因为后端数据获取逻辑比较复杂，而且返回的数据量也很大。
• 数据处理： 大约300ms，前端拿到数据后还需要进行处理。

因此，客户提出了一个建议：既然这两部分内容的逻辑是一样的，能否让多个页面（比如页面二、页面三、页面四）共享页面一的数据呢？

分析与优化

在客户提出优化需求之前，我们先从优化点的角度来考虑一下。

接口请求和数据处理这两个过程都是比较耗时且涉及大数据量的操作。一开始，我的思路是尝试使用 WebWorker 来处理这些任务。

但是，客户的建议让我意识到 WebWorker 并不适用，原因如下：

• 1、每个标签页的 WebWorker 是独立的，不能共享数据。
• 2、即便使用 WebWorker 和 IndexedDB 来缓存数据并尝试共享，但依然很难共享数据的状态。

第一个原因大家可能都理解。第二个原因则需要进一步解释：为什么数据状态共享如此重要呢？

我们可以通过下图来理解这个问题。为了让页面二、页面三、页面四能够知道页面一的数据状态，数据的状态管理就变得至关重要。可以把数据状态理解为类似于 Promise 的三种状态：未缓存、缓存中和已缓存。

举个例子来说明两种可能的情况：

• 情况一： 页面一加载后点击按钮发起数据请求并进行缓存，接着再点击页面二的按钮。此时，页面二应该能直接使用页面一的缓存数据，这种情况就没有问题。
• 情况二： 页面一点击按钮1秒后，用户点击了页面二的按钮。此时，页面二并不知道页面一的数据状态，无法判断是否需要发起新的请求，或者应该等待页面一的请求完成。

因此，共享数据状态显得尤为重要。

SharedWorker

经过分析，我决定放弃 WebWorker 的方案，改用 SharedWorker 来实现数据共享。

SharedWorker 是什么呢？它可以被理解为类似于 WebWorker，但有一个关键的不同点：SharedWorker 允许多个标签页共享，而 WebWorker 每个标签页都独立。

当多个标签页连接同一个 SharedWorker 时，SharedWorker 会通过port管理每个标签页，每个标签页对应一个port。这样，通过 SharedWorker，多个标签页可以共享数据。

为了说明 SharedWorker 的工作原理，下面是一个简单的例子，演示如何通过 SharedWorker 实现多个页面间的count共享。

如上图所示，count变量在多个标签页间共享。

接下来，我们修改shared-worker.js中的逻辑，让其负责数据请求和处理：

然而，经过测试，我们发现目前的实现并没有达到预期的效果！虽然共享了count数据，但如果我们按顺序点击页面一和页面二，数据并不会同时出现，反而出现了请求重复的情况，这样并没有优化到位。

解决方案

此时，我们意识到需要实现数据状态共享，这可以通过利用 Promise 来完成。通过 Promise，页面可以等待数据请求和处理完成，然后再进行后续的操作。

最终效果如下：

这样，即使用户没有同时点击页面一和页面二，只要页面一的数据请求和处理完成，页面二也能同时获取到已经缓存的数据。

通过这种方式，我们成功地实现了多个页面之间的数据共享，并且保证了数据状态的同步。