class
  • Node.js安裝與NPM使用
  • require 、 module.exports
  • fs(文件操作)
  • EventEmitter(事件觸發)
  • util(工具類)
  • stream(流)
  • Assert(斷言)
  • Process(進程)
  • Repl(自訂命令列)
  • Path與URL
  • TCP, UDP
  • HTTP, HTTPS
  • ES6,ES7,ES8
  • Express框架
  • Koa框架
  • MySQL
  • MongoDB
  • RESTful API 與 API 文件撰寫
  • 使用Babel, ESLint
  • Webpack
  • WebSocket
  • Redis
  • React 基本概念1
  • React 基本概念1-1(搭配webpack)
  • React基本概念1-2(新增元件)
  • React 基本概念2
  • react-router
  • Redux 基本概念1
  • Redux 基本概念2
  • 結合Node.js與React.js搭建論壇網站1
  • 結合Node.js與React.js搭建論壇網站2
  • 結合Node.js與React.js搭建論壇網站3
  • 結合Node.js與React.js搭建論壇網站4
  • 結合Node.js與React.js搭建論壇網站5
  • 部署
  • 快取與緩存
  • Web安全機制
  • 單元測試
  • 自動化流程與搭建travis ci
  • 結合jenkins與bitBucket
  • 團隊合作Git flow與Telegram bot
Powered by GitBook
On this page
  • 快取與緩存
  • 簡介:
  • HTTP Header 識別快取
  • 控制檔案快取
  • prefetch
  • CDN

Was this helpful?

快取與緩存

Previous部署NextWeb安全機制

Last updated 5 years ago

Was this helpful?

快取與緩存

簡介:

1.我們在瀏覽器瀏覽圖片或影片時檔案通常會較大,此時如果每次瀏覽都重新去跟server要資料速度會很慢,所以有了緩存機制,讓一些檔案下載後存在我們本地端,此時之後再瀏覽就不用再次去找server要資料

2.而我們也可以利用Redis或memcached來做簡單文字資料的存儲,或是直接把資料存在記憶體中,之後可以快速取用,這兩種都是比直接存在大型資料庫如MySQL快速

存取記憶體的方式可參考

HTTP Header 識別快取

#If-Modified-Since與Last-Modified

1.第一次訪問不會有If-Modified-Since,只有server回應的Last-Modified
2.之後client請求即會帶有If-Modified-Since時間即為上次server回應的Last-Modified
3.如果時間不一致則會重新去向server要資料,如果相同則不會再去要資料,而是直接返回304

#Etag

server會產生並傳回一個隨機數,通常是檔案內容的hash。用戶端不必瞭解hash是如何產生的,只需要在下一個請求中將其傳送給伺服器:如果hash仍然一致,說明資源未被修改,之後就可以不用再次向server要資料。

#Expires

直接設定某個時間點前都可以保有緩存

#Cache-Control

"no-cache" 和 "no-store"

「no-cache」表示必須先與伺服器確認傳回的回應是否已變更,然後才能使用該回應來滿足後續對同一個網址的請求。因此,如果存在(ETag),no-cache 會發起往返通訊來驗證快取的回應,如果資源沒有任何變更,即可避免下載步驟。

相較之下,「no-store」更加簡單,直接禁止瀏覽器和所有中繼快取儲存傳回的任何回應版本,每次使用者請求時,都會向伺服器發送一個請求,而且每次都會下載完整的回應。

「public」和「private」

如果回應標記為「public」,即使具備關聯的 HTTP 認證,甚至回應狀態碼無法正常快取,回應也可以供使用者快取。在大多數情況下,「public」並不是必要項目,因為明確的快取資訊 (例如「max-age」) 已表示 回應可供快取。

另一方面,瀏覽器可以快取「private」回應,但是通常只開放給單一使用者快取,因此不允許任何中繼快取對其進行快取,例如使用者瀏覽器可以快取包含使用者私人資訊的 HTML 網頁,但是 CDN 不能快取。

"max-age"

這個指令指定從目前請求開始,允許擷取的回應重複使用的最長時間 (單位為秒),例如「max-age=60」表示回應可以再快取及重複使用 60 秒。

控制檔案快取

在副檔名後方加上參數,如此一來瀏覽器會認定URL變得不相同,向伺服器請求新的下載

style.css?ai34mc (?號後可隨機輸入)
test.js?cihofew
test1.jpg?123123dfwef

prefetch

<link rel="prefetch" href="image.png">

預先存取資源並先存入快取

CDN

CDN(Content delivery network)內容傳遞網路

假設server在台灣.client端瀏覽器在美國,則他可以直接向位於美國某一個州的CDN server存取資源即可,而該美國CDN server會存有與台灣server相同的資料

如此會加快連線速度

客戶端瀏覽器先檢查本地緩存是否過期,如果過期,則向CDN邊緣節點發起請求,CDN邊緣節點會檢測用戶請求數據的緩存是否過期,如果沒有過期,則直接響應用戶請求,此時一個完成http請求結束;如果數據已經過期,那麼CDN還需要向源站發出回源請求(back to the source request),來拉取最新的數據

https://www.npmjs.com/package/node-cache