近段時間都是在更新前端學(xué)習(xí)相關(guān)的文章，今天來學(xué)習(xí)和總結(jié)一下一個web通用知識： 瀏覽器緩存内贮，Cookie和Session产园。這玩意對前端的性能優(yōu)化也有一定作用汞斧，應(yīng)該屬于前端必須掌握的知識之一了。
緩存
在說這些之前什燕，先說說瀏覽器的緩存粘勒。為什么會出現(xiàn)瀏覽器的緩存技術(shù)？不想下東西唄屎即。同樣的東西庙睡，我每次請求都要下一次，不管是從用戶體驗還是速度的方面考慮技俐，都非常的僵硬乘陪。于是聰明的前端——哦不，瀏覽器設(shè)計者就想到了增加緩存這個東西雕擂。
前端想要自己控制緩存啡邑，可以在header上設(shè)置cache control(Link至MDN,以下部分內(nèi)容來自MDN)。不算非標(biāo)準(zhǔn)的拓展命令井赌，可以使用的屬性值為以下：
緩存請求指令：
Cache-Control: max-age=<seconds>谤逼、max-stale[=<seconds>]、 min-fresh=<seconds>仇穗、 no-cache
流部、no-store、 no-transform纹坐、 only-if-cached
緩存響應(yīng)指令：
Cache-control: must-revalidate贵涵、no-cache、no-store恰画、no-transform宾茂、 public、 private拴还、proxy-revalidate跨晴、 max-age=<seconds>、 s-maxage=<seconds>
一個個說的話就太麻煩了片林，還是直接看MDN比較好端盆。這里我畫一個簡單的思維導(dǎo)圖做輔助記憶用。
http://ooibweb9s.bkt.clouddn.com//17-6-19/65594827.jpg
看圖細(xì)心的話應(yīng)該能夠發(fā)現(xiàn)费封，圖中有一個s-maxage焕妙，對它的設(shè)置會覆蓋maxage和Expire。Expire是什么弓摘？這就是我們能夠在Header中設(shè)置的另外一個值焚鹊。將Expires-cache contrl設(shè)置為一個時間，那么只要當(dāng)前時間沒有到這個時間韧献，我們所有對服務(wù)器進行的請求都將不被接受轉(zhuǎn)而直接走硬盤末患。（Expire的解釋在MDN上沒有中文研叫，我認(rèn)為應(yīng)該直接翻譯為“過期時間”?）
但是Expire有一個小小的問題，就是這個時間怎么來璧针。要知道嚷炉，瀏覽器的取時間方法（比如getTime)都是直接取得系統(tǒng)時間，這樣就帶來一個問題探橱。根據(jù)客戶端信息不可靠原則申屹，如果我本地的時間錯亂（比如我這種裝了雙系統(tǒng)然后Linux每次都會莫名改寫windows時間的），那么Expire就形同虛設(shè)隧膏。所以嘛哗讥，一般不推薦使用Expire.
我們還能夠設(shè)置的一個屬性則是Last-Modified。如果設(shè)置了Last-Modified私植，那么它將默認(rèn)保存緩存的內(nèi)容300S。
Cookie
Cookie是啥我想我就不需要解釋了车酣，最簡單的Cookie設(shè)置方法就是document.cookie/Cookies.set方法曲稼。在Set Cookies以后，對相同域名的所有請求都會帶上這個Cookie回傳湖员。Cookie一般分為兩種類型贫悄，分別為非持久Cookie(內(nèi)存Cookie)和持久Cookie(硬盤Cookie)。內(nèi)存Cookie由瀏覽器維護娘摔，保存在內(nèi)存中窄坦，瀏覽器關(guān)閉后就消失了，而硬盤Cookie則有一個過期時間凳寺，過期時間內(nèi)是持續(xù)有效的鸭津。
為什么要有Cookie?
因為HTTP協(xié)議是無狀態(tài)的，服務(wù)器無法記錄用戶上一次的操作肠缨，這樣就造成了交互上的阻礙逆趋。而Cookie就可以做到繞開HTTP的無狀態(tài)。服務(wù)器借由從Cookie中讀取包含的信息晒奕，借以維護用戶和服務(wù)器會話中的狀態(tài)闻书。（比如購物/登錄）。
Cookie的路徑
Cookie一般都是由于用戶訪問一個頁面才產(chǎn)生的脑慧，但是我們會遇到一個問題——并不是只有在創(chuàng)建Cookie的頁面才需要訪問這個Cookie魄眉。如果出于安全考慮，只有與創(chuàng)建Cookie的頁面出于同一個目錄或在創(chuàng)建Cookie頁面的子目錄下的網(wǎng)頁才可以訪問闷袒。
那么這樣就又會帶來一個問題：如果者說我希望其父級乃至整個網(wǎng)頁都能夠使用Cookie坑律，怎么做呢？
可以這樣：
document.cookie="userName=CoderMageFox;path=/";
Cookie的域
路徑問題解決了囊骤，又一個問題擺在了面前脾歇。如果我們在同一個主域下有不同的域名（如img.codermagefox.com和test.codermagefox.com)那么如何互相訪問呢蒋腮？要知道，這個需求的場景相當(dāng)多藕各。這個時候池摧，我們可以選擇指定可訪問Cookie的主機名來進行設(shè)置。
document.cookie="name=codermagefox;domain=codermagefox.com path=/;"
這樣就可以解決啦激况。
Cookie的缺陷
（以下引用自MDN）
1.Cookie會被附加在每個HTTP請求中作彤，所以無形中增加了流量。
2.由于在HTTP請求中的Cookie是明文傳遞的乌逐，所以安全性成問題竭讳。（除非用HTTPS）
3.Cookie的大小限制在4KB左右。對于復(fù)雜的存儲需求來說是不夠用的浙踢。[3]
然而我在翻閱《JavaScript權(quán)威指南》的時候發(fā)現(xiàn)了一點绢慢，現(xiàn)代瀏覽器遵循的HTTP標(biāo)準(zhǔn)是RFC2965。
書上原文：
而這個標(biāo)準(zhǔn)中對于這一段是這么寫的：
5.3 Implementation Limits
Practical user agent implementations have limits on the number and
size of cookies that they can store. In general, user agents' cookie
support should have no fixed limits. They should strive to store as
many frequently-used cookies as possible. Furthermore, general-use
user agents SHOULD provide each of the following minimum capabilities
individually, although not necessarily simultaneously:
* at least 300 cookies
* at least 4096 bytes per cookie (as measured by the characters
that comprise the cookie non-terminal in the syntax description
of the Set-Cookie2 header, and as received in the Set-Cookie2
header)
* at least 20 cookies per unique host or domain name
看到這里我有點懵逼了洛波。不是說at least 嗎胰舆？所以說這些標(biāo)準(zhǔn)其實是瀏覽器自己定的而不是文檔規(guī)定的？這個坑我暫時沒弄明白蹬挤，以后弄明白了再回來填缚窿。
Session
正如同上面所說，HTTP的傳輸有一個很大的問題焰扳，就是明文傳輸倦零。明文傳輸會導(dǎo)致一個什么問題十嘿？我可以抓包來獲取很多用戶信息（比如使用WireShark\Fiddle等工具）而且HTTP請求是可以篡改的形导，并且十分容易篡改。又根據(jù)客戶端信息不可靠原則逗嫡，我們需要一個東西來驗證用戶的身份怎么辦呢育瓜？
這個時候诞帐，Session就出馬了。Session也可以做到Cookie的部分功能爆雹，不過停蕉，Session是保存在服務(wù)器上的。服務(wù)端的信息無法隨便篡改钙态，所以Session可以做到可靠慧起。具體的做法一般是服務(wù)端和客戶端之間不傳輸明文數(shù)據(jù)，而是傳輸一段經(jīng)過特殊加密的密文册倒，密文對應(yīng)的服務(wù)器硬盤數(shù)據(jù)中才是真實的數(shù)據(jù)蚓挤。這段數(shù)據(jù)在Session激活后從服務(wù)器磁盤中取出到內(nèi)存中，再返回給瀏覽器。
需要注意的是灿意，Session是一種抽象的概念估灿，開發(fā)者為了實現(xiàn)中斷和繼續(xù)等操作，將 user agent 和 server 之間一對一的交互缤剧，抽象為“會話”馅袁，進而衍生出“會話狀態(tài)”。而而 cookie 是一個實際存在的東西荒辕，http 協(xié)議中定義在 header 中的字段汗销。Session可以被認(rèn)為是一種Cookie的后端無狀態(tài)實現(xiàn)。
當(dāng)然抵窒，現(xiàn)在很多大流量的網(wǎng)站使用的一般是Secret Cookie,這又是另外一種做法了弛针。
便于記憶的思維導(dǎo)圖：
寫了這么多，對于Cookie/Session的理解算是有一些了李皇。今天收獲不錯削茁，Nice!
