国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
前端緩存機(jī)制的總結(jié)

在前端項(xiàng)目體驗(yàn)中最直觀的就是網(wǎng)頁的瀏覽速度,所以項(xiàng)目開發(fā)中在速度方面的優(yōu)化最主要的就是緩存了,前端的緩存知識比較雜,我在學(xué)習(xí)中慢慢總結(jié)了這么多,今天來分享下。

什么是緩存?

緩存就相當(dāng)于是對資源的一種副本實(shí)現(xiàn),不管是在客戶端還是在服務(wù)端存儲著,用相同的URL進(jìn)行請求,直接從副本中請求資源而不再訪問源服務(wù)器。

為什么要使用緩存?

  • 提高訪問速度:緩存相對服務(wù)端離用戶更近,所以在請求過程中從緩存中取內(nèi)容比在源服務(wù)器上取的內(nèi)容用的時(shí)間更少,加快了用戶體驗(yàn)。
  • 降低網(wǎng)絡(luò)傳輸:副本被重復(fù)使用,大大降低了用戶的帶寬使用,其實(shí)也是一種變相的省錢(如果流量要付費(fèi)的話),同時(shí)保證了帶寬請求在一個(gè)低水平上,更容易維護(hù)了。

緩存的種類

緩存種類很多,像是瀏覽器緩存,cdn緩存等都是我們比較熟悉的,當(dāng)然還有代理服務(wù)器緩存,網(wǎng)關(guān)緩存等,這里我主要介紹一下前兩種。

瀏覽器緩存

一個(gè)頁面的緩存狀態(tài)可以通過這兩種方法去設(shè)置,meta標(biāo)簽和http header。

meta標(biāo)簽常見以下幾種用法

<meta http-equiv="pragma" content="no-cache">
  • 1

pragma與no-cache用于定義頁面緩存

<meta http-equiv="cache-control" content="no-cache">
  • 1

常見的取值有private、no-cache、max-age、must-revalidate等,默認(rèn)為private

<meta http-equiv="Expires" content="0">
  • 1

指定Expires值為一個(gè)早已過去的時(shí)間,那么訪問此網(wǎng)時(shí)若重復(fù)在地址欄按回車,那么每次都會重復(fù)訪問

設(shè)置header

一般是設(shè)置這幾個(gè)header:

  • cache-control
  • expires
  • last-modified
  • etags

處理流程一般如下:

cache-control:

  • public:表明其他用戶也可以利用緩存。
  • private:表明緩存服務(wù)器只對特定用戶提供資源緩存的服務(wù),對于其他的用戶,緩存服務(wù)器不會做出響應(yīng)。
  • no-cache:表明不緩存過期資源,其實(shí)是為了防止拿到過期的資源。
  • no-store:暗示請求或響應(yīng)中包含機(jī)密信息,是真正的禁用緩存。
  • max-age:max-age = 秒,HTTP 1.1版本,資源在本地緩存多少秒。

expires:
Expires = 時(shí)間,HTTP 1.0 版本,緩存的載止時(shí)間,允許客戶端在這個(gè)時(shí)間之前不去檢查(發(fā)請求),Expires 的一個(gè)缺點(diǎn)就是,返回的到期時(shí)間是服務(wù)器端的時(shí)間,這樣存在一個(gè)問題,如果客戶端的時(shí)間與服務(wù)器的時(shí)間相差很大,那么誤差就很大,所以在HTTP 1.1版開始,使用Cache-Control: max-age=秒替代。

如果max-age和Expires同時(shí)存在,Cache-Control的max-age優(yōu)先。

last-modified:
表明資源最后更新的時(shí)間,響應(yīng)格式一般為:

last-modified:Mon, 21 Nov 2016 03:25:47 GMT
  • 1

當(dāng)?shù)谝淮握埱筚Y源時(shí),源服務(wù)器響應(yīng)后返回last-modified值和響應(yīng)內(nèi)容,客戶端會將響應(yīng)內(nèi)容和last-modified一起緩存在本地,第二次請求時(shí)會將請求體連同if-modified-since(等于last-modified的值)一起發(fā)送給服務(wù)端,服務(wù)端會根據(jù)if-modified-since判定資源是否改變,如果沒有改變會響應(yīng)304返回一個(gè)空的響應(yīng)體,如果資源改變返回新的內(nèi)容。

