【拿來主義】當我們談WEB緩衝的時候，我們在談些什嗎？

標籤：eth   缺點   密碼   判斷   web app   match   目的   產生   客戶   

第一部分 Web緩衝是什麼

 

情境1：測試妹子測功能時會說為什麼我的瀏覽器的顯示亂七八糟，我的介面怎麼跟別人瀏覽器上不一致？旁邊的人會提醒說：清下緩衝試試。

情境2：開發改了代碼，上了環境，發現不生效，這時候首先就是清緩衝，清了瀏覽器緩衝發現還是不行，再檢查，發現是反向 Proxy緩衝。

 

那麼，當我們談WEB緩衝的時候，我們說的是什嗎？什麼地方可以緩衝？什麼時候用什麼緩衝？使用不當會帶來什麼問題，我們怎麼避免？

會不會傻傻分不清楚，那我們就來理一理，看看web緩衝究竟是什嗎？

 

緩衝：緩衝就是把資料或者我們需要取到的內容，放到能更快訪問的地方。緩衝對於前端後端的coder來說，應該都不陌生，不論前端後端，我們使用緩衝都是為了提升效能。

Web緩衝：按照上面的邏輯，就是為了提升Web頁面訪問的效能，把能緩衝的頁面or資料緩衝到能夠更快取得的地方。廣義的Web緩衝也可以包括伺服器緩衝，本文為了與伺服器緩衝區分，不包含伺服器緩衝。

 

第二部分 Web緩衝的類型

 

 

 

在典型的web應用中，一個瀏覽器發起的請求，會經過中的幾個步驟（其中CDN、反向 Proxy是可選的），那麼緩衝的地方或者層次也很好理解，就是中的瀏覽器、反向 Proxy、cdn。

 

第三部分 瀏覽器緩衝

瀏覽器緩衝是所有WEB應用都會使用的，瀏覽器的緩衝類型很多，我們可以通過瀏覽器提供的開發人員工具來查看。

以chrome瀏覽器為例，開啟chrome開發人員工具，再選擇“Resources”中看到所有的緩衝類型，如所示：

一、Frames

Frames的緩衝，是基於HTTP協議的瀏覽器檔案級緩衝。

瀏覽器在傳送檔案請求時，可以根據協議頭判斷從伺服器端請求檔案還是從本機快取讀取檔案，主要判斷依據是expires和etag,讀取檔案的流程如：

從這張流程圖可以看出，影響瀏覽器的檔案快取主要有幾個屬性：expires、Etag、Last-Modified，這三個屬性是由http協議定義的。

（一）控制緩衝的屬性

在http1.0中約定用expires來確定是否使用緩衝中的檔案。http1.1中約定使用的是Cache-Control、Last-Modified/If-Modified-Since、etag。下面來分別看下各種屬性的定義：

1、Expires

用於設定靜態資源的到期時間。

2、Cache-Control

Cache-Control可以用於控制是否緩衝、緩衝的讀取許可權、資源的有效期間。只不過Cache-Control的選擇更多，設定更細緻，如果同時設定的話，其優先順序高於Expires。

（1）public 指示響應資料可以被任何用戶端緩衝

（2）private 指示響應資料可以被非共用快取所緩衝。這表明響應的資料可以被發送請求的瀏覽器緩衝，而不能被中介所緩衝

（3）no-cache 指示響應資料不能被任何接受響應的用戶端所緩衝

（4）no-store 指示所傳送的響應資料除了不能被緩衝，也不能存入磁碟。一般用于敏感資料，以免資料被複製。

（5）must-revalidate 指示所有的緩衝都必須重新驗證，在這個過程中，瀏覽器會發送一個If-Modified-Since頭。如果伺服器程式驗證得出當前的響應資料為最新的數 據，那麼伺服器應當返回一個304 Not Modified響應給用戶端，否則響應資料將再次被發送到用戶端。

（6）proxy-revalidate 與must-revalidate相似，不同的是用來指示共用快取。

（7）max-age:（單位秒） 資料經過max-age設定的秒數後就會失效，相當於HTTP/1.0中的Expires頭。如果在一次響應中同時設定了max-age和Expires，那麼max-age將具有較高的優先順序。（註：ngnix設定expires會被轉換為max-age）

3、Last-Modified/If-Modified-Since

l  Last-Modified：標示這個響應資源的最後修改時間。web伺服器在響應請求時，告訴瀏覽器資源的最後修改時間。

