情景描述
- 我們使用create react app產(chǎn)生一個前端項目痢艺。
- 直接導致的問題就是，上一次成功的從服務(wù)器拿到的response。當服務(wù)器未開啟或者服務(wù)有問題胶惰，在同一瀏覽器再次打開仍然能夠拿到從服務(wù)器獲取的response。
- 這嚴重影響到了開發(fā)霞溪。但是在我的知識體系中認為這是緩存造成的孵滞。
矛盾點
- 服務(wù)器如果壞了，也就意味著數(shù)據(jù)請求不到鸯匹。但是我們的前端頁面卻可以在服務(wù)器壞的時候拿到數(shù)據(jù)坊饶。那么這是緩存機制造成的還是是什么？
- 打開chrome tool application發(fā)現(xiàn)針對數(shù)據(jù)存儲其中包含：Cache LocalStorage sessionStorage service works cookie 以及到底他們的作用機制有什么不同殴蓬，造成當前原因的到底是什么匿级？
問題解答
- Q1:總是提到緩存，緩存是什么染厅，什么作用痘绎，所謂的清除緩存是清除什么，以及緩存的可用時間可用位置都是什么肖粮？
- A1:緩存的相關(guān)信息
- 這里我想說的緩存其實是web緩存機制
- web緩存：是指一個Web資源（如html頁面孤页，圖片，js涩馆，數(shù)據(jù)等）存在于Web服務(wù)器和客戶端（瀏覽器）之間的副本
- 緩存的作用：用于快速讀取資源或者避免重復(fù)請求資源
- 緩存本質(zhì)：可以理解成客戶端（瀏覽器）擁有一個小型的數(shù)據(jù)庫行施，將從服務(wù)器讀取過來的資源存在本地（瀏覽器）數(shù)據(jù)庫中。當用戶請求資源的時候魂那，首先訪問本地數(shù)據(jù)庫中是否包含可用數(shù)據(jù)蛾号，有則直接提出，沒有再向服務(wù)器發(fā)送請求涯雅。這不僅可以避免重復(fù)請求而且對于用戶而言可以加快請求處理速度
- HTML5提供的緩存機制：有很多種類其中包含：http（瀏覽器）緩存鲜结、websql、indexDb、cookie精刷、localStorage拗胜、sessionStorage、application cache贬养、cacheStorage
- 而緩存的可用時間以及位置都是根據(jù)不同的緩存方式?jīng)Q定的
- Q2:那么我們出現(xiàn)的這種緩存是哪一種緩存呢挤土？
- A2:我們這里的緩存應(yīng)該是運用了service work琴庵。
- Q3:是什么是service worker?
- A3:我想把它理解成一個運行在瀏覽器后端的小型服務(wù)器误算，針對瀏覽器通過fetch發(fā)出的請求，他可以做到攔截請求迷殿，發(fā)回自己的響應(yīng)儿礼。這就類似于瀏覽器給瀏覽器自身發(fā)送請求。但是對于頁面或者瀏覽器而言庆寺，這和他發(fā)送到后端的請求沒什么區(qū)別蚊夫。因此可以將Service worker理解成瀏覽器服務(wù)器。
- Q4:那么create-react-app是什么時候為我們加上這個service worker的懦尝？
- A4:
- 這是create react app為我們在代碼中自動加入的知纷。我們可以選擇不注冊service work即可。
- 方式通過在index.html中直接將
registerServiceWorker();刪除即可.現(xiàn)在也明白了為什么create react APP非要使用fetch陵霉，因為ServiceWorker可以劫持fetch發(fā)送的請求琅轧。
反思
- 作為前端dev，竟然前端基礎(chǔ)知識缺失那么多踊挠。還是源于沒有系統(tǒng)學習乍桂。總是get到一個點之后效床，就學習這個一點睹酌。類似于樹型結(jié)構(gòu)就學了樹杈上的一個點。現(xiàn)在如果想要做到基礎(chǔ)知識的補充必須學會先從樹杈向上爬剩檀，爬到最近的交匯點憋沿，然后系統(tǒng)的向下學習，積累多了應(yīng)該就可以點連成線了沪猴。
ACTION
- 以后每一個知識點卤妒。先要歸類。歸到最近的知識塊中字币。然后反問自己是否對這個知識塊了解则披。如果不懂，要求自己吧整個知識塊全部弄明白
