我們從理論上介紹了瀏覽器和服務(wù)器是如何對靜態(tài)資源做緩存的，這篇文章我們把它做成一個node服務(wù)器的靜態(tài)資源中間件。

代碼開發(fā)

既然是開發(fā)中間件，肯定是服務(wù)端要做的事情，大致流程如下：

圖1

服務(wù)器接收到請求，先解析地址path(一般都是通過path對應(yīng)到工程下的具體文件);

檢查緩存頭標(biāo)志，如果內(nèi)容沒過期，僅修改頭信息，304狀態(tài)返回，如果內(nèi)容過期了，就要正常返回內(nèi)容。

圖2

我們在static.js文件中開發(fā)，這個中間件允許設(shè)置目錄和其他參數(shù)，如圖2所示。

圖3

如果不是GET或者HEAD請求，可以直接跳過這個中間件，也可以直接返回點什么!

圖4

如何獲取服務(wù)器靜態(tài)文件的路徑?如果設(shè)置了根目錄，就把請求地址的pathname拼在根目錄后面，如果沒有設(shè)置根目錄，就把pathname直接當(dāng)做文件路徑。

圖5

當(dāng)我們拿到文件路徑后，需要判斷這個路徑是否真實存在?如果存在，它就有可能是文件夾，也有可能是文件，我們先處理是文件的情況。

圖6

此處我們直接使用mime這個包來設(shè)置content-type。

除了圖5中處理文件夾的邏輯，還有當(dāng)請求的路徑最后一個字符是“/”時，也需要被當(dāng)做文件夾處理。如果是文件夾，就需要設(shè)置文件夾下的默認(rèn)文件，一般是index.html。

圖7

如圖7所示，有兩處需要處理文件夾，我們抽取一下邏輯。

圖8

options.index可以配置文件夾下默認(rèn)的文件，類型是數(shù)組。如果找到一個存在的文件，就返回這個文件。那么圖6中處理單個文件的邏輯和此處一致，可以抽取出來——hanleFile。

代碼寫到這里，我們的服務(wù)已經(jīng)可以正常返回靜態(tài)文件的內(nèi)容了，但是我們還沒有設(shè)置緩存響應(yīng)頭，下面我們繼續(xù)開發(fā)。

圖9

如圖9所示，我們設(shè)置了Cache-Control、Last-Modify和Etag響應(yīng)頭(etag的獲取我們直接利用etag模塊計算)。

當(dāng)一個請求非第一次到達(dá)服務(wù)器，它有可能帶著緩存信息，所以我們要判斷文件緩存是否過期，如果沒有過期，就返回304狀態(tài)。

圖10

如圖10，我們對比一下【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】這兩對請求響應(yīng)頭，這是文件內(nèi)容是否變化的主要依據(jù)。

圖11

如圖11，只要符合服務(wù)器的緩存策略(etag==if-none-match或者last-modified<=If-modified-since)，就可以返回304狀態(tài)。

實例

圖12

如圖12所示，我們寫個demo測試一下，效果如下：

從上面的效果看，我們可以發(fā)現(xiàn)，第一次請求是200，第二次請求會變成304，說明緩存策略生效了，符合預(yù)期!

總結(jié)

這篇文章主要是把之前的理論變成能實際應(yīng)用的代碼，雖然還有很多地方需要打磨，但是主體邏輯已經(jīng)成型，從中可以學(xué)習(xí)一下思路。

總結(jié)

以上是生活随笔為你收集整理的服务器策略文件,如何解决服务器对文件请求的缓存策略教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。