l  If-Modified-Since：當資源到期時（使用Cache-Control標識的max-age），發現資源具有Last-Modified聲明，則再次向web伺服器請求時帶上頭 If-Modified-Since，表示請求時間。web伺服器收到請求後發現有頭If-Modified-Since 則與被請求資源的最後修改時間進行比對。若最後修改時間較新，說明資源又被改動過，則響應整片資源內容（寫在響應訊息包體內），HTTP 200；若最後修改時間較舊，說明資源無新修改，則響應HTTP 304 (無需包體，節省瀏覽)，告知瀏覽器繼續使用所儲存的cache。

4、Etag/If-None-Match

Etag/If-None-Match也要配合Cache-Control使用。

Etag：web伺服器響應請求時，告訴瀏覽器當前資源在伺服器的唯一標識（建置規則由伺服器定義）。nginx中，etag會預設增加，如果需要關閉，需要在設定檔中設定：etag off;

l  If-None-Match：當資源到期時（使用Cache-Control標識的max-age），發現資源具有Etage聲明，則再次向web伺服器請求時帶上頭If-None-Match （Etag的值）。web伺服器收到請求後發現有頭If-None-Match 則與被請求資源的相應校正串進行比對，決定返回200或304。

（二）使用者行為與緩衝

瀏覽器緩衝行為還有使用者的行為有關

使用者操作	Expires/Cache-Control	Last-Modified/Etag
地址欄斷行符號	有效	有效
頁面連結跳轉	有效	有效
新開視窗	有效	有效
前進、後退	有效	有效
F5重新整理	無效	有效
Ctrl+F5重新整理	無效	無效

（二）如何控制緩衝

設定緩衝的兩種方式：

1、web伺服器配置

以ngnix為例，在nginx.conf中設定：

location~ .*\.(gif|jpg|png|htm|html|css|js|flv|ico|swf)(.*) {

                   expires 1d;

    }

上述配置表示這些靜態檔案1天后到期。如果想配置為完全不緩衝，那麼可以設定為expires -1；（後面的數字配置為負數），返回的header會被設定為Cache-Control:no-cache

2、後台代碼寫入

例如：

response.setHeader("Cache-Control", "no-cache");  

3、html 的meta標籤

<meta http-equiv="Cache-Control" content="max-age=7200" /> 

（三）緩衝的問題和解決辦法

1、引入緩衝之後，主要有兩個問題：

（1）瀏覽器不知道有資源更新，還是使用緩衝中的老檔案。

（2）各個檔案快取策略不一致，有關聯關係的檔案，有的從伺服器載入，有的直接取瀏覽器緩衝的，這樣有可能會導致介面混亂。

2、解決方式

（1）Etag或Last-modified

Etag是服務端根據檔案資訊產生的字串，當服務端檔案更新時，Etag也會變化，這樣能保證當服務端檔案更新時，取到新的檔案內容。

但是Etag這種解決方式的問題是，請求還是會發到服務端，由服務端進行判斷。

Last-modified與Etag類似。

（2）檔案名稱尾碼

構建過程中，把構建產生的檔案加上隨機尾碼，主入口html中的引用檔案在構建中替換為增加了檔案名稱尾碼的；主入口檔案配置為不緩衝。

當服務端更新檔案時，由於檔案名稱尾碼更改，瀏覽器緩衝匹配不上，會直接到服務端擷取，服務端沒有更新檔案時，在瀏覽器緩衝擷取。

這種方式效果較好，但是需要引入構建，對於已經使用了前端構建的web應用比較適用。

二、cookie

cookie是一種能夠讓網站伺服器把少量資料儲存到用戶端的硬碟或記憶體，或是從用戶端的硬碟讀取資料的一種技術。當我們瀏覽某網站時，由Web伺服器置於你硬碟上的一個非常小的文字檔，它可以記錄使用者ID、密碼、瀏覽過的網頁、停留的時間等資訊。

cookie以索引值對的方式來儲存，有數量和大小的限制，數量各個瀏覽器不同，大小不能超過4K。

（一）設定cookie的方式：

1、瀏覽器

瀏覽器提供了操作cookie的方式，可以對cookie進行設定、讀取、刪除。另外,cookie也可以設定到期時間。

瀏覽器擷取cookie的方式：

document.cookie

2、伺服器

很多時候，我們會使用cookie來做協助做會話管理，登入成功後，由服務端將sessionid資訊寫入cookie,後續用戶端發送的所有請求都攜帶cookie資訊，服務端驗證cookie中的sessionid資訊，判斷此請求是否合法。以java為例，服務端寫入cookie的方法如下：

Cookie cookie = new Cookie("sessionid",URLEncoder.encode("fejerwiie2234","UTF-8"));   response.addCookie(cookie);  

   （二）cookie的屬性