etags:
根據(jù)實(shí)體內(nèi)容生成一段hash字符串,標(biāo)識資源的狀態(tài),由服務(wù)端產(chǎn)生,資源改變這個(gè)值就會改變個(gè)人感覺類似于資源的一種抽象映射。請求過程類似于last-modified,不過它作為if-none-match(服務(wù)端響應(yīng)的etags)發(fā)送給服務(wù)端判斷這個(gè)值是否與服務(wù)端的etags一致看資源是否改變。

為什么有了last-modified還要有etags

  • 某些服務(wù)器不能精確得到資源的最后修改時(shí)間,這樣就無法通過最后修改時(shí)間判斷資源是否更新

  • 如果資源修改非常頻繁,在秒以下的時(shí)間內(nèi)進(jìn)行修改,而Last-modified只能精確到秒

  • 一些資源的最后修改時(shí)間改變了,但是內(nèi)容沒改變,使用ETag就認(rèn)為資源還是沒有修改的

last-modified和etags的處理流程如下:

如果if-modified-since和if-none-match同時(shí)存在,if-none-match優(yōu)先。

cdn緩存

cdn(Content Delivery Network),即就是內(nèi)容分發(fā)網(wǎng)絡(luò),就相當(dāng)于是在客戶端和服務(wù)端之間加一個(gè)cdn層,用戶在瀏覽網(wǎng)站的時(shí)候,cdn會選擇一個(gè)離用戶最近的cdn邊緣節(jié)點(diǎn)來響應(yīng)用戶的請求,這不但加快了用戶體驗(yàn)速度也減輕了源服務(wù)器的負(fù)載。

工作原理:用戶通過輸入域名來訪問頁面,首先進(jìn)行dns處理,dns解析服務(wù)器會將用戶訪問請求定位到離用戶最近、負(fù)載最輕的cdn緩存服務(wù)器上,返回該cdn節(jié)點(diǎn)的ip地址,緩存服務(wù)器拿到數(shù)據(jù)后,一方面將數(shù)據(jù)返回瀏覽器,另一方面進(jìn)行本地保存,之后再次訪問,數(shù)據(jù)將從cdn緩存服務(wù)器中被返回。

h5中的離線存儲

HTML5 引入了應(yīng)用程序緩存,這意味著 web 應(yīng)用可進(jìn)行緩存,并可在沒有因特網(wǎng)連接時(shí)進(jìn)行訪問。
應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢:

  • 離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們
  • 速度 - 已緩存資源加載得更快
  • 減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源。

設(shè)置:

<html lang="en" manifest="demo.manifest">...</html>
  • 1
  • 2
  • 3

demo.manifest是一個(gè)文件,后綴名為manifest,包含瀏覽器需要緩存的內(nèi)容。manifest屬性可以指定一個(gè)絕對URL或是一個(gè)相對路徑,但是,一個(gè)絕對URL需要和web app是同源的。一個(gè)manifest文件可以是任何擴(kuò)展文件類型,但必須有正確的mime-type,比如在Apache中添加

AddType text/cache-manifest .appcache
  • 1

離線存儲的原理就是請求的資源會像cookie一樣被存儲了下來,之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí),瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示。

本地存儲

localstorage和sessionstorage,它們的作用及區(qū)別相信大家都很熟悉了,這里我再總結(jié)一下吧。
二者都是針對數(shù)據(jù)進(jìn)行本地存儲的,區(qū)別是:

  • localstorage是永久存儲,而sessionstorage當(dāng)窗口關(guān)閉的時(shí)候失效。
  • localstorage對于同源窗口來說是可以共享的,但是sessionstorage在不同的窗口不共享。

感覺常見的區(qū)別就這兩個(gè)吧,它們的操作也很簡單,web storage擁有像getItem,setItem,clear等方法,不像cookie存儲還得自己去封裝一個(gè),比較方便。

本站僅提供存儲服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
楊建:網(wǎng)站加速
頁面性能優(yōu)化辦法有哪些?| 技術(shù)頭條
網(wǎng)頁緩存相關(guān)的HTTP頭部信息詳解
CDN緩存那些事
理解HTTP/304響應(yīng)(HTTP原理中的緩存機(jī)制)
徹底弄懂瀏覽器緩存策略
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服