上一篇文章《詳解頁面靜態資源的緩存策略，搞懂強緩存和協商緩存再做性能優化》我們從理論上介紹了瀏覽器和服務器是如何對靜態資源做緩存的，這篇文章我們把它做成一個node服務器的靜態資源中間件。

代碼開發

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

圖1

• 服務器接收到請求，先解析地址path(一般都是通過path對應到工程下的具體文件)；
• 檢查緩存頭標志，如果內容沒過期，僅修改頭信息，304狀態返回，如果內容過期了，就要正常返回內容。

圖2

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

圖3

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

圖4

如何獲取服務器靜態文件的路徑？如果設置了根目錄，就把請求地址的pathname拼在根目錄后面，如果沒有設置根目錄，就把pathname直接當做文件路徑。

圖5

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

圖6

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

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

圖7

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

圖8

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

代碼寫到這里，我們的服務已經可以正常返回靜態文件的內容了，但是我們還沒有設置緩存響應頭，下面我們繼續開發。

圖9

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

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

圖10

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

圖11

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

實例

圖12

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

圖13

從上面的效果看，我們可以發現，第一次請求是200，第二次請求會變成304，說明緩存策略生效了，符合預期！

總結

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

喜歡我的文章就關注我吧，有問題可以發表評論，我們一起學習，共同成長！

總結

以上是生活随笔為你收集整理的html如何获取请求头变量的值。_手写一个静态资源中间件，加深了解服务器对文件请求的缓存策略...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。