屬性名稱	屬性含義
name	cookie的名稱
value	cookie的值
domain	可以訪問此cookie的網域名稱
path	可以訪問此cookie的頁面路徑。 如domain是abc.com,path是/test，那麼只有/test路徑下的頁面可讀取此cookie
expires/Max-Age	欄位為此cookie逾時時間。若設定其值為一個時間，那麼當到達此時間後，此cookie失效。不設定的話預設值是Session，意思是cookie會和session一起失效。當瀏覽器關閉(不是瀏覽器標籤頁，而是整個瀏覽器) 後，此cookie失效
Size	此cookie大小
httponly	cookie的httponly屬性。若此屬性為true，則只有在http要求標頭中會帶有此cookie的資訊，而不能通過document.cookie來訪問此cookie。
secure	設定是否只能通過https來傳遞此條cookie

三、localStorage

localstorage是Html5中新加入的特性，引入localstorage主要是作為瀏覽器本機存放區，解決cookie作為儲存容量不足的問題。localstorage是一種持久化的儲存。

同樣，localstorage也是一個key-value形式的儲存。

（一）瀏覽器提供了localstorage的增刪改查方法

增加/修改：window.localStorage.setItem("username","admin");

查詢：window.localStorage.getItem("username");

刪除：window.localStorage.removeItem("username","admin");

（二）使用localstorage的注意事項

localstorage中儲存的value只能是字串型，如果要儲存物件，需要轉換為字串再進行儲存。

四、sessionStorage

sessionStorage用於本機存放區一個會話（session）中的資料，這些資料只有在同一個會話中的頁面才能訪問並且當會話結束後資料也隨之銷毀。因此sessionStorage不是一種持久化的本機存放區，僅僅是會話層級的儲存。

同樣，瀏覽器也提供了sessionStorage的增刪改查方法,與localStorage一致，只是擷取方法為：window.sessionStorage。

五、IndexedDB

IndexedDB也是html5提供的，能夠在用戶端儲存大量的結構化資料的資料庫，並且提供API進行高效檢索。IndexedDB的初始大小是50M，還可以增加，就儲存量來說，秒殺其他儲存方式。

但是它的缺點也很明顯，IndexedDB並不是所有主流瀏覽器都支援，比如IE9、IE10和IE11都不支援，所以，如果你的使用者群還使用著IE系列的瀏覽器，IndexedDB就不用考慮了。

IndexedDB也有一些api,這裡不再詳述了，可以參考：

https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

六、Web SQL

此方案在W3C已經廢棄，不再維護，替代方案是IndexedDB。

七、application cache

該特性已經從 Web 標準中刪除。

八、Cache Storage

   該方案是一個實驗性的方案，並不是所有瀏覽器都支援。

CacheStorage是在ServiceWorker的規範中定義的。CacheStorage 可以儲存每個serverWorker申明的cache對象，cacheStorage有open、match、has、delete、keys五個核心方法，可以對cache對象的不同匹配進行不同的響應。

九、Services Worker

service worker提供了很多新的能力，使得web app擁有與native app相同的離線體驗、訊息推送體驗。service worker也是一個實驗性的方案，並不是所有瀏覽器都支援。

Service worker可以：

1. 後台訊息傳遞

2. 網路代理程式，轉寄請求，偽造響應

3. 離線緩衝

4. 訊息推送

可以參考：https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers

 

第三部分、CDN緩衝

 

網站的載入速度，除了資源的多少和大小外，很大部分時間是用於網路傳輸的，而網路傳輸時間與使用者瀏覽器與資源所在伺服器的地理位置直接相關，要提升網站載入速度，一個辦法就是使資源所在伺服器與使用者的地理位置盡量靠近。

CDN：全稱是Content Delivery Network，即內容分髮網絡。其基本思路是儘可能避開互連網上有可能影響資料轉送速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。CDN包括分布式儲存、負載平衡、網路請求的重新導向和內容管理4個要件。而其中呢，內容管理和全域的網路流量管理是CDN的核心所在。CDN確保內容以一種極為高效的方式為使用者的請求提供服務,使使用者可就近取得所需內容，解決 Internet網路擁擠的狀況，提高使用者訪問網站的響應速度。

CDN的拓撲圖如下：

