摘要:當(dāng)我們第一次或者打開百度,我們會(huì)發(fā)現(xiàn)加載的請(qǐng)求響應(yīng)字段如下由于是第一次或者強(qiáng)制刷新打開的,所以瀏覽器會(huì)忽略緩存,直接向服務(wù)器發(fā)送請(qǐng)求加載資源,圖中畫框的那幾個(gè)字段是與緩存相關(guān)的。
合理利用緩存
概述:本章主要討論了兩方面的內(nèi)容。1. 瀏覽器緩存機(jī)制。 2. web實(shí)踐中如何有效利用這些緩存
瀏覽器緩存機(jī)制
作為web開發(fā)人員經(jīng)常遇到的問題之一就是我明明修復(fù)并且部署了這個(gè)BUG為什么線上有的用戶還會(huì)出現(xiàn)這個(gè)問題呢?還有每次更新完我們都會(huì)說你清除緩存試試?為什么一定要清除緩存呢,可以肯定說絕大部分用戶是不知道要清除緩存的!那我們能否不清除緩存,最新部署的文件能夠馬上就生效呢。答案是肯定的,這就需要我們花費(fèi)一點(diǎn)時(shí)間了解一下緩存是怎么工作的。 我們可以簡(jiǎn)單的理解為緩存是為了減少網(wǎng)絡(luò)帶寬和優(yōu)化用戶體驗(yàn)而存在的。核心就是把緩存的內(nèi)容保存在了本地,而不用每次都向服務(wù)端發(fā)送相同的請(qǐng)求,設(shè)想下每次都打開相同的頁面,而在第一次打開的同時(shí),將下載的js、css、圖片等“保存”在了本地,而之后的請(qǐng)求每次都在本地讀取,效率是不是高了很多。當(dāng)我用瀏覽器打開一個(gè)網(wǎng)頁可以發(fā)現(xiàn)瀏覽器加載頁面資源的http請(qǐng)求返回的Status Code有以下常見的值304 Not Modified/200 OK (from disk cache)/ 200 OK。這些值代表著什么意思呢?其實(shí)瀏覽器就是依靠請(qǐng)求和響應(yīng)中的的頭信息來控制緩存的。下面我們來具體分析一下。 當(dāng)我們第一次(或者ctrl+F5)打開百度,我們會(huì)發(fā)現(xiàn)加載jquery.js的http請(qǐng)求響應(yīng)字段如下
由于是第一次或者強(qiáng)制刷新打開的,所以瀏覽器會(huì)忽略緩存,直接向服務(wù)器發(fā)送請(qǐng)求加載資源,圖中畫框的那幾個(gè)字段是與緩存相關(guān)的。它們的意義如下:
1. cache-control:max-age=315360000:它告訴瀏覽器這個(gè)資源的緩存時(shí)間為315360000秒(10年),那么瀏覽器就將這個(gè)文件保存到本地磁盤緩存起來,下次你再次打開百度時(shí),只要是再10年內(nèi)瀏覽器就不向服務(wù)器發(fā)送請(qǐng)求加載資源了,而是直接從緩存中加載。 2. expires:Fri, 06 Nov 2026 04:20:09 GMT:它告訴瀏覽器這個(gè)資源的有效期:現(xiàn)在-->2026年11月6號(hào)04:20:09,在這個(gè)時(shí)間內(nèi)你打開百度瀏覽器就不向服務(wù)器發(fā)送請(qǐng)求加載資源了,而是直接從緩存中加載。
這個(gè)是不是與cache-control功能有點(diǎn)重合呢,是的!Expires是HTTP1.0的東西,而Cache-Control是HTTP1.1的,規(guī)定如果max-age和Expires同時(shí)存在,前者優(yōu)先級(jí)高于后者。Cache-Control的參數(shù)可以設(shè)置很多值,譬如(參考瀏覽器緩存機(jī)制)。
3. Last-Modified: Mon, 07 Nov 2016 07:51:11 GMT:標(biāo)示這個(gè)響應(yīng)資源的最后修改時(shí)間。 4. ETag: 告訴瀏覽器當(dāng)前資源在服務(wù)器的唯一標(biāo)識(shí)(生成規(guī)則由服務(wù)器覺得) 當(dāng)我按下F5重新加載頁面時(shí)會(huì)得到下面的http請(qǐng)求響應(yīng)信息
我們會(huì)發(fā)現(xiàn)瀏覽器是發(fā)送了一個(gè)http請(qǐng)求而不是我們之前說的在10年之內(nèi)不發(fā)送請(qǐng)求,并且這個(gè)請(qǐng)求的響應(yīng)是304,就是說當(dāng)我按下F5時(shí),瀏覽器忽略了上次請(qǐng)求返回的cache-control和expires字段的值,它是再次發(fā)送了一個(gè)獲取資源的請(qǐng)求,但是這次http請(qǐng)求頭部包含了兩個(gè)新字段If-Modified-Since和If-None-Match(這兩個(gè)字段的值就是上次請(qǐng)求資源響應(yīng)中包含的Last-Modified和ETag的值),這就是問題所在,服務(wù)器檢測(cè)到這兩個(gè)字段做對(duì)應(yīng)的響應(yīng)如下: If-Modified-Since:服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有頭If-Modified-Since則與被請(qǐng)求資源的最后修改時(shí)間進(jìn)行比對(duì)。若最后修改時(shí)間較新,說明資源又被改動(dòng)過,則響應(yīng)整片資源內(nèi)容(寫在響應(yīng)消息包體內(nèi)),HTTP 200;若最后修改時(shí)間較舊,說明資源無新修改,則響應(yīng)HTTP 304 (無需包體,節(jié)省加載時(shí)間與帶寬),告知瀏覽器繼續(xù)使用所保存的cache。 If-None-Match: 服務(wù)器收到請(qǐng)求后發(fā)現(xiàn)有If-None-Match則與被請(qǐng)求資源的相應(yīng)校驗(yàn)串進(jìn)行比對(duì),決定返回200或304。
我們會(huì)發(fā)現(xiàn)這兩個(gè)字段功能也有點(diǎn)重合,原因如下:
1) 次Last-Modified標(biāo)注的最后修改只能精確到秒級(jí),如果某些文件在1秒鐘以內(nèi),被修改多次的話,它將不能準(zhǔn)確標(biāo)注文件的修改時(shí)間。
2) 如果某些文件會(huì)被定期生成,當(dāng)有時(shí)內(nèi)容并沒有任何變化,但Last-Modified卻改變了,導(dǎo)致文件沒法使用緩存。
3) 有可能存在服務(wù)器沒有準(zhǔn)確獲取文件修改時(shí)間,或者與代理服務(wù)器時(shí)間不一致等情形。
Etag是服務(wù)器自動(dòng)生成或者由開發(fā)者生成的對(duì)應(yīng)資源在服務(wù)器端的唯一標(biāo)識(shí)符,能夠更加準(zhǔn)確的控制緩存。Last-Modified與ETag是可以一起使用的,服務(wù)器會(huì)優(yōu)先驗(yàn)證ETag,一致的情況下,才會(huì)繼續(xù)比對(duì)Last-Modified,最后才決定是否返回304。
那現(xiàn)在就還剩下一個(gè)問題,就是當(dāng)我按下F5時(shí),瀏覽器為什么不是直接從本地緩存中加載文件而是發(fā)送了一個(gè)http請(qǐng)求呢?這個(gè)是就用戶行為與瀏覽器對(duì)緩存的控制有關(guān)
緩存總結(jié)如下
瀏覽器第一次請(qǐng)求:
瀏覽器再次請(qǐng)求時(shí):
有效利用緩存
下面我們就來說說WEB資源文件的緩存時(shí)間設(shè)置為多少是全適的呢。
現(xiàn)在大部分網(wǎng)站都是每次更新部署時(shí),只要有修改的文件都會(huì)重新生成一個(gè)名字(如:gulp打包[http://www.xxx.tv/dist/hr20170117/js/main-f3d7137ecb.js],HTML文件除外),相當(dāng)于有更改的文件都有新的URL.針對(duì)這種情況,我們可以進(jìn)行如下設(shè)置
HTML文件可以設(shè)置為max-age為0,那么用戶每次打開網(wǎng)頁都會(huì)向服務(wù)器詢問這個(gè)網(wǎng)頁有沒有更改,如果有更改用戶就能夠加載最新的文件。
CSS/JS文件可以設(shè)置為30天或者1年。
下面為對(duì)應(yīng)的nginx配置
location ~ .*.(js|css)?${
expires 1M;
}
~* .(?:manifest|appcache|html?|xml|json)$ {
expires -1;
}
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/39438.html
摘要:當(dāng)我們第一次或者打開百度,我們會(huì)發(fā)現(xiàn)加載的請(qǐng)求響應(yīng)字段如下由于是第一次或者強(qiáng)制刷新打開的,所以瀏覽器會(huì)忽略緩存,直接向服務(wù)器發(fā)送請(qǐng)求加載資源,圖中畫框的那幾個(gè)字段是與緩存相關(guān)的。 合理利用緩存概述:本章主要討論了兩方面的內(nèi)容。1. 瀏覽器緩存機(jī)制。 2. web實(shí)踐中如何有效利用這些緩存瀏覽器緩存機(jī)制 作為web開發(fā)人員經(jīng)常遇到的問題之一就是我明明修復(fù)并且部署了這個(gè)BUG為什么線上有的...
摘要:性能優(yōu)化頁面渲染減少頁面修改元素多個(gè)樣式可以通過修改完成這樣可以把多次減少為一次修改元素多個(gè)樣式可以分為三步先隱藏再修改最后顯示。 代碼優(yōu)化 這個(gè)部分僅僅將代碼優(yōu)化本身,不考慮性能,關(guān)于代碼部分的性能優(yōu)化在 頁面渲染 部分 代碼優(yōu)化 中 HTML+CSS 符合 XHTML 規(guī)范: 小寫,正確嵌套,必須關(guān)閉; 雙引號(hào),合理縮進(jìn),utf-8編碼; 標(biāo)簽語義化,便于維護(hù); 合理注釋,比如 ...
摘要:性能優(yōu)化頁面渲染減少頁面修改元素多個(gè)樣式可以通過修改完成這樣可以把多次減少為一次修改元素多個(gè)樣式可以分為三步先隱藏再修改最后顯示。 代碼優(yōu)化 這個(gè)部分僅僅將代碼優(yōu)化本身,不考慮性能,關(guān)于代碼部分的性能優(yōu)化在 頁面渲染 部分 代碼優(yōu)化 中 HTML+CSS 符合 XHTML 規(guī)范: 小寫,正確嵌套,必須關(guān)閉; 雙引號(hào),合理縮進(jìn),utf-8編碼; 標(biāo)簽語義化,便于維護(hù); 合理注釋,比如 ...
摘要:性能優(yōu)化頁面渲染減少頁面修改元素多個(gè)樣式可以通過修改完成這樣可以把多次減少為一次修改元素多個(gè)樣式可以分為三步先隱藏再修改最后顯示。 代碼優(yōu)化 這個(gè)部分僅僅將代碼優(yōu)化本身,不考慮性能,關(guān)于代碼部分的性能優(yōu)化在 頁面渲染 部分 代碼優(yōu)化 中 HTML+CSS 符合 XHTML 規(guī)范: 小寫,正確嵌套,必須關(guān)閉; 雙引號(hào),合理縮進(jìn),utf-8編碼; 標(biāo)簽語義化,便于維護(hù); 合理注釋,比如 ...
閱讀 2706·2023-04-25 17:58
閱讀 2988·2021-11-15 11:38
閱讀 2386·2021-11-02 14:48
閱讀 1198·2021-08-25 09:40
閱讀 1829·2019-08-30 15:53
閱讀 1103·2019-08-30 15:52
閱讀 1039·2019-08-30 13:55
閱讀 2444·2019-08-29 15:21