瀏覽器緩存相關(guān)http頭盡量減少http的請(qǐng)求次數(shù)
發(fā)布時(shí)間:2014-04-30 16:03:49 作者:佚名
我要評(píng)論

最近學(xué)習(xí)下優(yōu)化網(wǎng)站性能的方法,其中有一個(gè)是為文件頭指定Expires或Cache-Control,具體來(lái)說(shuō)指對(duì)于靜態(tài)內(nèi)容設(shè)置文件頭過(guò)期時(shí)間Expires的值為Never expire永不過(guò)期
最近看雅虎黃金34條,學(xué)習(xí)下優(yōu)化網(wǎng)站性能的方法。其中有一條:“為文件頭指定Expires或Cache-Control”,具體來(lái)說(shuō)指對(duì)于靜態(tài)內(nèi)容:設(shè)置文件頭過(guò)期時(shí)間Expires的值為“Never expire”永不過(guò)期;而對(duì)于動(dòng)態(tài)內(nèi)容:使用恰當(dāng)?shù)腃ache-Control文件頭來(lái)幫助瀏覽器進(jìn)行有條件的請(qǐng)求。
這一條可以和雅虎34條的第一條聯(lián)系起來(lái),那就是盡量減少http的請(qǐng)求次數(shù)(雅虎34條很多都是努力去減少http請(qǐng)求為目的的),畢竟如果有太多的資源需要下載需要新的http鏈接疊加起來(lái)的耗時(shí)是不容忽視的。所以可以利用緩存技術(shù)來(lái)對(duì)網(wǎng)站的性能加以?xún)?yōu)化,從而避免不必要的http請(qǐng)求。剛好可以順便整理下瀏覽器相關(guān)的緩存技術(shù)和與緩存相關(guān)的http的頭:
1.Expires(過(guò)期時(shí)間):
HTTP頭信息Expires(過(guò)期時(shí)間) 屬性是HTTP控制緩存的基本手段,告訴瀏覽器緩存保存的時(shí)間。過(guò)了這個(gè)時(shí)間,緩存器就會(huì)向源服務(wù)器發(fā)送請(qǐng)求,檢查文檔是否被修改。適用于設(shè)置靜態(tài)圖片文件等等,而且對(duì)于控制有規(guī)律改變的網(wǎng)頁(yè)也很有用,比如設(shè)置間隔固定的時(shí)間去更新等等;如果使用了Expires文件頭,當(dāng)頁(yè)面內(nèi)容改變時(shí)就必須改變內(nèi)容的文件名。比如Yahoo經(jīng)常使用這樣的步驟:在內(nèi)容的文件名中加上版本號(hào),如yahoo_2.0.6.js,從而能夠主動(dòng)進(jìn)行更新。
使用expires: 如果你使用的是Apache服務(wù)器,可以使用ExpiresDefault來(lái)設(shè)定相對(duì)當(dāng)前日期的過(guò)期時(shí)間,使用mod_expires,在httpd.conf或者.htaccess中加上
<FilesMatch "\\.(ico|gif|jpg|html)$">ExpiresDefault "access plus 10 years"</FileMatch>
2.Cache-Control
各個(gè)消息中的指令含義如下:
1.Public指示響應(yīng)可被任何緩存區(qū)緩存;
2.Private指示對(duì)于單個(gè)用戶(hù)的整個(gè)或部分響應(yīng)消息,不能被共享緩存處理。這允許服務(wù)器僅僅描述當(dāng)用戶(hù)的部分響應(yīng)消息,此響應(yīng)消息對(duì)于其他用戶(hù)的請(qǐng)求無(wú)效。
3.no-cache指示請(qǐng)求或響應(yīng)消息不能緩存;
4.no-store用于防止重要的信息被無(wú)意的發(fā)布。在請(qǐng)求消息中發(fā)送將使得請(qǐng)求和響應(yīng)消息都不使用緩存;
5.max-age指示客戶(hù)機(jī)可以接收生存期不大于指定時(shí)間(以秒為單位)的響應(yīng)。
6.min-fresh指示客戶(hù)機(jī)可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)。
7.max-stale指示客戶(hù)機(jī)可以接收超出超時(shí)期間的響應(yīng)消息。如果指定max-stale消息的值,那么客戶(hù)機(jī)可以接收超出超時(shí)期指定值之內(nèi)的響應(yīng)消息;
舉例:
一般說(shuō)來(lái)這種靜態(tài)文件永遠(yuǎn)不應(yīng)該過(guò)期,如果真的要給這個(gè)Cache加上一個(gè)期限,那我希望是 ——一萬(wàn)年
即:“Cache-Control: max-age = 315360000000”
3.Last-Modified/If-Modified-Since
一問(wèn)一答的模式,這邊問(wèn)你更新了沒(méi)有,那邊回答,很容易理解;
4.配置ETag
Entity tags(ETags)(實(shí)體標(biāo)簽)是web服務(wù)器和瀏覽器用于判斷瀏覽器緩存中的內(nèi)容和服務(wù)器中的原始內(nèi)容是否匹配的一種機(jī)制(“實(shí)體”就是所說(shuō)的“內(nèi) 容”,包括圖片、腳本、樣式表等)。增加ETag為實(shí)體的驗(yàn)證提供了一個(gè)比使用“last-modified date(上次編輯時(shí)間)”更加靈活的機(jī)制。Etag是一個(gè)識(shí)別內(nèi)容版本號(hào)的唯一字符串。唯一的格式限制就是它必須包含在雙引號(hào)內(nèi)。原始服務(wù)器通過(guò)含有 ETag文件頭的響應(yīng)指定頁(yè)面內(nèi)容的ETag。例如:
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: “10c24bc-4ab-457e1c1f”
Content-Length: 12195
稍后,如果瀏覽器要驗(yàn)證一個(gè)文件,它會(huì)使用If-None-Match文件頭來(lái)把ETag傳回給原始服務(wù)器。在這個(gè)例子中,如果ETag匹配,就會(huì)返回一 個(gè)304狀態(tài)碼,這就節(jié)省了12195字節(jié)的響應(yīng)。
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: “10c24bc-4ab-457e1c1f”
HTTP/1.1 304 Not Modified
關(guān)于以上幾種緩存機(jī)制的優(yōu)先級(jí),在網(wǎng)上找到一種說(shuō)法:
no-cache>Expires>Last-Modified
也就是講,最前面的最重要,前面的生效后,后面的基本就失效了
這一條可以和雅虎34條的第一條聯(lián)系起來(lái),那就是盡量減少http的請(qǐng)求次數(shù)(雅虎34條很多都是努力去減少http請(qǐng)求為目的的),畢竟如果有太多的資源需要下載需要新的http鏈接疊加起來(lái)的耗時(shí)是不容忽視的。所以可以利用緩存技術(shù)來(lái)對(duì)網(wǎng)站的性能加以?xún)?yōu)化,從而避免不必要的http請(qǐng)求。剛好可以順便整理下瀏覽器相關(guān)的緩存技術(shù)和與緩存相關(guān)的http的頭:
1.Expires(過(guò)期時(shí)間):
HTTP頭信息Expires(過(guò)期時(shí)間) 屬性是HTTP控制緩存的基本手段,告訴瀏覽器緩存保存的時(shí)間。過(guò)了這個(gè)時(shí)間,緩存器就會(huì)向源服務(wù)器發(fā)送請(qǐng)求,檢查文檔是否被修改。適用于設(shè)置靜態(tài)圖片文件等等,而且對(duì)于控制有規(guī)律改變的網(wǎng)頁(yè)也很有用,比如設(shè)置間隔固定的時(shí)間去更新等等;如果使用了Expires文件頭,當(dāng)頁(yè)面內(nèi)容改變時(shí)就必須改變內(nèi)容的文件名。比如Yahoo經(jīng)常使用這樣的步驟:在內(nèi)容的文件名中加上版本號(hào),如yahoo_2.0.6.js,從而能夠主動(dòng)進(jìn)行更新。
使用expires: 如果你使用的是Apache服務(wù)器,可以使用ExpiresDefault來(lái)設(shè)定相對(duì)當(dāng)前日期的過(guò)期時(shí)間,使用mod_expires,在httpd.conf或者.htaccess中加上
復(fù)制代碼
代碼如下:<FilesMatch "\\.(ico|gif|jpg|html)$">ExpiresDefault "access plus 10 years"</FileMatch>
2.Cache-Control
各個(gè)消息中的指令含義如下:
1.Public指示響應(yīng)可被任何緩存區(qū)緩存;
2.Private指示對(duì)于單個(gè)用戶(hù)的整個(gè)或部分響應(yīng)消息,不能被共享緩存處理。這允許服務(wù)器僅僅描述當(dāng)用戶(hù)的部分響應(yīng)消息,此響應(yīng)消息對(duì)于其他用戶(hù)的請(qǐng)求無(wú)效。
3.no-cache指示請(qǐng)求或響應(yīng)消息不能緩存;
4.no-store用于防止重要的信息被無(wú)意的發(fā)布。在請(qǐng)求消息中發(fā)送將使得請(qǐng)求和響應(yīng)消息都不使用緩存;
5.max-age指示客戶(hù)機(jī)可以接收生存期不大于指定時(shí)間(以秒為單位)的響應(yīng)。
6.min-fresh指示客戶(hù)機(jī)可以接收響應(yīng)時(shí)間小于當(dāng)前時(shí)間加上指定時(shí)間的響應(yīng)。
7.max-stale指示客戶(hù)機(jī)可以接收超出超時(shí)期間的響應(yīng)消息。如果指定max-stale消息的值,那么客戶(hù)機(jī)可以接收超出超時(shí)期指定值之內(nèi)的響應(yīng)消息;
舉例:
一般說(shuō)來(lái)這種靜態(tài)文件永遠(yuǎn)不應(yīng)該過(guò)期,如果真的要給這個(gè)Cache加上一個(gè)期限,那我希望是 ——一萬(wàn)年
即:“Cache-Control: max-age = 315360000000”
3.Last-Modified/If-Modified-Since
一問(wèn)一答的模式,這邊問(wèn)你更新了沒(méi)有,那邊回答,很容易理解;
4.配置ETag
Entity tags(ETags)(實(shí)體標(biāo)簽)是web服務(wù)器和瀏覽器用于判斷瀏覽器緩存中的內(nèi)容和服務(wù)器中的原始內(nèi)容是否匹配的一種機(jī)制(“實(shí)體”就是所說(shuō)的“內(nèi) 容”,包括圖片、腳本、樣式表等)。增加ETag為實(shí)體的驗(yàn)證提供了一個(gè)比使用“last-modified date(上次編輯時(shí)間)”更加靈活的機(jī)制。Etag是一個(gè)識(shí)別內(nèi)容版本號(hào)的唯一字符串。唯一的格式限制就是它必須包含在雙引號(hào)內(nèi)。原始服務(wù)器通過(guò)含有 ETag文件頭的響應(yīng)指定頁(yè)面內(nèi)容的ETag。例如:
HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: “10c24bc-4ab-457e1c1f”
Content-Length: 12195
稍后,如果瀏覽器要驗(yàn)證一個(gè)文件,它會(huì)使用If-None-Match文件頭來(lái)把ETag傳回給原始服務(wù)器。在這個(gè)例子中,如果ETag匹配,就會(huì)返回一 個(gè)304狀態(tài)碼,這就節(jié)省了12195字節(jié)的響應(yīng)。
GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: “10c24bc-4ab-457e1c1f”
HTTP/1.1 304 Not Modified
關(guān)于以上幾種緩存機(jī)制的優(yōu)先級(jí),在網(wǎng)上找到一種說(shuō)法:
no-cache>Expires>Last-Modified
也就是講,最前面的最重要,前面的生效后,后面的基本就失效了
相關(guān)文章
15 個(gè)為編程初學(xué)者準(zhǔn)備的網(wǎng)站(都是國(guó)外的一些網(wǎng)站)
今天的文章,我們將分享15個(gè)可以學(xué)習(xí)編程的網(wǎng)站,這些網(wǎng)站上提供了很多編程教程,圖書(shū)以及編程練習(xí),希望對(duì)你有用2024-11-02web開(kāi)發(fā)中的長(zhǎng)度單位小結(jié)
這篇文章主要介紹了web開(kāi)發(fā)中的長(zhǎng)度單位主要包括px,pt,em等,需要的朋友可以參考下2023-08-06網(wǎng)頁(yè)前端開(kāi)發(fā)的一些尺寸單位(px,rem單位)
px單位是絕對(duì)單位,一般用于pc端網(wǎng)頁(yè)開(kāi)發(fā),因?yàn)槭墙^對(duì)單位所以在移動(dòng)端上的使用體驗(yàn)并不是很好,rem它是描述相對(duì)于當(dāng)前根元素字體尺寸,是相對(duì)單位,它可以根據(jù)根元素的變換而2023-08-06WEB前端優(yōu)化必備js/css壓縮工具YUI-compressor詳解與集成用法
壓縮工具層次不窮,各有優(yōu)點(diǎn),選擇適合的壓縮工具為將來(lái)做項(xiàng)目開(kāi)發(fā)使用是一件很重要的事情??!在這介紹YUI-compressor,需要的朋友可以參考下2023-06-21html,css,javascript是怎樣變成頁(yè)面的
瀏覽器是多進(jìn)程的,有瀏覽器主進(jìn)程,網(wǎng)絡(luò)進(jìn)程,渲染進(jìn)程,插件進(jìn)程等,在將html,css,javascript解析成一個(gè)頁(yè)面的時(shí)候,就需要多個(gè)進(jìn)程的分工合作2023-05-01- 本文為大家整理了常用的文件對(duì)應(yīng)的MIME類(lèi)型,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-25
postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別介紹
這篇文章介紹了postman中form-data、x-www-form-urlencoded、raw、binary的區(qū)別,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-12-28網(wǎng)頁(yè)中使用Unicode字符的介紹(&#,\u等)
國(guó)際組織制定了可以容納世界上所有文字和符號(hào)的字符編碼方案,稱(chēng)為Unicode,是通用字符集Universal Character Set的縮寫(xiě),用以滿(mǎn)足跨語(yǔ)言、跨平臺(tái)進(jìn)行文本轉(zhuǎn)換、處理的要求2021-11-27前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié))
這篇文章主要介紹了前端實(shí)現(xiàn)字符串GBK與GB2312的編解碼(小結(jié)),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-12-02告別硬編碼讓你的前端表格自動(dòng)計(jì)算的實(shí)例代碼
這篇文章主要介紹了告別硬編碼讓你的前端表格自動(dòng)計(jì)算,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-27