前端性能優(yōu)化：瀏覽器的2種緩存方式，你了解嗎？

在前端性能優(yōu)化中，最重要的就是緩存，使用緩存可以極大的提升瀏覽器的響應(yīng)速率。

什么是緩存呢？

當(dāng)我們第一次訪問某個(gè)網(wǎng)站時(shí)，瀏覽器會(huì)把網(wǎng)站中的圖片等資源存儲(chǔ)在電腦中，以備后續(xù)使用，第二次訪問該網(wǎng)站時(shí)，瀏覽器直接訪問緩存中的數(shù)據(jù)，從而達(dá)到提高瀏覽器的響應(yīng)效率，優(yōu)化用戶的體驗(yàn)。

緩存的優(yōu)點(diǎn)

1.提高瀏覽器的響應(yīng)速率；

2.減少服務(wù)器的訪問壓力；

3.減少對(duì)網(wǎng)絡(luò)的壓力。

除了瀏覽器緩存之外，還存在CDN緩存、代理服務(wù)器緩存等等；這里主要描述瀏覽器緩存，瀏覽器緩存也指的是HTTP緩存，當(dāng)我們使用瀏覽器用http協(xié)議與服務(wù)器交互時(shí)，瀏覽器會(huì)使用一種與服務(wù)器約定的規(guī)則進(jìn)行緩存操作。

緩存的類型

瀏覽器的緩存位置一般分為強(qiáng)緩存和協(xié)商緩存。

他們之前的區(qū)別是強(qiáng)緩存不需要向?yàn)g覽器發(fā)送請(qǐng)求，直接從緩存中讀取資源，協(xié)商緩存需要詢問瀏覽器緩存是否過期以確定從哪里讀取資源。

強(qiáng)緩存通過設(shè)置http header來實(shí)現(xiàn)：Expires 和 Cache-Control。

Expires用來指定資源到期的具體時(shí)間，是服務(wù)器的具體時(shí)間點(diǎn)。該屬性是HTTP/1中使用的屬性，受限于本地時(shí)間，如果本地時(shí)間修改，可能會(huì)造成緩存失效。

Cache-Control也用來指定資源的到期時(shí)間，他的時(shí)間是一個(gè)時(shí)間范圍。比如：Cache-Control：max-age=300，單位是秒，代表該資源的有效時(shí)間是5分鐘。該屬性是HTTP1.1中的屬性，如果Expires和Cache-Control都設(shè)置，則Cache-Control的優(yōu)先級(jí)高于Expires。

協(xié)商緩存是在強(qiáng)緩存失效之后，瀏覽器攜帶緩存標(biāo)識(shí)向服務(wù)器發(fā)起請(qǐng)求，由服務(wù)器決定是否使用緩存。協(xié)商緩存可以通過兩種HTTP Header來實(shí)現(xiàn)：Last-Modified和ETag。

Last-Modified

瀏覽器第一次訪問資源時(shí)，服務(wù)器會(huì)在response頭中添加時(shí)間節(jié)點(diǎn)，這個(gè)事件點(diǎn)是服務(wù)器最后一次修改文件的時(shí)間點(diǎn)，瀏覽器第二次訪問該資源時(shí)，檢測(cè)到緩存文件中有l(wèi)ast-Modified，就會(huì)在第二次請(qǐng)求頭中添加if-Modified-Since，值為上次Last-Modified的值，服務(wù)器拿到該值后，會(huì)與該資源在服務(wù)器端的最后修改時(shí)間做對(duì)比，如果相同，則說明命中緩存，返回304，如果不相同，則會(huì)返回200，并返回新資源。

ETag

和Last-Modified相同，Last-Modified會(huì)返回最后修改的時(shí)間點(diǎn)，而Etag會(huì)返回一個(gè)新的token，第二次請(qǐng)求時(shí)，token會(huì)在If-None-Match中返回給服務(wù)器，服務(wù)器會(huì)比較token是否一致。

總結(jié)

瀏覽器緩存的強(qiáng)緩存和協(xié)商緩存如下圖：

最后：在我的V ：atstudy-js，可以免費(fèi)領(lǐng)取一份10G軟件測(cè)試工程師面試寶典文檔資料。以及相對(duì)應(yīng)的視頻學(xué)習(xí)教程免費(fèi)分享！其中包括了有基礎(chǔ)知識(shí)、Linux必備、Shell、互聯(lián)網(wǎng)程序原理、Mysql數(shù)據(jù)庫、抓包工具專題、接口測(cè)試工具、測(cè)試進(jìn)階-Python編程、Web自動(dòng)化測(cè)試、APP自動(dòng)化測(cè)試、接口自動(dòng)化測(cè)試、測(cè)試高級(jí)持續(xù)集成、測(cè)試架構(gòu)開發(fā)測(cè)試框架、性能測(cè)試、安全測(cè)試等。