在前端性能優(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è)試等。
![]()
特別聲明:以上內(nèi)容(如有圖片或視頻亦包括在內(nèi))為自媒體平臺(tái)“網(wǎng)易號(hào)”用戶上傳并發(fā)布,本平臺(tái)僅提供信息存儲(chǔ)服務(wù)。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.