背景

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

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

圖片

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

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

圖片

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

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

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

分析優(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ú)立的，無法進(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)槟阋岉撁娑?、頁面三、頁面四這些頁面知道你數(shù)據(jù)的狀態(tài)，有點(diǎn)類似于 Promise，狀態(tài)有 未緩存、緩存中、已緩存。

圖片

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

圖片

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

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

SharedWorker

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

圖片

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

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

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

圖片

圖片

可以看到 count被共享了！

圖片

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

圖片

圖片

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

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

圖片

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

圖片