資訊專欄INFORMATION COLUMN
摘要：引言這個是針對的。一般結合使用，因為請求級別的緩存與具有頁面攔截功能的最配。本周精讀的文章是，介紹了瀏覽器緩存接口的基本語法。包含任意命名空間，可以通過創建或訪問。精讀筆者利用實現了純瀏覽器端的后端渲染。前端精讀幫你篩選靠譜的內容。
1 引言
caches 這個 API 是針對 Request Response 的。caches 一般結合 Service Worker 使用，因為請求級別的緩存與具有頁面攔截功能的 Service Worker 最配。
本周精讀的文章是 cache-api，介紹了瀏覽器緩存接口的基本語法。
2 概述瀏覽器擁有全局變量 caches 操作緩存。
caches 包含任意命名空間，可以通過 caches.open 創建或訪問。
const myCache = await caches.open("myCache");
添加緩存
通過 add 添加緩存。由于 caches 緩存是基于請求的，因此參數可以是一個 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 */
});
每執行 add 時，瀏覽器都會主動請求并緩存返回的 Response。
可以通過 addAll 批量添加緩存：
myCache.addAll(["/subscribe", "/assets/images/profile.png"]);讀取緩存
通過 match 讀取緩存。與 add 類似，參數可以是 URL 地址或完整 Request 對象，同時支持 matchAll：
const res = await myCache.match("/subscribe");
更新緩存
通過 add 或 put 更新緩存。
當某個請求緩存需要更新時，你可以重新執行 add 操作。
同時 put 也可以更新緩存，你可以手動構造返回值，這樣瀏覽器就不需要發請求了：
const request = new Request("/subscribe");
const fetchResponse = await fetch(request);
myCache.put(request, fetchResponse);
銷毀緩存
通過 delete 銷毀緩存。
你可以銷毀某個路徑的緩存：
myCache.delete("/subscribe");
也可以銷毀某個緩存命名空間：
caches.delete("myCache");
結合 service Worker
可以利用 addEventListener("fetch") 監聽瀏覽器請求時機，并在匹配到緩存時，直接替換為返回結果，當緩存不存在時才繼續發請求。
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 實現了純瀏覽器端的后端渲染。
首先基于下面三個基本事實：
利用 service worker 可以攔截請求。
caches 可以主動 put 修改緩存。
react-dom/server 可以在瀏覽器端執行。
這三個能力組合一下，我們真的可以實現前端 SSR：
打開頁面時，利用 web worker 調用 react-dom/server 構造一個 SSR 字符串。
利用 caches.put 添加當前頁面緩存，將 react-root 部分塞入構造好的 SSR 字符串。
下次打開頁面時，優先命中緩存，仿佛是后端提供了 SSR 服務，但其實服務是由上一次瀏覽器提供的。
前端渲染有幾個好處：
不消耗服務器計算資源，如果頁面有百萬 UV，可能一天就能節省幾十萬元服務器電費。
不消耗服務器存儲資源，如果頁面是千人千面的，后端 SSR 存儲成本巨大，但分攤到個人電腦就不成問題。
不需要寫兩套代碼。雖然服務端渲染重復利用前端資源，但 DOM 環境等都是模擬出來的，且前端代碼還存在內存泄露風險，許多 SSR 的前端代碼必須判斷前后端環境，給維護造成了巨大負擔。在前端渲染下這不成問題，我們的口號是：前端代碼請交給瀏覽器執行。
筆者將這套前端渲染能力封裝在 前端工程化工具 Pri 中，開啟配置項 useServiceWorker=true clientServerRender=true 嘗試。
后面有機會多帶帶選一篇精讀介紹 前端渲染，你也可以直接參考筆者 簡陋的實現：由于 service worker 必須存在一個實體文件，因此腳手架會自動生成它，所以你看到的運行代碼是一堆字符串。
4 總結前端渲染是一個較為極端的例子，caches 更多用來緩存簡單的靜態頁面，靜態博文，或者不經常變動的后端接口。
留下一個思考題：你還能想到 caches 的其他用法嗎？歡迎留言。
討論地址是：精讀《Caches API》 · Issue #124 · dt-fe/weekly
如果你想參與討論，請點擊這里，每周都有新的主題，周末或周一發布。前端精讀 - 幫你篩選靠譜的內容。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101002.html
摘要：概述的解釋器優化器代碼可能在字節碼或者優化后的機器碼狀態下執行，而生成字節碼速度很快，而生成機器碼就要慢一些了。比如有一個函數，從獲取值引擎生成的字節碼結構是這樣的指令是獲取參數指向的對象，并存儲在，第二步則返回。 1 引言 本期精讀的文章是：JS 引擎基礎之 Shapes and Inline Caches 一起了解下 JS 引擎是如何運作的吧！ JS 的運作機制可以分為 AST 分...
摘要：引言本周精讀的文章是，看看作者是如何解釋這個多態性含義的。讀完文章才發現，文章標題改為的多態性更妥當，因為整篇文章都在說，而使用場景不局限于。更多討論討論地址是精讀的多態性如果你想參與討論，請點擊這里，每周都有新的主題，周末或周一發布。 1 引言 本周精讀的文章是：surprising-polymorphism-in-react-applications，看看作者是如何解釋這個多態性含...
摘要：拿到的都是而不是原始值，且這個值會動態變化。精讀對于的與，筆者做一些對比。因此采取了作為優化方案只有當第二個依賴參數變化時才返回新引用。不需要使用等進行性能優化，所有性能優化都是自動的。前端精讀幫你篩選靠譜的內容。 1. 引言 Vue 3.0 的發布引起了軒然大波，讓我們解讀下它的 function api RFC 詳細了解一下 Vue 團隊是怎么想的吧！ 首先官方回答了幾個最受關注的...
摘要：舉例來說即便某個失敗了，也不會導致的發生，這樣在不在乎是否有項目失敗，只要拿到都結束的信號的場景很有用。對于則稍有不同只要有子項，就會完成，哪怕第一個了，而第二個了，也會，而對于，這種場景會直接。 1. 引言 本周精讀的內容是：Google I/O 19。 2019 年 Google I/O 介紹了一些激動人心的 JS 新特性，這些特性有些已經被主流瀏覽器實現，并支持 polyfill...
摘要：調度系統，支持不同渲染優先級，對進行調度。調度帶來的限制調度系統也存在兩個問題。調度系統能力有限，只能在瀏覽器提供的能力范圍內進行調度，而無法影響比如的渲染回收周期。精讀關于調度系統的剖析，可以讀深入剖析這篇文章，感謝我們團隊的淡蒼提供。 1. 引言 這次介紹的文章是 scheduling-in-react，簡單來說就是 React 的調度系統，為了得到更順滑的用戶體驗。 畢竟前端做到...
閱讀 2632·2019-08-30 15:53
閱讀 2870·2019-08-29 16:20
閱讀 1081·2019-08-29 15:10
閱讀 1018·2019-08-26 10:58
閱讀 2188·2019-08-26 10:49
閱讀 630·2019-08-26 10:21
閱讀 700·2019-08-23 18:30
閱讀 1635·2019-08-23 15:58
