前言
大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心~
背景
最近有一个客户那边提了一个很有意思的优化点
先说说背景吧,我们是一个 Vue3 的项目,客户那边习惯把同一个项目通过多个浏览 Tab 去打开,这样就能很方便去使用多个页面,比如下面这样(简单例子,实际是两个长得很不一样的页面)
其实客户这么做也能理解,因为有些客户就是不喜欢在同一个 Tab 标签页中去切换菜单,他们觉得切来切去很麻烦
虽然可能这两个页面长得很不一样,但是有一小部分长得很相似的(但是还是有不同,所以没封装成组件)
这部分相同的逻辑依赖的是同一个接口,同一个处理数据的逻辑,并且这两个过程都很耗时:
- 请求接口:3000ms,因为后端取数据逻辑很复杂,返回数据量很大!
- 数据处理:300ms,前端拿到数据得处理一下
所以客户那边提出了:既然都是同一个逻辑,那么能不能将页面一的数据给页面二、页面三、页面四用啊?
分析优化点
先抛开客户提出的要求,我们先想想有什么优化点
接口请求
和 数据处理
都是比较耗时和数据量大的操作,所以我一开始是想放到 WebWorker
中去做的
但是当客户提出优化点后,我就发现不能用WebWorker
去做,原因如下:
- 1、每个 Tab 的
WebWorker
都是独立的,无法进行数据共享 - 2、就算用
WebWorker + IndexedDB
去做数据缓存共享,但是却很难共享数据状态
第一个原因很容易理解,那第二个原因可能有些人不理解,为什么要共享数据状态呢?
看下图就懂了,为什么要共享数据状态呢?因为你要让页面二、页面三、页面四这些页面知道你数据的状态,有点类似于 Promise,状态有 未缓存、缓存中、已缓存
还是拿刚刚那个例子来说,两种情况:
-
情况一: 页面一打开并点击按钮进行数据请求处理和缓存,再去点击页面二的按钮,那么页面二肯定能拿到缓存的数据,这种情况没问题
-
情况二: 页面一点击按钮1秒后,去点击页面二的按钮,这个时候页面二是不知道页面一的数据状态的,所以页面二不知道是要发起请求呢,还是要去等页面一请求完呢
所以共享数据状态很重要
SharedWorker
最终抛弃了 WebWorker
,选择了 SharedWorker
SharedWorker
是啥呢?你可以理解为: SharedWorker
类似于 WebWorker
,只不过SharedWorker
能让多个 Tab 标签页共享
多个 Tab 连同一个SharedWorker
的时候, SharedWorker
会通过 port 来管理每一个 Tab,可以说:一个 Tab 就是一个 port
我们通过一个小案例来演示一下 SharedWorker
,我们看看 count
能不能被两个页面共享
可以看到 count
被共享了~
现在我们把 shared-worker.js
里的逻辑改成请求数据和处理数据的代码
但是不对吧,这样写的话共享不到数据状态啊!!这样相当于是请求了两次,跟没优化一样。。。页面一先点,后再点页面二,按理说如果共享了,应该是同时出现数据才对,显然现在还没实现最终效果
所以我们需要实现数据状态共享,其实很简单,利用Promise
就行了~
这样才是最终效果,不同时点击,但是出现数据确是同时的
结语 & 加学习群 & 摸鱼群
我是林三心
- 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手;
- 一个偏前端的全干工程师;
- 一个不正经的掘金作者;
- 一个逗比的B站up主;
- 一个不帅的小红书博主;
- 一个喜欢打铁的篮球菜鸟;
- 一个喜欢历史的乏味少年;
- 一个喜欢rap的五音不全弱鸡
如果你想一起学习前端,一起摸鱼,一起研究简历优化,一起研究面试进步,一起交流历史音乐篮球rap,可以来俺的摸鱼学习群哈哈,点这个,有10000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点