在前端開發中，效能一直都是被大家所重視的一點，然而判斷乙個**的效能最直觀的就是看網頁開啟的速度。其中提高網頁反應速度的乙個方式就是使用快取。乙個優秀的快取策略可以縮短網頁請求資源的距離，減少延遲，並且由於快取檔案可以重複利用，還可以減少頻寬，降低網路負荷。那麼下面我們就來看看伺服器端快取的原理。
web快取分為很多種，比如資料庫快取、**伺服器快取、還有我們熟悉的cdn快取，以及瀏覽器快取。對於太多文字的閱讀其實我是拒絕的，於是就畫了個圖來解釋下。
瀏覽器通過**伺服器向源伺服器發起請求的原理如下圖，
如果看不清，請點開大圖~請點開大圖~請點開大圖~
瀏覽器先向**伺服器發起web請求，再將請求**到源伺服器。它屬於共享快取，所以很多地方都可以使用其快取資源，因此對於節省流量有很大作用。
瀏覽器快取是將檔案儲存在客戶端，在同乙個會話過程中會檢查快取的副本是否足夠新，在後退網頁時，訪問過的資源可以從瀏覽器快取中拿出使用。通過減少伺服器處理請求的數量，使用者將獲得更快的體驗
下面我就來著重講下傳說中的瀏覽器快取。
頁面的快取狀態是由header決定的，header的引數有四種：
一、cache-control：
1、max-age（單位為s）指定設定快取最大的有效時間，定義的是時間長短。當瀏覽器向伺服器傳送請求後，在max-age這段時間裡瀏覽器就不會再向伺服器傳送請求了。
我們來找個資源看下。比如shang.qq.com上的css資源，max-age=2592000，也就是說快取有效期為2592000秒（也就是30天）。於是在30天內都會使用這個版本的資源，即使伺服器上的資源發生了變化，瀏覽器也不會得到通知。max-age會覆蓋掉expires，後面會有討論。
2、s-maxage（單位為s）同max-age，只用於共享快取（比如cdn快取）。
比如，當s-maxage=60時，在這60秒中，即使更新了cdn的內容，瀏覽器也不會進行請求。也就是說max-age用於普通快取，而s-maxage用於**快取。如果存在s-maxage，則會覆蓋掉max-age和expires header。
3、public指定響應會被快取，並且在多使用者間共享。也就是下圖的意思。如果沒有指定public還是private，則預設為public。
4、private響應只作為私有的快取（見下圖），不能在使用者間共享。如果要求http認證，響應會自動設定為private。
5、no-cache指定不快取響應，表明資源不進行快取，比如，
但是設定了no-cache之後並不代表瀏覽器不快取，而是在快取前要向伺服器確認資源是否被更改。因此有的時候只設定no-cache防止快取還是不夠保險，還可以加上private指令，將過期時間設為過去的時間。
6、no-store絕對禁止快取，一看就知道如果用了這個命令當然就是不會進行快取啦～每次請求資源都要從伺服器重新獲取。
7、must-revalidate指定如果頁面是過期的，則去伺服器進行獲取。這個指令並不常用，就不做過多的討論了。
二、expires
快取過期時間，用來指定資源到期的時間，是伺服器端的具體的時間點。也就是說，expires=max-age + 請求時間，需要和last-modified結合使用。但在上面我們提到過，cache-control的優先順序更高。 expires是web伺服器響應訊息頭欄位，在響應http請求時告訴瀏覽器在過期時間前瀏覽器可以直接從瀏覽器緩訪問資料，而無需再次請求。
三、last-modified
伺服器端檔案的最後修改時間，需要和cache-control共同使用，是檢查伺服器端資源是否更新的一種方式。當瀏覽器再次進行請求時，會向伺服器傳送if-modified-since報頭，詢問last-modified時間點之後資源是否被修改過。如果沒有修改，則返回碼為304，使用快取；如果修改過，則再次去伺服器請求資源，返回碼和首次請求相同為200，資源為伺服器最新資源。
如下圖，最後修改時間為2023年12月19日星期五2點50分47秒
四、etag
根據實體內容生成一段hash字串，標識資源的狀態，由服務端產生。瀏覽器會將這串字串傳回伺服器，驗證資源是否已經修改，如果沒有修改，過程如下：
使用etag可以解決last-modified存在的一些問題：
a、某些伺服器不能精確得到資源的最後修改時間，這樣就無法通過最後修改時間判斷資源是否更新
b、如果資源修改非常頻繁，在秒以下的時間內進行修改，而last-modified只能精確到秒
c、一些資源的最後修改時間改變了，但是內容沒改變，使用etag就認為資源還是沒有修改的。
還是用圖說話，下面是我所總結的從瀏覽器請求到展示資源的過程：
說了那麼多cache-control的指令，那麼如何選擇使用哪些指令呢？我還是不說話==
額外的
除了開頭提到的那麼多快取方式以外，還有一種我們都熟悉的快取方式，localstorage和sessionstorage（好像是兩種23333）。
localstorage是一種本地儲存的公共資源，網域名稱下很多應用共享這份資源會有風險；localstorage是以頁面網域名稱劃分的，如果有多個等價網域名稱之間的localstorage不互通，則會造成快取多份浪費。
localstorage在pc上的相容性不太好，而且當網路速度快、協商快取響應快時使用localstorage的速度比不上304。並且不能快取css檔案。而移動端由於網速慢，使用localstorage要快於304。
在html中載入乙個png圖，首次載入的時候時間如下圖，
然而將使用了localstorage儲存後，再次重新整理後載入時間為0。
而相對localstorage來說，sessionstorage的資料只儲存到特定的會話中，不屬於持久化的儲存，所以關閉瀏覽器會清除資料。和localstorage具有相同的方法。
在前端開發中快取是必不可少的，那麼使用怎樣的快取方式更高效、讓我們專案的效能更優，還是需要我們仔細斟酌。
沉浸式Web初體驗
沉浸就是讓人專注在當前的情境下感到愉悅和滿足，而忘記真實世界的情境。心流理論能有力解釋人們廢寢忘食地投入一件事情的狀態。心流理論的核心就是說當人的技能與挑戰最佳匹配時能達到心流狀態。比如玩乙個遊戲，如果遊戲太難，遊戲者會感到焦慮 如果遊戲太容易，遊戲者會感到無聊 當遊戲者覺得有能力挑戰遊戲時，才會投...
web攻擊 xss攻擊初體驗
昨天，在某個論壇看到乙個帖子，某個給論壇進行了攻擊。瀏覽某個帖子時就會彈出 只是來測試論壇有沒有做攻擊防護 的調皮字樣，隨後該問題被修復，帖子被刪。我勾起了我的好奇，我查了有關知識。簡單來說就是跨站指令碼攻擊，在某個輸入框或者url新增指令碼 儲存到伺服器上。比如論壇，每當被攻擊的帖子被瀏覽時，指令...
起點web端體驗報告
1閱讀頁面可以全屏,以及方向鍵翻頁,方便程度高 2.左上角的選單頁面,目錄,書籤都都在容易看到的地方,切換章節很方便,也不會忘了加入書架 4.將找書所需要的所有功能幾乎都整合在了精選這乙個欄目裡，方便使用。在精選這乙個欄目中方便使用者找書的部分有 排行榜，分類，篩選，暢銷精選，主編力薦，免費專區，新...