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

代碼開發(fā)

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

圖1

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

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

圖2

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

圖3

如果不是GET或者HEAD請(qǐng)求，可以直接跳過這個(gè)中間件，也可以直接返回點(diǎn)什么!

圖4

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

圖5

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

圖6

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

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

圖7

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

圖8

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

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

圖9

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

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

圖10

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

圖11

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

實(shí)例

圖12

如圖12所示，我們寫個(gè)demo測(cè)試一下，效果如下：

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

總結(jié)

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

總結(jié)

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

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