背景

最近有一個(gè)客戶那邊提了一個(gè)很有意思的優(yōu)化點(diǎn)。

先說(shuō)說(shuō)背景吧，我們是一個(gè) Vue3 的項(xiàng)目，客戶那邊習(xí)慣把同一個(gè)項(xiàng)目通過(guò)多個(gè)瀏覽 Tab 去打開，這樣就能很方便去使用多個(gè)頁(yè)面，比如下面這樣（簡(jiǎn)單例子，實(shí)際是兩個(gè)長(zhǎng)得很不一樣的頁(yè)面）。

圖片

其實(shí)客戶這么做也能理解，因?yàn)橛行┛蛻艟褪遣幌矚g在同一個(gè) Tab 標(biāo)簽頁(yè)中去切換菜單，他們覺得切來(lái)切去很麻煩。

雖然可能這兩個(gè)頁(yè)面長(zhǎng)得很不一樣，但是有一小部分長(zhǎng)得很相似的（但是還是有不同，所以沒(méi)封裝成組件）。

圖片

這部分相同的邏輯依賴的是同一個(gè)接口，同一個(gè)處理數(shù)據(jù)的邏輯，并且這兩個(gè)過(guò)程都很耗時(shí)：

• 請(qǐng)求接口：3000ms，因?yàn)楹蠖巳?shù)據(jù)邏輯很復(fù)雜，返回?cái)?shù)據(jù)量很大！
• 數(shù)據(jù)處理：300ms，前端拿到數(shù)據(jù)得處理一下。

所以客戶那邊提出了：既然都是同一個(gè)邏輯，那么能不能將頁(yè)面一的數(shù)據(jù)給頁(yè)面二、頁(yè)面三、頁(yè)面四用??？

分析優(yōu)化點(diǎn)

先拋開客戶提出的要求，我們先想想有什么優(yōu)化點(diǎn)。

接口請(qǐng)求 和 數(shù)據(jù)處理 都是比較耗時(shí)和數(shù)據(jù)量大的操作，所以我一開始是想放到 WebWorker 中去做的。

但是當(dāng)客戶提出優(yōu)化點(diǎn)后，我就發(fā)現(xiàn)不能用WebWorker 去做，原因如下：

• 1、每個(gè) Tab 的WebWorker都是獨(dú)立的，無(wú)法進(jìn)行數(shù)據(jù)共享。
• 2、就算用 WebWorker + IndexedDB 去做數(shù)據(jù)緩存共享，但是卻很難共享數(shù)據(jù)狀態(tài)。

第一個(gè)原因很容易理解，那第二個(gè)原因可能有些人不理解，為什么要共享數(shù)據(jù)狀態(tài)呢？

看下圖就懂了，為什么要共享數(shù)據(jù)狀態(tài)呢？因?yàn)槟阋岉?yè)面二、頁(yè)面三、頁(yè)面四這些頁(yè)面知道你數(shù)據(jù)的狀態(tài)，有點(diǎn)類似于 Promise，狀態(tài)有 未緩存、緩存中、已緩存。

圖片

還是拿剛剛那個(gè)例子來(lái)說(shuō)，兩種情況：

圖片

• 情況一： 頁(yè)面一打開并點(diǎn)擊按鈕進(jìn)行數(shù)據(jù)請(qǐng)求處理和緩存，再去點(diǎn)擊頁(yè)面二的按鈕，那么頁(yè)面二肯定能拿到緩存的數(shù)據(jù)，這種情況沒(méi)問(wèn)題。
• 情況二： 頁(yè)面一點(diǎn)擊按鈕1秒后，去點(diǎn)擊頁(yè)面二的按鈕，這個(gè)時(shí)候頁(yè)面二是不知道頁(yè)面一的數(shù)據(jù)狀態(tài)的，所以頁(yè)面二不知道是要發(fā)起請(qǐng)求呢，還是要去等頁(yè)面一請(qǐng)求完呢？

所以共享數(shù)據(jù)狀態(tài)很重要。

SharedWorker

最終拋棄了 WebWorker，選擇了 SharedWorker。

圖片

SharedWorker是啥呢？你可以理解為： SharedWorker 類似于 WebWorker ，只不過(guò)SharedWorker 能讓多個(gè) Tab 標(biāo)簽頁(yè)共享。

多個(gè) Tab 連同一個(gè)SharedWorker 的時(shí)候， SharedWorker會(huì)通過(guò) port 來(lái)管理每一個(gè) Tab，可以說(shuō)：一個(gè) Tab 就是一個(gè) port

我們通過(guò)一個(gè)小案例來(lái)演示一下 SharedWorker，我們看看 count能不能被兩個(gè)頁(yè)面共享。

圖片

圖片

可以看到 count被共享了！

圖片

現(xiàn)在我們把 shared-worker.js 里的邏輯改成請(qǐng)求數(shù)據(jù)和處理數(shù)據(jù)的代碼。

圖片

圖片

但是不對(duì)吧，這樣寫的話共享不到數(shù)據(jù)狀態(tài)?。。∵@樣相當(dāng)于是請(qǐng)求了兩次，跟沒(méi)優(yōu)化一樣。。。頁(yè)面一先點(diǎn)，后再點(diǎn)頁(yè)面二，按理說(shuō)如果共享了，應(yīng)該是同時(shí)出現(xiàn)數(shù)據(jù)才對(duì)，顯然現(xiàn)在還沒(méi)實(shí)現(xiàn)最終效果。

所以我們需要實(shí)現(xiàn)數(shù)據(jù)狀態(tài)共享，其實(shí)很簡(jiǎn)單，利用Promise就行了！

圖片

這樣才是最終效果，不同時(shí)點(diǎn)擊，但是出現(xiàn)數(shù)據(jù)確是同時(shí)的。

圖片