第一次弃用了 Web Worker ,因为它救不了我

784 阅读4分钟

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~

背景

最近有一个客户那边提了一个很有意思的优化点

先说说背景吧,我们是一个 Vue3 的项目,客户那边习惯把同一个项目通过多个浏览 Tab 去打开,这样就能很方便去使用多个页面,比如下面这样(简单例子,实际是两个长得很不一样的页面

image-6.png

其实客户这么做也能理解,因为有些客户就是不喜欢在同一个 Tab 标签页中去切换菜单,他们觉得切来切去很麻烦

虽然可能这两个页面长得很不一样,但是有一小部分长得很相似的(但是还是有不同,所以没封装成组件)

image-1.png

这部分相同的逻辑依赖的是同一个接口,同一个处理数据的逻辑,并且这两个过程都很耗时:

  • 请求接口:3000ms,因为后端取数据逻辑很复杂,返回数据量很大!
  • 数据处理:300ms,前端拿到数据得处理一下

所以客户那边提出了:既然都是同一个逻辑,那么能不能将页面一的数据给页面二、页面三、页面四用啊?

分析优化点

先抛开客户提出的要求,我们先想想有什么优化点

接口请求数据处理 都是比较耗时和数据量大的操作,所以我一开始是想放到 WebWorker 中去做的

但是当客户提出优化点后,我就发现不能用WebWorker 去做,原因如下:

  • 1、每个 Tab 的WebWorker都是独立的,无法进行数据共享
  • 2、就算用 WebWorker + IndexedDB 去做数据缓存共享,但是却很难共享数据状态

第一个原因很容易理解,那第二个原因可能有些人不理解,为什么要共享数据状态呢?

看下图就懂了,为什么要共享数据状态呢?因为你要让页面二、页面三、页面四这些页面知道你数据的状态,有点类似于 Promise,状态有 未缓存、缓存中、已缓存

image-3.png

还是拿刚刚那个例子来说,两种情况:

image-7.png

  • 情况一: 页面一打开并点击按钮进行数据请求处理和缓存,再去点击页面二的按钮,那么页面二肯定能拿到缓存的数据,这种情况没问题

  • 情况二: 页面一点击按钮1秒后,去点击页面二的按钮,这个时候页面二是不知道页面一的数据状态的,所以页面二不知道是要发起请求呢,还是要去等页面一请求完呢

所以共享数据状态很重要

SharedWorker

image-11.png

最终抛弃了 WebWorker,选择了 SharedWorker

SharedWorker是啥呢?你可以理解为: SharedWorker 类似于 WebWorker ,只不过SharedWorker 能让多个 Tab 标签页共享

多个 Tab 连同一个SharedWorker 的时候, SharedWorker会通过 port 来管理每一个 Tab,可以说:一个 Tab 就是一个 port

我们通过一个小案例来演示一下 SharedWorker,我们看看 count能不能被两个页面共享

image-4.png

image-5.png

可以看到 count被共享了~

sharedworker-1.gif

现在我们把 shared-worker.js 里的逻辑改成请求数据和处理数据的代码

image-8.png

sharedworker-2.gif

但是不对吧,这样写的话共享不到数据状态啊!!这样相当于是请求了两次,跟没优化一样。。。页面一先点,后再点页面二,按理说如果共享了,应该是同时出现数据才对,显然现在还没实现最终效果

所以我们需要实现数据状态共享,其实很简单,利用Promise就行了~

image-9.png

这样才是最终效果,不同时点击,但是出现数据确是同时的

sharedworker-3.gif

结语 & 加学习群 & 摸鱼群

我是林三心

  • 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;
  • 一个偏前端的全干工程师;
  • 一个不正经的掘金作者;
  • 一个逗比的B站up主;
  • 一个不帅的小红书博主;
  • 一个喜欢打铁的篮球菜鸟;
  • 一个喜欢历史的乏味少年;
  • 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有10000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点