精讀《Caches API》

Null 發(fā)布于2019-08-23 14:42 / 1860人閱讀

摘要：引言這個是針對的。一般結(jié)合使用，因為請求級別的緩存與具有頁面攔截功能的最配。本周精讀的文章是，介紹了瀏覽器緩存接口的基本語法。包含任意命名空間，可以通過創(chuàng)建或訪問。精讀筆者利用實現(xiàn)了純?yōu)g覽器端的后端渲染。前端精讀幫你篩選靠譜的內(nèi)容。

1 引言

caches 這個 API 是針對 Request Response 的。caches 一般結(jié)合 Service Worker 使用，因為請求級別的緩存與具有頁面攔截功能的 Service Worker 最配。

本周精讀的文章是 cache-api，介紹了瀏覽器緩存接口的基本語法。

2 概述

瀏覽器擁有全局變量 caches 操作緩存。

caches 包含任意命名空間，可以通過 caches.open 創(chuàng)建或訪問。

const myCache = await caches.open("myCache");

添加緩存

通過 add 添加緩存。由于 caches 緩存是基于請求的，因此參數(shù)可以是一個 URL 地址，或一個完整的 Request 對象：

// URL only
myCache.add("/subscribe");

// Full request object
myCache.add(new Request("/subscribe", {
    method: "GET",
    headers: new Headers({
    "Content-Type": "text/html"
  }),
    /* more request options */
});

每執(zhí)行 add 時，瀏覽器都會主動請求并緩存返回的 Response。

可以通過 addAll 批量添加緩存：

myCache.addAll(["/subscribe", "/assets/images/profile.png"]);

讀取緩存

通過 match 讀取緩存。與 add 類似，參數(shù)可以是 URL 地址或完整 Request 對象，同時支持 matchAll：

const res = await myCache.match("/subscribe");

更新緩存

通過 add 或 put 更新緩存。

當某個請求緩存需要更新時，你可以重新執(zhí)行 add 操作。

同時 put 也可以更新緩存，你可以手動構造返回值，這樣瀏覽器就不需要發(fā)請求了：

const request = new Request("/subscribe");
const fetchResponse = await fetch(request);
myCache.put(request, fetchResponse);

銷毀緩存

通過 delete 銷毀緩存。

你可以銷毀某個路徑的緩存：

myCache.delete("/subscribe");

也可以銷毀某個緩存命名空間：

caches.delete("myCache");

結(jié)合 service Worker

可以利用 addEventListener("fetch") 監(jiān)聽瀏覽器請求時機，并在匹配到緩存時，直接替換為返回結(jié)果，當緩存不存在時才繼續(xù)發(fā)請求。

self.addEventListener("fetch", (e) => {
    e.respondWith(
        // Check if item exists in cache
        caches.match(e.request).then((cachedResponse) => {

            // If found in cache, return cached response
            if (cachedResponse) return cachedResponse;

            // If not found, fetch over network
            return fetch(e.request);
        });
  );
});

3 精讀

筆者利用 caches API + service worker 實現(xiàn)了純?yōu)g覽器端的后端渲染。

首先基于下面三個基本事實：

利用 service worker 可以攔截請求。

caches 可以主動 put 修改緩存。

react-dom/server 可以在瀏覽器端執(zhí)行。

這三個能力組合一下，我們真的可以實現(xiàn)前端 SSR：

打開頁面時，利用 web worker 調(diào)用 react-dom/server 構造一個 SSR 字符串。

利用 caches.put 添加當前頁面緩存，將 react-root 部分塞入構造好的 SSR 字符串。

下次打開頁面時，優(yōu)先命中緩存，仿佛是后端提供了 SSR 服務，但其實服務是由上一次瀏覽器提供的。

前端渲染有幾個好處：

不消耗服務器計算資源，如果頁面有百萬 UV，可能一天就能節(jié)省幾十萬元服務器電費。

不消耗服務器存儲資源，如果頁面是千人千面的，后端 SSR 存儲成本巨大，但分攤到個人電腦就不成問題。

不需要寫兩套代碼。雖然服務端渲染重復利用前端資源，但 DOM 環(huán)境等都是模擬出來的，且前端代碼還存在內(nèi)存泄露風險，許多 SSR 的前端代碼必須判斷前后端環(huán)境，給維護造成了巨大負擔。在前端渲染下這不成問題，我們的口號是：前端代碼請交給瀏覽器執(zhí)行。

筆者將這套前端渲染能力封裝在 前端工程化工具 Pri 中，開啟配置項 useServiceWorker=true clientServerRender=true 嘗試。

