瀏覽器緩存問題原理以及解決方案

瀏覽器緩存問題:

簡單來說,瀏覽器緩存就是把一個已經請求過的Web資源(如html頁面,圖片,js,數據等)拷貝一份副本儲存在瀏覽器中。緩存會根據進來的請求保存輸出內容的副本。當下一個請求來到的時候,如果是相同的URL,緩存會根據緩存機制決定是直接使用副本響應訪問請求,還是向源服務器再次發送請求。比較常見的就是瀏覽器會緩存訪問過網站的網頁,當再次訪問這個URL地址的時候,如果網頁沒有更新,就不會再次下載網頁,而是直接使用本地緩存的網頁。只有當網站明確標識資源已經更新,瀏覽器才會再次下載網頁。

為什么使用緩存:

(1)減少網絡帶寬消耗

(2)降低服務器壓力

(3)減少網絡延遲,加快頁面打開速度

瀏覽器端的緩存規則:

新鮮度(過期機制):也就是緩存副本有效期。

校驗值(驗證機制):資源的實體標簽Etag(EntityTag)

?

舉個栗子

?

?

解決方法:

(1)使用HTMLMeta標簽

  Web開發者可以在HTML頁面的<head>節點中加入<meta>標簽,代碼如下

???????????? <metahttp-equiv="Pragma"content="no-cache">

  事實上這種禁用緩存的形式用處很有限:

????????? a.僅有IE才能識別這段meta標簽含義,其它主流瀏覽器僅識別“Cache-Control:no-store”的meta標簽。

????????? b.在IE中識別到該meta標簽含義,并不一定會在請求字段加上Pragma,但的確會讓當前頁面每次都發新請求(僅限頁面,頁面上的資源則不受影響)

(2)使用緩存有關的HTTP消息報頭

????????? 在HTTP請求和響應的消息報頭中,常見的與緩存有關的消息報頭有:

規則

消息包頭

值/示例

類型

作用

新鮮度

Pragma

no-cache

響應

告訴瀏覽器忽略資源的緩存副本,每次訪問都需要去服務器拉取【http1.0中存在的字段,在http1.1已被拋棄,使用Cache-Control替代,但為了做http協議的向下兼容,很多網站依舊會帶上這個字段】

Expires

Mon,15Aug201603:56:47GMT

響應

啟用緩存和定義緩存時間。告訴瀏覽器資源緩存過期時間,如果還沒過該時間點則不發請求【http1.0中存在的字段,該字段所定義的緩存時間是相對服務器上的時間而言的,如果客戶端上的時間跟服務器上的時間不一致(特別是用戶修改了自己電腦的系統時間),那緩存時間可能就沒啥意義了。在HTTP1.1版開始,使用Cache-Control:max-age=秒替代】

Cache-Control

no-cache

響應

告訴瀏覽器忽略資源的緩存副本,強制每次請求直接發送給服務器,拉取資源,但不是“不緩存”

no-store

響應

強制緩存在任何情況下都不要保留任何副本

max-age=[秒]

響應

指明緩存副本的有效時長,從請求時間開始到過期時間之間的秒數

public

響應

任何路徑的緩存者(本地緩存、代理服務器),可以無條件的緩存改資源

private

響應

只針對單個用戶或者實體(不同用戶、窗口)緩存資源

Last-Modified

Mon,15Aug201603:56:47GMT

響應

告訴瀏覽器這個資源最后的修改時間。服務器將資源傳遞給客戶端時,會將資源最后更改的時間以“Last-Modified:GMT”的形式加在實體首部上一起返回給客戶端【只能精確到秒級,如果某些文件在1秒鐘以內,被修改多次的話,它將不能準確標注文件的修改時間】

If-Modified-Since

Mon,15Aug201603:56:47GMT

請求

其值為上次響應頭的Last-Modified值,再次向web服務器請求時帶上頭If-Modified-Since。web服務器收到請求后發現有頭If-Modified-Since則與被請求資源的最后修改時間進行比對。若最后修改時間較新,說明資源又被改動過,則響應整片資源內容(寫在響應消息包體內),包括更新Last-Modified的值,HTTP200;若最后修改時間較舊,說明資源無新修改,則響應HTTP304(無需包體,節省瀏覽),告知瀏覽器繼續使用所保存的cache

