摘要:概念瀏覽器緩存是前端開發(fā)中經(jīng)常遇到的問(wèn)題,它是提升性能同時(shí)減少服務(wù)器壓力的有效手段之一。服務(wù)器通過(guò)指定,告知代理服務(wù)器,需要緩存兩個(gè)版本壓縮和未壓縮。異常表現(xiàn)上述緩存有關(guān)的規(guī)律,并非所有瀏覽器都遵循,比如說(shuō)。
概念
瀏覽器緩存是前端開發(fā)中經(jīng)常遇到的問(wèn)題,它是提升性能同時(shí)減少服務(wù)器壓力的有效手段之一。
類型 1.強(qiáng)緩存如果啟用了強(qiáng)緩存,請(qǐng)求資源時(shí)不會(huì)向服務(wù)器發(fā)送請(qǐng)求,直接從緩存中讀取資源,在chrome控制臺(tái)的network中看到請(qǐng)求返回的200狀態(tài)碼,并在狀態(tài)碼的后面跟著from disk cache 或者from memory cache關(guān)鍵字。
2.協(xié)商緩存向服務(wù)器請(qǐng)求資源時(shí),服務(wù)器會(huì)根據(jù)這個(gè)請(qǐng)求的request header一些參數(shù)來(lái)判斷是否符合協(xié)商緩存類型,如果符合在返回304狀態(tài)碼并帶上新的response header通知瀏覽器從緩存中讀取資源。
對(duì)比:
緩存相關(guān)的header 1.強(qiáng)緩存兩者的共同點(diǎn)是都從客戶端讀取資源,不同的是強(qiáng)緩存不會(huì)向服務(wù)器發(fā)送請(qǐng)求,協(xié)商緩存會(huì)發(fā)請(qǐng)求。
expires
response header里的過(guò)期時(shí)間,瀏覽器再次加載資源時(shí),如果在這個(gè)時(shí)間內(nèi),則會(huì)使用強(qiáng)緩存;
cache control
當(dāng)值設(shè)為max-age = 300時(shí),則代表在這個(gè)請(qǐng)求正確返回時(shí)間的5分鐘內(nèi)再次加載資源,就會(huì)啟用強(qiáng)緩存。這個(gè)參數(shù)的設(shè)置和Expires作用是差不多的,只不過(guò)Expire是http1.0就有的,Cache-Control是http1.1才有的,相對(duì)于配置expires的方式,Cache-Control的優(yōu)先級(jí)更高。現(xiàn)在配置Expires是為了兼容不能支持http1.1的環(huán)境。
Etag和If-None-Match
Etag是上一次加載資源時(shí),服務(wù)器返回的對(duì)該資源的唯一標(biāo)識(shí),只要資源有變化,Etag就會(huì)重新生成。瀏覽器在下一次加載資源向服務(wù)器發(fā)送請(qǐng)求時(shí),會(huì)將上一次返回的Etag值放到request header里的If-None-Match里,服務(wù)器接受到If-None-Match的值后,會(huì)拿來(lái)跟該資源文件的Etag值做比較,如果相同,則表示資源文件沒(méi)有發(fā)生改變,命中協(xié)商緩存。
Last-Modified和If-Since-Modified
Last-Modified是該資源文件最后一次更改時(shí)間,服務(wù)器會(huì)在response header里返回,同時(shí)瀏覽器會(huì)將這個(gè)值保存起來(lái),在下一次發(fā)送請(qǐng)求時(shí),放到request header里的If-Modified-Since里,服務(wù)器在接收到后也會(huì)做比對(duì),如果相同則命中協(xié)商緩存。
用戶行為多瀏覽器緩存的控制ETag和Last-Modified的作用和用法差不多。對(duì)比下他們的不同。
1.首先在精度上,ETag要優(yōu)于Last-Modified。Last-Modifed的時(shí)間單位是秒,如果某個(gè)文件在1秒內(nèi)修改了很多次,那么他們的Last-Modified其實(shí)沒(méi)有體現(xiàn)出來(lái)修改,但是ETag每次都會(huì)改變確保了精度,如果是負(fù)載均衡的服務(wù)器,各個(gè)服務(wù)器生成的Last-Modified也可能不一致。
2.其次在性能上,ETag要遜于Last-Mdified,畢竟Last-Modified只需要記錄時(shí)間,而Etag需要通過(guò)算法計(jì)算出來(lái)一個(gè)hash值。
3.最后在優(yōu)先級(jí)上,服務(wù)器經(jīng)驗(yàn)優(yōu)先考慮ETag。
地址欄訪問(wèn),鏈接跳轉(zhuǎn)是正常用戶行為,將會(huì)觸發(fā)瀏覽器緩存機(jī)制;
F5刷新,瀏覽器會(huì)設(shè)置max-age = 0,跳過(guò)強(qiáng)緩判斷,會(huì)進(jìn)行協(xié)商緩存判斷;
ctrl+F5,跳過(guò)強(qiáng)緩存和協(xié)商緩存判斷,直接從服務(wù)器拉取資源。
幾個(gè)常見的response header字段的解釋age
出現(xiàn)此字段,表示命中代理服務(wù)器的緩存,它的值指的是代理服務(wù)器對(duì)于請(qǐng)求資源的已緩存時(shí)間,單位為妙。
date
指的是相應(yīng)生成的時(shí)間,請(qǐng)求經(jīng)過(guò)代理服務(wù)器時(shí),返回的Date未必是最新的,所以通常這個(gè)時(shí)候,代理服務(wù)器增加一個(gè)Age字段告知該資源已緩存了多久。
Vary
對(duì)于服務(wù)器而言,資源文件可能有壓縮和未壓縮版本,針對(duì)不同的客戶端,返回不同的資源版本。有些老式瀏覽器不支持解壓縮,這時(shí)候需要返回未壓縮版本;對(duì)于新瀏覽器,支持壓縮的,返回壓縮版本,節(jié)省帶寬,提升體驗(yàn)。這時(shí)候用Vary來(lái)區(qū)分這個(gè)資源版本。服務(wù)器通過(guò)指定Vary:Accept-Encoding,告知代理服務(wù)器,需要緩存兩個(gè)版本:壓縮和未壓縮。
有時(shí)候,很多工作場(chǎng)景需要避免瀏覽器緩存,除了瀏覽器瀏覽器隱身模式,請(qǐng)求時(shí)要禁用緩存:
設(shè)置請(qǐng)求頭:Cache-control:no-cache,no-store,must-revalidate;
給資源加一個(gè)版本號(hào),這樣你就可以自由控制什么時(shí)候加載最新的資源:
HTML禁用緩存,在頁(yè)面上寫:
但是最后一種方法只有部分瀏覽器支持,由于代理服務(wù)器不解析HTML文檔,所以也不支持這種方式。
IE8異常表現(xiàn)上述緩存有關(guān)的規(guī)律,并非所有瀏覽器都遵循,比如說(shuō)IE8。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/40569.html
摘要:淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無(wú)非是減少用戶流量消耗,提升用戶首屏體驗(yàn),提升用戶訪問(wèn)速度,讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí),主要是通過(guò)進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌,需求趨于平穩(wěn),這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過(guò)一段時(shí)間的學(xué)習(xí),結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況,發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
摘要:淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無(wú)非是減少用戶流量消耗,提升用戶首屏體驗(yàn),提升用戶訪問(wèn)速度,讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí),主要是通過(guò)進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌,需求趨于平穩(wěn),這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過(guò)一段時(shí)間的學(xué)習(xí),結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況,發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
摘要:概念瀏覽器緩存是前端開發(fā)中經(jīng)常遇到的問(wèn)題,它是提升性能同時(shí)減少服務(wù)器壓力的有效手段之一。服務(wù)器通過(guò)指定,告知代理服務(wù)器,需要緩存兩個(gè)版本壓縮和未壓縮。異常表現(xiàn)上述緩存有關(guān)的規(guī)律,并非所有瀏覽器都遵循,比如說(shuō)。 概念 瀏覽器緩存是前端開發(fā)中經(jīng)常遇到的問(wèn)題,它是提升性能同時(shí)減少服務(wù)器壓力的有效手段之一。 類型 1.強(qiáng)緩存 如果啟用了強(qiáng)緩存,請(qǐng)求資源時(shí)不會(huì)向服務(wù)器發(fā)送請(qǐng)求,直接從緩存中讀取資...
摘要:協(xié)商緩存用戶發(fā)送的請(qǐng)求,發(fā)送到服務(wù)器后,由服務(wù)器判定是否從緩存中獲取資源。如果想主動(dòng)清除緩存,也可以在請(qǐng)求頭信息中加入來(lái)禁止緩存。主要取值如下緩存的時(shí)效由決定。是的字段,而是的字段,當(dāng)與同時(shí)存在時(shí),的優(yōu)先級(jí)要高于。 在講這幾個(gè)屬性之前,先復(fù)習(xí)下瀏覽器的緩存機(jī)制,再結(jié)合了解一下Last-Modified / If-Modified-Since、Etag / If-Match、cache-...
閱讀 1246·2023-04-26 03:02
閱讀 1302·2023-04-25 19:18
閱讀 2658·2021-11-23 09:51
閱讀 2641·2021-11-11 16:55
閱讀 2700·2021-10-21 09:39
閱讀 1786·2021-10-09 09:59
閱讀 2081·2021-09-26 09:55
閱讀 3608·2021-09-26 09:55