初識Http緩存君

時間 2019-11-30

標籤 http 緩存欄目 HTTP/TCP 简体版

原文原文鏈接

前言

二零一七年十一月十三日，就是我開始前端之旅的第n日，我獨在臥室外徘徊，碰見程君，前來問我道，「你可曾爲http緩存寫了一點什麼沒有？」我說「沒有」，他就正告我，「你仍是寫一點罷，http緩存應該很高興與你相識，大家能夠相互認識多一點」。javascript

但是我實在無話可說。我只以爲所住的並不是人間。產品經理不仁，以程序員爲縐狗。可真的程序員，勇於直面慘淡的薪資，勇於正視淋漓的Bug。這是怎樣的哀痛者和幸福者？然而重構又經常爲庸人設計，以時間的流駛，來洗滌舊跡，僅使留下洶涌的加班和微漠的悲哀。在這洶涌的加班和微漠的悲哀中，又給人暫得偷生，維持着這似人非人的世界。我不知道這樣的世界什麼時候是一個盡頭！html

而我還在這樣的世界裏活着，因而以爲有寫點什麼的必要了。前端

緩存與性能優化息息相關，在知乎上，有一篇回答令我印象深入大公司裏怎樣開發和部署前端代碼？該回答講述了在部署階段如何利用緩存提升性能，節約帶寬。java

1、相遇

與緩存君的相遇是在一場雪夜，當我看見她，我就知道咱們會有故事，害羞的我不敢上前去與她交流。馬克步是個人好朋友，原本不是的，自從我見到他在月下西瓜田裏與猹不可描述後，咱們便成了好朋友。他對我說「別怕，我來給你創造環境，你專心作本身的事情。但在此以前我先告訴關於緩存君的一點小知識」，我高興極了。程序員

200 ：正常的交流，每次你說的話都會在腦海裏過一遍，而且找出合適禮貌的答語來回答你。
304 ：她知道你想要什麼，可是須要大腦給她的身體一個指令，而後作出相應的動做給予你想要的。（協商緩存）
from memory cache或者disk cache ：本壘打暗示，身體的本能反應，也是最快的。（強緩存）

2、交流

const http = require('http');
const fs = require('fs');
const path = require('path');
const server = http.createServer().listen(3000);

server.on('request',(req,res) => {
    const url = path.join(__dirname,'static',req.url);
    fs.readFile(url,(err,data) => {
        //馬克步對我說，你別管其餘的，每次有靜態請求
        //就會執行這裏的代碼，讀取文件而後返回出去。
        //以後會在這裏設置響應頭
        res.end(data);
    })    
});複製代碼

然而在交流過程當中卻令我高興不起來，她總是對我不冷不熱的。segmentfault

不管我和她對話多少次，她老是慢慢的考慮半天才回答我，這令我很傷心。因而馬克步對我說，「別難過，我幫你設置一個暗號，每次你使用暗號與她交流的話，這會使大家的交流更愉快一些。暗號有兩種哦」

//第一種 以資源內容hash爲版本號
server.on('request',(req,res) => {
    const url = path.join(__dirname,'static',req.url);
    fs.readFile(url,(err,data) => {
        //若是以前的請求在響應頭裏返回了Etag 那麼此次請求就能夠拿到
        //req.headers['if-none-match'] == 以前響應頭裏的Etag
        if(req.headers['if-none-match'] == 'hello'){
            res.statusCode = 304;
            res.end();
        }else{
        //響應頭裏設置Etag,下次請求的時候，會在請求頭裏加上If-None-Match
            res.setHeader('Etag', 'hello');
            res.end(data);
        }
        res.end(data);
    })    
});複製代碼

我再次和緩存君攀談了起來。瀏覽器

這一次依然如同陌生人同樣，可是此次我拿到了一個暗號,`Etag:hello`，我激動地趕忙使用暗號重複剛纔的話。

//第二種 以資源修改時間爲版本號
server.on('request',(req,res) => {
    const url = path.join(__dirname,'static',req.url);
    fs.readFile(url,(err,data) => {
        //若是以前的請求在響應頭裏返回了Last-Modifiedtag 那麼此次請求就能夠拿到
        //req.headers['if-modified-since'] == 以前響應頭裏的Last-Modified
        if(req.headers['if-modified-since']){
            res.statusCode = 304
            res.end()
        }else{    
            //在響應頭裏設置上次修改時間 必需爲國際標準時間
            res.setHeader('Last-Modified', new Date().toUTCString());
            res.end(data);
        }
        res.end(data);
    })    
});複製代碼

老姐、我想。。。

馬克步最知我心思，他告訴我說，你若想要很是親密的關係，其實設置一個分手時間就能夠了。緩存

server.on('request',(req,res) => {
    const url = path.join(__dirname,'static',req.url);
    fs.readFile(url,(err,data) => {
        //設置緩存過時時間
        res.setHeader('Cache-Control','max-age=5');
        res.end(data);
    })    
});複製代碼

我懷着忐忑的心徐徐向前。性能優化