校驗值

ETag

"fd56273325a2114818df4f29a628226d"

響應

告訴瀏覽器當前資源在服務器的唯一標識符(生成規則又服務器決定)

If-None-Match

"fd56273325a2114818df4f29a628226d"

請求

當資源過期時(使用Cache-Control標識的max-age),發現資源具有Etage聲明,則再次向web服務器請求時帶上頭If-None-Match(Etag的值)。web服務器收到請求后發現有頭If-None-Match則與被請求資源的相應校驗串進行比對,決定返回200或304

?實際工作中我們完全可以時用上面這些參數的設置來組織/控制、更好的利用緩存來為我們服務。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370092.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370092.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370092.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Scikit-Learn機器學習入門

現在最常用的數據分析的編程語言為R和Python。每種語言都有自己的特點&#xff0c;Python因為Scikit-Learn庫贏得了優勢。Scikit-Learn有完整的文檔&#xff0c;并實現很多機器學習算法&#xff0c;而每種算法使用的接口幾乎相同&#xff0c;可以非常快的測試其它學習算法。 Pa…

hdu1542 Atlantis(掃描線+線段樹+離散)矩形相交面積

題目鏈接&#xff1a;點擊打開鏈接 題目描寫敘述&#xff1a;給定一些矩形&#xff0c;求這些矩形的總面積。假設有重疊。僅僅算一次 解題思路&#xff1a;掃描線線段樹離散&#xff08;代碼從上往下掃描&#xff09; 代碼&#xff1a; #include<cstdio> #include <al…

瀏覽器滾動條 --- 自定義“衣裳”

由于種種原因&#xff0c;瀏覽器的默認滾動條“衣裳”實在是 (ˉ▽&#xffe3;&#xff5e;)~~&#xff0c;為了“美”&#xff0c;本人結合萬維網各大神給的經驗和自己的實踐&#xff0c;做了此篇總結。若有錯誤&#xff0c;請在評論里給出&#xff0c;我會及時更改。 我在電…

電腦調分辨率黑屏了怎么辦_調顯示器分辨率黑屏怎么辦

調顯示器分辨率黑屏怎么辦調顯示器分辨率黑屏解決方法&#xff1a;1&#xff0c;開機&#xff0c;當快要進入系統選項時&#xff0c;立即按f8鍵進入“高級模式”&#xff0c;因為系統選項界面顯示的時間非常短&#xff0c;可以提早按f8鍵&#xff0c;否則錯過時機就得重來。2&a…

什么是JNDI,SPI,CCI,LDAP和JCA?

JNDI代表Java命名和目錄接口 。 它是用于提供對目錄服務&#xff08;即帶有對象的服務映射名稱&#xff08;字符串&#xff09;&#xff0c;對遠程對象或簡單數據的引用&#xff09;的訪問的API。 這就是所謂的 約束力 。 綁定集稱為上下文 。 應用程序使用JNDI接口訪問資源。…

android studio gradle 學習,學習Android Studio里的Gradle

一直聽說Gradle很強大&#xff0c;只是偶爾用Android Studio創建Demo的時候看到他一次&#xff0c;今天抽個時間完整記錄一下。1.gradle位置Android Studio項目創建好之后&#xff0c;默認有3個gradle文件&#xff0c;分別位于&#xff1a;/settings.gradle/build.gradle/app/b…

接口耗時打印并統計

1.可以利用Tomcat的access-log日志&#xff0c;讓其打印出http請求的每次耗時。可以在 config/server.xml里Host標簽下配置tomcat訪問日志格式 <Valve className"org.apache.catalina.valves.AccessLogValve" directory"logs" prefix&quo…

js內存

js在定義變量時完成了內存的分配 js具有自動垃圾回收機制&#xff0c;垃圾回收器會每隔固定的一段時間就執行一次釋放操作&#xff0c;即找出那些不再繼續使用的值&#xff0c;釋放其占用的內存 js中最常用的是通過標記清除的算法來找到哪些對象是不再繼續使用的&#xff0c;因…

halcon 圖像差分_Halcon編程-基于紋理的mara檢測

