1. 程式人生 > >瀏覽器中回車(Enter)和重新整理的區別是什麼?[轉載]

瀏覽器中回車(Enter)和重新整理的區別是什麼?[轉載]

在瀏覽器中回車和F5重新整理有什麼區別那?今天就來說說:瀏覽器中回車(Enter)和重新整理的區別是什麼? 這點事。

 

概論:

1、回車在 Expires有效的時候,是不會去請求伺服器的,開啟除錯看到的請求也只是偽造的,比如 谷歌瀏覽器可能顯示 200(cached)(比正常的200多了) 其實是沒有發起實際的快取,直接讀取本地硬碟快取。

2、如果按了 f5則 Expires設定不再起效果,只有Last-Modified/ETag有效果,如果在快取期間內則返回 304,再讀取本地快取內容

3、ctrl+f5則會發送 Cache-Control: no-cache,真正的從伺服器重新獲取檔案,此時快取完全失效

 

先來說“重新整理”,它是在你現有頁面的基礎上,檢查網頁是否有更新的內容。在檢查時,會保留之前的一些變數的值,因此有可能會造成重新整理後網頁出現錯誤,或者打不開的情況;“轉到”和在位址列回車,則相當於你重新輸入網頁的URL訪問,這種情況下,瀏覽器會盡量使用已經存在於本機中的快取。也就是,“重新整理” 是取網頁的新內容來更新本機快取,在更新的同時保留之前的一些變數;“轉到”則是一種全新的訪問,它會盡量使用本機快取中的檔案,但不會保留之前的變數,這下應該明白了吧?另外,按著Ctrl,還可以進行強制重新整理,跟轉到的作用差不多。

 

不少同學問,不都是重新整理嗎?還有什麼區別?其實,還是有的。

其中,在位址列按回車又分為兩種情況。一是請求的URI在瀏覽器快取中未過期,此時,使用Firefox的firebug外掛在瀏覽器裡顯示的HTTP請求訊息頭如下:

Host 192.168.3.174:8080
User-Agent Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,zh;q=0.5
Accept-Encoding gzip, deflate
Accept-Charset GB2312,utf-8;q=0.7,*;q=0.7
Connection keep-alive

HTTP返回狀態顯示200 OK,但是,後臺Nginx伺服器的access.log並沒有找到該請求的記錄,說明請求並沒有真正提交到HTTP伺服器。而是被瀏覽器發現快取中還有 未過期的檔案,直接把請求攔截了,firebug裡面顯示所謂的“請求頭訊息”、“響應頭訊息”都是瀏覽器“偽造”的。這種重新整理,使用的網路流量是最小 的,可以說完全沒有,時間消耗也是最少的。就像你找到一盒沒有過期的牛奶,覺得肯定沒有問題,誰都沒告訴就喝了。



二是請求的URI在瀏覽器快取中已過期,此時,firebug顯示的HTTP請求訊息頭如下:

Host 192.168.3.174:8080
User-Agent Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,zh;q=0.5
Accept-Encoding gzip, deflate
Accept-Charset GB2312,utf-8;q=0.7,*;q=0.7
Connection keep-alive
If-Modified-Since Mon, 04 Jul 2011 10:12:40 GMT

多了一行If-Modified-Since,後臺Nginx伺服器的access.log也找到了該請求的記錄,說明瀏覽器對這種情況的處理方法是:再 問一下伺服器,請求的URI在某個時間之後有沒有被修改過,而這個時間是由上次HTTP響應的Last-Modified決定的。伺服器鑑定之後,沒有修 改的話,返回304 Not Modified,瀏覽器收到後,從快取裡讀出內容;有修改的話,返回200 OK,並返回新的內容。這種情況,就像你找到一盒已經過期的牛奶,於是問別人,還能不能喝,如果別人說可以,你就把它喝了,如果別人說不行,那你得就另外找一盒新鮮的牛奶。


至於F5重新整理,其HTTP請求訊息頭如下:

Host 192.168.3.174:8080
User-Agent Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,zh;q=0.5
Accept-Encoding gzip, deflate
Accept-Charset GB2312,utf-8;q=0.7,*;q=0.7
Connection keep-alive
If-Modified-Since Mon, 04 Jul 2011 10:12:40 GMT
Cache-Control max-age=0

又多了一行Cache-Control: max-age=0,意思是說,我不管瀏覽器快取中的檔案過期沒有,都去伺服器詢問一下,相當於上次HTTP響應的Expires暫時失效。伺服器的響應 處理流程同上。這種情況,就像你找到一盒牛奶,沒有看它的有效期,直接就問別人能不能喝。

最後是Ctrl+F5重新整理,其HTTP請求訊息頭如下:

Host 192.168.3.174:8080
User-Agent Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0
Accept text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language zh-cn,zh;q=0.5
Accept-Encoding gzip, deflate
Accept-Charset GB2312,utf-8;q=0.7,*;q=0.7
Connection keep-alive
Pragma no-cache
Cache-Control no-cache

If-Modified-Since沒有了,Cache-Control換成了no-cache,此外Pragma行是為了相容HTTP1.0,作用與 Cache-Control: no-cache是一樣的。意思是,我不要快取中的檔案了,強制重新整理,直接到伺服器上重新下載,於是伺服器的響應處理與首次請求這個URI一樣,返回 200 OK和新的內容。這種重新整理,使用的網路流量是最大的,也是最耗時的。這就像你雖然發現了一盒牛奶,但是把它扔掉了,直接去買一盒新的。

所以,當利用頁面上的隱藏域value時,有可能在頁面的操作時更改了該隱藏域的值,所以(按鈕)重新整理瀏覽器時,隱藏域的value是不會恢復到初始值,所以應在文件載入完成

$(document).ready(function () {
//初始化選單隱藏域
$("#menu_value").val(1);
}。
而不能依賴
<input id="menu_value" value="1" type="hidden"/>