后面有機會多帶帶選一篇精讀介紹前端渲染，你也可以直接參考筆者簡陋的實現(xiàn)：由于 service worker 必須存在一個實體文件，因此腳手架會自動生成它，所以你看到的運行代碼是一堆字符串。

4 總結(jié)

前端渲染是一個較為極端的例子，caches 更多用來緩存簡單的靜態(tài)頁面，靜態(tài)博文，或者不經(jīng)常變動的后端接口。

留下一個思考題：你還能想到 caches 的其他用法嗎？歡迎留言。

討論地址是：精讀《Caches API》 · Issue #124 · dt-fe/weekly

如果你想?yún)⑴c討論，請點擊這里，每周都有新的主題，周末或周一發(fā)布。前端精讀 - 幫你篩選靠譜的內(nèi)容。

云服務器 GPU云服務器 caches API api670 api607

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101002.html

精讀《JS 引擎基礎之 Shapes and Inline Caches》

摘要：概述的解釋器優(yōu)化器代碼可能在字節(jié)碼或者優(yōu)化后的機器碼狀態(tài)下執(zhí)行，而生成字節(jié)碼速度很快，而生成機器碼就要慢一些了。比如有一個函數(shù)，從獲取值引擎生成的字節(jié)碼結(jié)構是這樣的指令是獲取參數(shù)指向的對象，并存儲在，第二步則返回。 1 引言本期精讀的文章是：JS 引擎基礎之 Shapes and Inline Caches 一起了解下 JS 引擎是如何運作的吧！ JS 的運作機制可以分為 AST 分...

Tecode 2019-08-22 18:15 評論0 收藏0
精讀《React 的多態(tài)性》

摘要：引言本周精讀的文章是，看看作者是如何解釋這個多態(tài)性含義的。讀完文章才發(fā)現(xiàn)，文章標題改為的多態(tài)性更妥當，因為整篇文章都在說，而使用場景不局限于。更多討論討論地址是精讀的多態(tài)性如果你想?yún)⑴c討論，請點擊這里，每周都有新的主題，周末或周一發(fā)布。 1 引言本周精讀的文章是：surprising-polymorphism-in-react-applications，看看作者是如何解釋這個多態(tài)性含...

tabalt 2019-08-22 18:27 評論0 收藏0
精讀《Vue3.0 Function API》

摘要：拿到的都是而不是原始值，且這個值會動態(tài)變化。精讀對于的與，筆者做一些對比。因此采取了作為優(yōu)化方案只有當?shù)诙€依賴參數(shù)變化時才返回新引用。不需要使用等進行性能優(yōu)化，所有性能優(yōu)化都是自動的。前端精讀幫你篩選靠譜的內(nèi)容。 1. 引言 Vue 3.0 的發(fā)布引起了軒然大波，讓我們解讀下它的 function api RFC 詳細了解一下 Vue 團隊是怎么想的吧！首先官方回答了幾個最受關注的...

voyagelab 2019-08-23 18:24 評論0 收藏0
精讀《What's new in javascript》

摘要：舉例來說即便某個失敗了，也不會導致的發(fā)生，這樣在不在乎是否有項目失敗，只要拿到都結(jié)束的信號的場景很有用。對于則稍有不同只要有子項，就會完成，哪怕第一個了，而第二個了，也會，而對于，這種場景會直接。 1. 引言本周精讀的內(nèi)容是：Google I/O 19。 2019 年 Google I/O 介紹了一些激動人心的 JS 新特性，這些特性有些已經(jīng)被主流瀏覽器實現(xiàn)，并支持 polyfill...

dabai 2019-08-23 17:55 評論0 收藏0
精讀《Scheduling in React》

摘要：調(diào)度系統(tǒng)，支持不同渲染優(yōu)先級，對進行調(diào)度。調(diào)度帶來的限制調(diào)度系統(tǒng)也存在兩個問題。調(diào)度系統(tǒng)能力有限，只能在瀏覽器提供的能力范圍內(nèi)進行調(diào)度，而無法影響比如的渲染回收周期。精讀關于調(diào)度系統(tǒng)的剖析，可以讀深入剖析這篇文章，感謝我們團隊的淡蒼提供。 1. 引言這次介紹的文章是 scheduling-in-react，簡單來說就是 React 的調(diào)度系統(tǒng)，為了得到更順滑的用戶體驗。畢竟前端做到...

LeexMuller 2019-08-23 16:56 評論0 收藏0