表面瑕疵檢測是機器視覺領域非常重要的一個應用。機器視覺是集光學、機電和計算機三個領域的一門不算新的技術。但目前表面瑕疵檢測在學界主要是計算機專業或者控制專業瞄準圖像處理方向在做&#xff0c;而視覺光學系統這一塊主要是光學工程專業在做。很少有研究者把這三塊都結…

Apache Camel入門

在先前的博文中&#xff0c;我們了解了企業集成模式&#xff08;EIP&#xff09;。 現在&#xff0c;在這篇文章中&#xff0c;我們將研究實現這些模式的Apache Camel框架。 關于駱駝&#xff1a; Apache Camel是一個開放源代碼項目&#xff0c;已有將近5年的歷史&#xff0c;…

css 寫打印樣式問題

&#xff08;1&#xff09;背景顏色打印不出來問題解決方法 background樣式要加上 !important&#xff1b;color樣式要加上 !important&#xff1b;-webkit-print-color-adjust: exact;然后記得瀏覽器打印設置里面要在“打印背景圖形”前面打勾。 -webkit-print-color-adjust:…

android studio smssdk,SMSSDK for Android 配置

1.集成之前先要申請Mob的appkey與appsecret2.在Mob官網下載最新SDK&#xff0c;解壓后會看到以下目錄結構&#xff1a;SMSSDK下存放的是短信SDK的全部內容。3.在android studio中加入SMS的第三方庫AS版本的SMSSDK目錄下包含以下內容&#xff1a;MobCommons.jar&#xff1a;Mob …

linux后臺不掛斷運行 nohup命令

//后臺常在 退出終端仍然運行 nohup python pyredis.py & nohup輸出重定向到my.log nohup command > my.log 2>&1 &轉載于:https://www.cnblogs.com/plxm/p/8136833.html

Ubuntu 16.04安裝微信

微信沒有出Linux的版本&#xff0c;但是可以通過以下方式解決&#xff1a; 1、使用網頁版&#xff0c;除了沒有公眾號之后&#xff0c;一切都沒問題&#xff0c;包括傳文件等。 網頁登錄地址&#xff1a;https://wx.qq.com/ 2、使用第三方版本&#xff0c;只不過這個是桌面應用…

navision系統和sap區別_SAP那些事-實戰篇-89-淺談金稅接口方案

以前金稅接口這塊一直是銷售顧問在做&#xff0c;雖然和財務相關&#xff0c;也沒有怎么關注。這次項目把金稅接口分到了財務模塊&#xff0c;結果遇到了一些問題&#xff0c;趁此機會把這塊總結一下方案&#xff0c;供各位看官參考。方案1&#xff1a; 文本方案&#xff0c;這…

不變性的來龍去脈

因此&#xff0c;在我的第一篇文章中&#xff0c;我談到了一些構建器模式&#xff0c;并提到了一個非常強大但卻被忽視的概念&#xff1a;不變性。 什么是不可變類&#xff1f; 這只是一個其實例無法修改的類。 類屬性的每個值都在其聲明或其構造函數中設置&#xff0c;并在對…

JavaScript總結(3)

第3章 獲取用戶的輸入 &#xff1c;script&#xff1e;10 intAprompt("請輸入第一個數字","");11 intBprompt("請輸入第二個數字",27);默認是2712 document.write("你輸入的第一個數字是"intA);13 document.write("&#xff1c;…

css書寫規范

在書寫css樣式的時候總是無意中就寫亂了&#xff0c;無論是命名或者是樣式的書寫順序&#xff0c;這里做一個總結&#xff0c;提醒自己在書寫css的時候時刻注意&#xff0c;大家可以參考哈。 1. 樣式屬性順序 單個樣式規則下的屬性在書寫時&#xff0c;應按功能進行分組&…

android 協程,關于android:Kotlin協程實現原理SuspendCoroutineContext

明天咱們來聊聊Kotlin的協程Coroutine。如果你還沒有接觸過協程&#xff0c;舉薦你先瀏覽這篇入門級文章What? 你還不曉得Kotlin Coroutine?如果你曾經接觸過協程&#xff0c;置信你都有過以下幾個疑難&#xff1a;協程到底是個什么貨色&#xff1f;協程的suspend有什么作用&…

清空easyui checkbox選中項

$(#dg).datagrid(unselectAll);轉載于:https://www.cnblogs.com/douhuan/p/7116744.html