你不知道的前端性能優(yōu)化 - 緩存優(yōu)化 （三）
前言：所有的優(yōu)化點(diǎn)都有其適用的條件藕溅，所有的優(yōu)化點(diǎn)都能夠量化看到效果欣范，具體項(xiàng)目具體分析巍耗，并不是每個(gè)項(xiàng)目都能適用這里的每個(gè)點(diǎn)锌介，望周知嗜诀。
存儲(chǔ)對(duì)象
我們常見的前端存儲(chǔ)有這些：localstorage、cookie掏湾、sessionstorage裹虫、indexdb肿嘲。這里就不一一的闡述每個(gè)存儲(chǔ)的不同了融击。
那我們有這些存儲(chǔ)對(duì)象我們就可以好好的利用這些存儲(chǔ)對(duì)象。針對(duì)每個(gè)存儲(chǔ)的各自的特點(diǎn)雳窟，可以做一些非常好的優(yōu)化尊浪。
-
使用
localstorage緩存常用的數(shù)據(jù) 現(xiàn)代化瀏覽器都支持localStorage，我們可以實(shí)現(xiàn)一個(gè)類似這樣的功能封救，當(dāng)我們?nèi)∫粋€(gè)數(shù)據(jù)的時(shí)候拇涤，先去localStorage中尋找，沒有再向服務(wù)器發(fā)送請(qǐng)求誉结《焓浚夸張一點(diǎn)，我們可以把圖片惩坑、js文件存儲(chǔ)到里面掉盅。看一個(gè)例子： [圖片上傳失敗...(image-1cd30b-1552222954830)]淘寶真是物盡所用以舒，所有儲(chǔ)存對(duì)象基本都用了趾痘。在
localStorage存儲(chǔ)了大量的數(shù)據(jù)，包含圖片蔓钟、icon等等永票。當(dāng)頁面第二次加載的時(shí)候就不用去重復(fù)請(qǐng)求后臺(tái)相應(yīng)的資源了。(localStorage存儲(chǔ)大約能存 4M ) CDN域名不攜帶
cookiecookie存儲(chǔ)能帶給后端滥沫，所以主要是用來鑒別客戶端的唯一性侣集，知道你是哪個(gè)用戶。所以cookie中的數(shù)據(jù)不能無意義兰绣，不能太大世分。 我們的CDN域名最好和主域名分開，這樣在請(qǐng)求靜態(tài)資源的時(shí)候就不會(huì)帶上這個(gè)cookie了減少了請(qǐng)求頭的大小狭魂，減少了客戶所需的流量罚攀〉趁伲可能感覺微乎其微，但是你假設(shè)你的cookie是 1k斋泄， 一天有 1萬人訪問杯瞻，訪問靜態(tài)資源請(qǐng)求 2萬 此，那么你就會(huì)白白消耗 1萬K 的流量炫掐。其余的存儲(chǔ)對(duì)象都可以在適當(dāng)?shù)膱?chǎng)景魁莉，適當(dāng)?shù)氖褂谩Ｊ褂玫臅r(shí)候要考慮兼容募胃，和最大儲(chǔ)存容量旗唁。用的好是跑車，用不好是拖拉機(jī)痹束。
PWA和 service worker
以下來自百度检疫。
PWA是一種理念，使用多種技術(shù)來增強(qiáng)web app的功能祷嘶，可以讓網(wǎng)站的體驗(yàn)變得更好屎媳，能夠模擬一些原生功能，比如通知推送论巍。在移動(dòng)端利用標(biāo)準(zhǔn)化框架烛谊，讓網(wǎng)頁應(yīng)用呈現(xiàn)和原生應(yīng)用相似的體驗(yàn)。
PWA不能包含原生OS相關(guān)代碼嘉汰。PWA仍然是網(wǎng)站丹禀，只是在緩存、通知鞋怀、后臺(tái)功能等方面表現(xiàn)更好双泪。
簡(jiǎn)單的來說 PWA 的概念提出，就是要 web app 更像手機(jī)里裝的 APP 一樣接箫。具有推送攒读，主屏圖標(biāo)和離線訪問等特性。
PWA的提出可以說是一個(gè)進(jìn)步辛友，你可以想想以后的web app將會(huì)和手機(jī)app一樣具有很多一致的功能薄扁，這種趨勢(shì)下去，web app會(huì)大量誕生废累。
這里只是提出這一個(gè)點(diǎn)邓梅，具體的適應(yīng)場(chǎng)景特別多，其中service worker對(duì)瀏覽器的版本要求高邑滨，小伙伴們可以在自己的web app中嘗試實(shí)現(xiàn)PWA中的概念日缨，沒有特別高的兼容性要求可以試試使用 service worker 真心不錯(cuò)的，最后再推薦一個(gè)檢測(cè)當(dāng)前網(wǎng)站對(duì) PWA 的支持度的谷歌插件 Lighthouse 掖看，目前支持最高的應(yīng)該是推特匣距。
真正的緩存
以上的內(nèi)容更多是瀏覽器的存儲(chǔ)對(duì)象和PWA面哥，真正不通過代碼的瀏覽器緩存，是通過http header中的cache-control來完成的毅待，瀏覽器接受到這個(gè)配置就會(huì)做相應(yīng)的事情尚卫。
先了解下304狀態(tài)碼：
cache-control的屬性(http 1.1)
max-age 指定緩存的最大有效時(shí)間，時(shí)間之內(nèi)再次請(qǐng)求資源尸红，不去發(fā)送
http請(qǐng)求s-maxage 指定public的緩存的最大有效時(shí)間吱涉，優(yōu)先級(jí)高于
max-age,會(huì)發(fā)送請(qǐng)求，返回狀態(tài)：304private 用戶所獨(dú)有的緩存外里，就是單一用戶瀏覽器的緩存怎爵。
public 公共緩存，例如
cdn的盅蝗，代理服務(wù)器的緩存鳖链。no-cache 指定緩存是否要發(fā)送
http請(qǐng)求來詢問服務(wù)器當(dāng)前的緩存內(nèi)容是否還有效，搭配max-age=0使用风科，有這個(gè)屬性就會(huì)發(fā)送http請(qǐng)求詢問服務(wù)器撒轮。no-store 完全不會(huì)存儲(chǔ)
配合的屬性還有：
expires緩存的過期時(shí)間(http1.0的東西，沒有上面的cache-control優(yōu)先級(jí)高)
- 協(xié)商緩存策略一：
last-modified(response header) ：最后修改時(shí)間贼穆，標(biāo)識(shí)文件的最后修改時(shí)間
if-modified-since(request header)：請(qǐng)求中帶上瀏覽器中標(biāo)識(shí)的最后修改時(shí)間，服務(wù)端會(huì)和文件真實(shí)的修改時(shí)間進(jìn)行匹配兰粉，匹配返回304故痊，不匹配重新返回文件內(nèi)容
- 協(xié)防緩存策略二：
etag(response header)：文件的hash值
if-none-match(request header)：請(qǐng)求中帶上瀏覽器中儲(chǔ)存的文件hash值，服務(wù)端會(huì)和文件真實(shí)的hash值進(jìn)行對(duì)比玖姑，成功返回304愕秫，不同重新返回文件內(nèi)容
以上兩個(gè)協(xié)商緩存都需要和cache-control一起使用
流程如下：
圖片來源：https://www.cnblogs.com/mq0036/p/7090635.html
總結(jié)以上幾點(diǎn)：
我們可以使用瀏覽器儲(chǔ)存對(duì)象
localstorage、cookie焰络、sessionstorage戴甩、indexdb等，存儲(chǔ)相關(guān)的內(nèi)容在
web app的使用嘗試使用service worker闪彼，實(shí)現(xiàn)pwa的一些理念甜孤。對(duì)于圖片等靜態(tài)資源，在我們的服務(wù)器上使用協(xié)商緩存策略畏腕。
其它篇幅傳送門：
你不知道的前端性能優(yōu)化 一 靜態(tài)資源優(yōu)化
你不知道的前端性能優(yōu)化 二 布局于樣式
你不知道的前端性能優(yōu)化 三 緩存優(yōu)化
