內容:html
1.緩存基本原理node
2.node實現緩存瀏覽器
1.緩存基本原理緩存
第一重要、緩存策略:服務器
第二重要、緩存實現過程:cookie
注意:ui
2.node實現緩存url
源碼:spa
1 const http=require('http'); 2 const fs=require('fs'); 3 const url=require('url'); 4 5 // 連續兩次訪問: http://localhost:8080/1.html 第一次是200 第二次是304 6 http.createServer((req, res)=>{ 7 let {pathname}=url.parse(req.url); 8 9 //獲取文件日期 10 fs.stat(`www${pathname}`, (err, stat)=>{ 11 if(err){ 12 res.writeHeader(404); 13 res.write('Not Found'); 14 res.end(); 15 }else{ 16 // 請求頭中有if-modified-since -> 不是第一次請求,以前瀏覽器中緩存了該頁面 17 if(req.headers['if-modified-since']){ 18 let oDate=new Date(req.headers['if-modified-since']); 19 let time_client=Math.floor(oDate.getTime()/1000); 20 let time_server=Math.floor(stat.mtime.getTime()/1000); 21 22 if(time_server>time_client){ // 服務器的文件時間 > 客戶端手裏的版本 23 sendFileToClient(); 24 }else{ 25 res.writeHeader(304); 26 res.write('Not Modified'); 27 res.end(); 28 } 29 } 30 // 請求頭中沒有if-modified-since -> 第一次請求 -> 直接返回要的文件 31 else{ 32 sendFileToClient(); 33 } 34 35 // 直接返回文件 36 function sendFileToClient(){ 37 //發送 38 let rs=fs.createReadStream(`www${pathname}`); 39 40 res.setHeader('Last-Modified', stat.mtime.toGMTString()); 41 42 //輸出 43 rs.pipe(res); 44 45 rs.on('error', function(err){ 46 res.writeHeader(404); 47 res.write('Not Found'); 48 res.end(); 49 }); 50 } 51 } 52 }); 53 }).listen(8080);
原理:localstorage
另外還能夠設置緩存:
1 // 具備緩存控制的服務器 --> 設置Cache-Control(no-cache) 2 const http=require('http'); 3 const fs=require('fs'); 4 const url=require('url'); 5 6 // 連續兩次訪問: http://localhost:8080/1.html 第一次是200 第二次是304 7 http.createServer((req, res)=>{ 8 let {pathname}=url.parse(req.url); 9 10 //獲取文件日期 11 fs.stat(`www${pathname}`, (err, stat)=>{ 12 if(err){ 13 res.writeHeader(404); 14 res.write('Not Found'); 15 res.end(); 16 }else{ 17 // 請求頭中有if-modified-since -> 不是第一次請求,以前瀏覽器中緩存了該頁面 18 if(req.headers['if-modified-since']){ 19 let oDate=new Date(req.headers['if-modified-since']); 20 let time_client=Math.floor(oDate.getTime()/1000); 21 let time_server=Math.floor(stat.mtime.getTime()/1000); 22 23 if(time_server>time_client){ // 服務器的文件時間 > 客戶端手裏的版本 24 sendFileToClient(); 25 }else{ 26 res.writeHeader(304); 27 res.write('Not Modified'); 28 res.end(); 29 } 30 } 31 // 請求頭中沒有if-modified-since -> 第一次請求 -> 直接返回要的文件 32 else{ 33 sendFileToClient(); 34 } 35 36 // 直接返回文件 37 function sendFileToClient(){ 38 //發送 39 let rs=fs.createReadStream(`www${pathname}`); 40 41 // 設置緩存 42 res.setHeader('Cache-Control', 'no-cache'); 43 res.setHeader('Last-Modified', stat.mtime.toGMTString()); 44 45 //輸出 46 rs.pipe(res); 47 48 rs.on('error', function(err){ 49 res.writeHeader(404); 50 res.write('Not Found'); 51 res.end(); 52 }); 53 } 54 } 55 }); 56 }).listen(8080); 57