前端程式設計中,如何消除瀏覽器快取

2021-07-24 23:50:28 字數 1443 閱讀 5321

在前端程式設計中,brackets與nginx是我最喜歡的組合,除錯**與介面全在本地,完全能達到那種飛一般的程式設計感覺。

但在開發中,最容易鬱悶的是,html與js檔案容易被瀏覽器快取,檔案都已經更新了,但感覺伺服器返回的檔案依然是上上上次的,非要手動清除一次瀏覽器的快取,才能檢視到最新的檔案,這特麼的也太煩了不是?

檢視靜態檔案的請求頭資訊,如下:

accept-ranges

:bytes

content-length

:211089

content-type

date

:tue, 29

nov201604:

26:40gmt

etag

:"583c0ad3-33891"

last-modified

:mon, 28

nov201610:

45:39gmt

server

:nginx/

1.10.2

從date與last-modified欄位就可以看出,js檔案被瀏覽器快取了,快取的時間還將近一天,於是就想到為js檔案新增頭資訊,偷了一次懶,直接在根路徑新增快取頭資訊,如下:

location /
結果,所有的靜態檔案依舊那麼牢牢地保持快取狀態,繼續新增過濾規則,如下:

#   利用正規表示式匹配靜態資源目錄

location ~ /dest/(.*)

然後請求伺服器,返回的頭資訊如下:

accept-ranges

:bytes

cache-control

:no-cache

cache-control

:max-age=

0cache-control

:private

connection

:keep-alive

content-length

:514

content-type

:text/html

date

:tue, 29

nov201607:

03:25gmt

etag

:"583d283b-202"

expires

:tue, 29

nov201607:

03:25gmt

last-modified

:tue, 29

nov201607:

03:23gmt

可以看出,date與expires欄位完全相等,這下瀏覽器再也不快取頁面了。

需要特別指出的是,瀏覽器頁面快取與nginx的頁面快取完全是兩個不同的概念,乙個快取在客戶端,乙個快取在伺服器端,上面的方法只是告訴瀏覽器,檔案不需要快取,與伺服器端的頁面快取完全不相關。

前端快取 瀏覽器快取機制

瀏覽器第一次向伺服器發起該請求後拿到請求結果後,將請求結果和快取標識存入瀏覽器快取,瀏覽器對於快取的處理是根據第一次請求資源時返回的響應頭來確定的。瀏覽器中的快取作用分為兩種情況,一種是需要傳送http請求,一種是不需要傳送。expires 即過期時間 expires max age 請求時間 存在...

前端瀏覽器快取策略

通常瀏覽器快取策略分為兩種 強快取和協商快取,並且快取策略都是通過設定http header來實現的 強快取 強快取可以通過設定兩種http header實現 expires和cache control。強快取表示在快取期間不需要請求,state code為200 expires expires w...

前端瀏覽器快取策略

簡單記錄一下瀏覽器快取策略的理解 1,按瀏覽器快取位置來看分為四種 從上到下優先順序依次降低 1 service worker service worker 是執行在瀏覽器背後的獨立執行緒,一般可以用來實現快取功能。這是優先順序最高的快取,並且與其它三種不同,是可定製化的快取,而其它三種只能通過某些...