一、CDN的緩衝機制

 　　CDN邊緣節點緩衝策略因服務商不同而不同，但一般都會遵循http標準協議，通過http回應標頭中的Cache-control: max-age的欄位來設定CDN邊緣節點資料緩衝時間。當用戶端向CDN節點請求資料時，CDN節點會判斷快取資料是否到期，若快取資料並沒有到期，則直接將快取資料返回給用戶端；否則，CDN節點就會向來源站點發出回源請求，從來源站點拉取最新資料，更新本機快取，並將最新資料返回給用戶端。所以，如果我們修改了內容，最好加個版本號碼，讓CDN重新擷取資源，從而減少不必要的麻煩。

　　CDN服務商一般會提供基於檔案尾碼、目錄多個維度來指定CDN緩衝時間，為使用者提供更精細化的緩衝管理。CDN緩衝時間會對“回源率”產生直接的影響。若CDN緩衝時間較短，CDN邊緣節點上的資料會經常失效，導致頻繁回源，增加了來源站點的負載，同時也增大的訪問延時；若CDN緩衝時間太長，會帶來資料更新時間慢的問題。開發人員需要增對特定的業務，來做特定的資料緩衝時間管理。

二、CDN的問題

CDN的分流作用不僅減少了使用者的訪問延時，也減少了來源站點的負載。

但其缺點主要是緩衝的同步問題：當網站更新時，如果CDN節點上資料沒有及時更新，即便使用者再瀏覽器使用Ctrl +F5的方式使瀏覽器端的緩衝失效，也會因為CDN邊緣節點沒有同步最新資料而導致使用者訪問異常。

三、如何解決CDN的問題

CDN的主要問題是由於緩衝同步不及時帶來的，緩衝更新有兩種方式：

（一）定製緩衝策略

靜態檔案在返回時由原始伺服器控制expires、cache-control等屬性來定義CDN的緩衝策略。

（二）原始伺服器資源更新時，主動重新整理CDN緩衝

CDN邊緣節點對開發人員是透明的，相比於瀏覽器Ctrl+F5的強制重新整理來使瀏覽器本機快取失效，開發人員可以通過CDN服務商提供的“重新整理緩衝”介面來達到清理CDN邊緣節點緩衝的目的。這樣開發人員在更新資料後，可以使用“重新整理緩衝”功能來強制CDN節點上的資料緩衝到期，保證用戶端在訪問時，拉取到最新的資料。

第四部分、反向 Proxy緩衝

反向 Proxy(Reverse Proxy): 這種機制是Web伺服器隱藏在Proxy 伺服器之後，實現這種機制的伺服器稱作反向 Proxy伺服器(Reverse Proxy Server)。此時，Web伺服器成為後端伺服器，反向 Proxy伺服器稱為前端伺服器。

    引入反向 Proxy伺服器的目的之一就是基於緩衝的加速。我們可以將內容緩衝在反向 Proxy伺服器上，所有緩衝機制的實現仍然採用HTTP/1.1協議。

（一）反向 Proxy緩衝配置

以通常使用的反向 Proxy--ngnix為例，實現緩衝的配置如下：

1、proxy_cache_path

文法：proxy_cache_path path [levels=number] keys_zone=zone_name:zone_size [inactive=time] [max_size=size];  

預設值：None  

使用欄位：http  

指令指定緩衝的路徑和一些其他參數，緩衝的資料存放區在檔案中，並且使用代理url的雜湊值作為關鍵字與檔案名稱。levels參數指定緩衝的子目錄數，例如：

proxy_cache_path /data/nginx/cache levels=1:2 keys_zone=one:10m;

檔案名稱類似於：

/data/nginx/cache/c/29/b7f54b2df7773722d382f4809d65029c

levels指定目錄結構，可以使用任意的1位或2位元字作為目錄結構，如 X, X:X,或X:X:X 例如: “2”, “2:2”, “1:1:2“，但是最多隻能是三級目錄。  

2、proxy_cache

文法：proxy_cache zone_name;  

預設值：None  

使用欄位：http, server, location  

設定一個快取區域的名稱，一個相同的地區可以在不同的地方使用。  

3、proxy_cache_valid

文法：proxy_cache_valid reply_code [reply_code …] time;  

預設值：None  

使用欄位：http, server, location  

為不同的應答設定不同的緩衝時間，例如：

proxy_cache_valid 200 302 10m;

proxy_cache_valid 404 1m;

為應答代碼為200和302的設定緩衝時間為10分鐘，404代碼緩衝1分鐘。  

如果只定義時間：

proxy_cache_valid 5m;

那麼只對代碼為200, 301和302的應答進行緩衝。  

同樣可以使用any參數任何應答。

proxy_cache_valid 200 302 10m;

proxy_cache_valid 301 1h;

proxy_cache_valid any 1m;

 

 

參考地址不明

【拿來主義】當我們談WEB緩衝的時候，我們在談些什嗎？