建站
咨詢
售后
建站咨詢
新聞中心
我們從理論上介紹了瀏覽器和服務(wù)器是如何對(duì)靜態(tài)資源做緩存的，這篇文章我們把它做成一個(gè)node服務(wù)器的靜態(tài)資源中間件。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了瓜州免費(fèi)建站歡迎大家使用！
代碼開(kāi)發(fā)
既然是開(kāi)發(fā)中間件，肯定是服務(wù)端要做的事情，大致流程如下：
圖1
- 服務(wù)器接收到請(qǐng)求，先解析地址path(一般都是通過(guò)path對(duì)應(yīng)到工程下的具體文件);
- 檢查緩存頭標(biāo)志，如果內(nèi)容沒(méi)過(guò)期，僅修改頭信息，304狀態(tài)返回，如果內(nèi)容過(guò)期了，就要正常返回內(nèi)容。
圖2
我們?cè)趕tatic.js文件中開(kāi)發(fā)，這個(gè)中間件允許設(shè)置目錄和其他參數(shù)，如圖2所示。
圖3
如果不是GET或者HEAD請(qǐng)求，可以直接跳過(guò)這個(gè)中間件，也可以直接返回點(diǎn)什么!
圖4
如何獲取服務(wù)器靜態(tài)文件的路徑?如果設(shè)置了根目錄，就把請(qǐng)求地址的pathname拼在根目錄后面，如果沒(méi)有設(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。
代碼寫(xiě)到這里，我們的服務(wù)已經(jīng)可以正常返回靜態(tài)文件的內(nèi)容了，但是我們還沒(méi)有設(shè)置緩存響應(yīng)頭，下面我們繼續(xù)開(kāi)發(fā)。
圖9
如圖9所示，我們?cè)O(shè)置了Cache-Control、Last-Modify和Etag響應(yīng)頭(etag的獲取我們直接利用etag模塊計(jì)算)。
當(dāng)一個(gè)請(qǐng)求非第一次到達(dá)服務(wù)器，它有可能帶著緩存信息，所以我們要判斷文件緩存是否過(guò)期，如果沒(méi)有過(guò)期，就返回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所示，我們寫(xiě)個(gè)demo測(cè)試一下，效果如下：
動(dòng)圖請(qǐng)點(diǎn)此處
從上面的效果看，我們可以發(fā)現(xiàn)，第一次請(qǐng)求是200，第二次請(qǐng)求會(huì)變成304，說(shuō)明緩存策略生效了，符合預(yù)期!
總結(jié)
這篇文章主要是把之前的理論變成能實(shí)際應(yīng)用的代碼，雖然還有很多地方需要打磨，但是主體邏輯已經(jīng)成型，從中可以學(xué)習(xí)一下思路。
網(wǎng)頁(yè)名稱：手寫(xiě)一個(gè)靜態(tài)資源中間件，加深了解服務(wù)器對(duì)文件請(qǐng)求的緩存策略
網(wǎng)站鏈接：http://www.dlmjj.cn/article/djchsde.html
