http緩存

緩存介紹

緩存的原理：在首次請求后保存一份請求資源的響應副本，當用戶再次發起相同請求后，如果判斷緩存命中則攔截請求，將之前存儲的響應副本返回給用戶，從而避免重新向服務器發
起資源請求。

緩存的技術種類：代理緩存、瀏覽器緩存、網關緩存、負載均衡器及內容分發網絡等，大致分為兩類：共享緩存和私有緩存。

共享緩存指的是緩存內容可被多個用戶使用，如公司內部架設的Web代理；

私有緩存指的是只能單獨被用戶使用的緩存，如瀏覽器緩存。

HTTP 緩存可細分為強制緩存與協商緩存。
強制緩存：不用判斷緩存是否過期
協商緩存：獲取緩存資源時詢問服務器緩存是否過期，過期則重新請求資源，未過期則使用緩存內容

強制緩存

與強制緩存相關的兩個字段：expires、cache-control 。

Expires的強制緩存應用

Expires： 響應頭包含日期/時間， 即在此時候之后，響應過期。
在Cache-Control響應頭設置了 “max-age” 或者 “s-max-age” 指令，那么 Expires 頭會被忽略。

http.createServer((req,res) => {res.writeHead(200, {Expires: new Date('2022-1-1 12:00:00').toUTCString()}) }))

expires缺陷：依賴客戶端時間戳，客戶端時間和服務器時間不一致時，緩存判斷會出錯

Cache-Control 通用消息頭字段，被用于在http請求和響應中，通過指定指令來實現緩存機制。緩存指令是單向的，這意味著在請求中設置的指令，不一定被包含在響應中。

Cache-Control的強制緩存應用

設置緩存過期時間，5秒之內緩存有效，超過5秒需要重新請求資源

http.createServer((req,res) => {res.writeHead(200, {'Cache-Control': 'max-age=5'}) }))

Cache-Control的其他參數

no-cache：強制使用協商緩存, 每次都需要和服務器確認緩存是否有效。

客戶端可以緩存資源，每次使用緩存資源前都必須重新驗證其有效性。每次都會發起 HTTP 請求，當緩存內容有效時跳過 HTTP 響應體的下載。

no-store：禁止使用任何緩存

private：響應資源不可以被代理服務器緩存。

public：響應資源可以被瀏覽器和代理服務器緩存。

一般不容易變動的資源可以設置public屬性。例如：圖像、css文件和js文件。

max-age:設置緩存存儲的最大周期，超過這個時間緩存被認為過期(單位秒)。與Expires相反，時間是相對于請求的時間。

s-maxage: 當設置public屬性時生效，表示代理服務器緩存失效時間。

cache-control能作為expires的完全替代方案，并且擁有其所不具備的一些緩存控制特性,在項目實踐中使用它就足夠了，目前expires還存在的唯一理由是考慮可用性方面的向下兼容。

pragma(了解)

pragma值有no-cache與no-store
優先級大于cache-control即：

pragma -> cache-control -> expires

協商緩存

協商緩存：使用本地緩存前，向服務器發起get請求，與服務器協商當前本地緩存是否過期。

主要通過last-modified和etag值判斷。

基于last-modified判斷緩存修改時間

設置last-modified字段為緩存內容最后修改時間。

客戶端再次請求該資源時攜帶if-modified-since字段，if-modified-since字段值為上次請求的last-modified值。

服務端判斷兩個字段值，兩者一致時返回304表示緩存有效。
兩者不一致時返回最新的資源。

請求流程圖

#mermaid-svg-8kFSBl3WGpgGJ6uK .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .label text{fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .node rect,#mermaid-svg-8kFSBl3WGpgGJ6uK .node circle,#mermaid-svg-8kFSBl3WGpgGJ6uK .node ellipse,#mermaid-svg-8kFSBl3WGpgGJ6uK .node polygon,#mermaid-svg-8kFSBl3WGpgGJ6uK .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-8kFSBl3WGpgGJ6uK .node .label{text-align:center;fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .node.clickable{cursor:pointer}#mermaid-svg-8kFSBl3WGpgGJ6uK .arrowheadPath{fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-8kFSBl3WGpgGJ6uK .flowchart-link{stroke:#333;fill:none}#mermaid-svg-8kFSBl3WGpgGJ6uK .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-8kFSBl3WGpgGJ6uK .edgeLabel rect{opacity:0.9}#mermaid-svg-8kFSBl3WGpgGJ6uK .edgeLabel span{color:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-8kFSBl3WGpgGJ6uK .cluster text{fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-8kFSBl3WGpgGJ6uK .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-8kFSBl3WGpgGJ6uK text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-8kFSBl3WGpgGJ6uK .actor-line{stroke:grey}#mermaid-svg-8kFSBl3WGpgGJ6uK .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .sequenceNumber{fill:#fff}#mermaid-svg-8kFSBl3WGpgGJ6uK #sequencenumber{fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK #crosshead path{fill:#333;stroke:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .messageText{fill:#333;stroke:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-8kFSBl3WGpgGJ6uK .labelText,#mermaid-svg-8kFSBl3WGpgGJ6uK .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-8kFSBl3WGpgGJ6uK .loopText,#mermaid-svg-8kFSBl3WGpgGJ6uK .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-8kFSBl3WGpgGJ6uK .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-8kFSBl3WGpgGJ6uK .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-8kFSBl3WGpgGJ6uK .noteText,#mermaid-svg-8kFSBl3WGpgGJ6uK .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-8kFSBl3WGpgGJ6uK .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-8kFSBl3WGpgGJ6uK .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-8kFSBl3WGpgGJ6uK .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-8kFSBl3WGpgGJ6uK .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-8kFSBl3WGpgGJ6uK .section{stroke:none;opacity:0.2}#mermaid-svg-8kFSBl3WGpgGJ6uK .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-8kFSBl3WGpgGJ6uK .section2{fill:#fff400}#mermaid-svg-8kFSBl3WGpgGJ6uK .section1,#mermaid-svg-8kFSBl3WGpgGJ6uK .section3{fill:#fff;opacity:0.2}#mermaid-svg-8kFSBl3WGpgGJ6uK .sectionTitle0{fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .sectionTitle1{fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .sectionTitle2{fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .sectionTitle3{fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-8kFSBl3WGpgGJ6uK .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-8kFSBl3WGpgGJ6uK .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-8kFSBl3WGpgGJ6uK .grid path{stroke-width:0}#mermaid-svg-8kFSBl3WGpgGJ6uK .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-8kFSBl3WGpgGJ6uK .task{stroke-width:2}#mermaid-svg-8kFSBl3WGpgGJ6uK .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-8kFSBl3WGpgGJ6uK .taskText:not([font-size]){font-size:11px}#mermaid-svg-8kFSBl3WGpgGJ6uK .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-8kFSBl3WGpgGJ6uK .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-8kFSBl3WGpgGJ6uK .task.clickable{cursor:pointer}#mermaid-svg-8kFSBl3WGpgGJ6uK .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-8kFSBl3WGpgGJ6uK .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-8kFSBl3WGpgGJ6uK .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-8kFSBl3WGpgGJ6uK .taskText0,#mermaid-svg-8kFSBl3WGpgGJ6uK .taskText1,#mermaid-svg-8kFSBl3WGpgGJ6uK .taskText2,#mermaid-svg-8kFSBl3WGpgGJ6uK .taskText3{fill:#fff}#mermaid-svg-8kFSBl3WGpgGJ6uK .task0,#mermaid-svg-8kFSBl3WGpgGJ6uK .task1,#mermaid-svg-8kFSBl3WGpgGJ6uK .task2,#mermaid-svg-8kFSBl3WGpgGJ6uK .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-8kFSBl3WGpgGJ6uK .taskTextOutside0,#mermaid-svg-8kFSBl3WGpgGJ6uK .taskTextOutside2{fill:#000}#mermaid-svg-8kFSBl3WGpgGJ6uK .taskTextOutside1,#mermaid-svg-8kFSBl3WGpgGJ6uK .taskTextOutside3{fill:#000}#mermaid-svg-8kFSBl3WGpgGJ6uK .active0,#mermaid-svg-8kFSBl3WGpgGJ6uK .active1,#mermaid-svg-8kFSBl3WGpgGJ6uK .active2,#mermaid-svg-8kFSBl3WGpgGJ6uK .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-8kFSBl3WGpgGJ6uK .activeText0,#mermaid-svg-8kFSBl3WGpgGJ6uK .activeText1,#mermaid-svg-8kFSBl3WGpgGJ6uK .activeText2,#mermaid-svg-8kFSBl3WGpgGJ6uK .activeText3{fill:#000 !important}#mermaid-svg-8kFSBl3WGpgGJ6uK .done0,#mermaid-svg-8kFSBl3WGpgGJ6uK .done1,#mermaid-svg-8kFSBl3WGpgGJ6uK .done2,#mermaid-svg-8kFSBl3WGpgGJ6uK .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-8kFSBl3WGpgGJ6uK .doneText0,#mermaid-svg-8kFSBl3WGpgGJ6uK .doneText1,#mermaid-svg-8kFSBl3WGpgGJ6uK .doneText2,#mermaid-svg-8kFSBl3WGpgGJ6uK .doneText3{fill:#000 !important}#mermaid-svg-8kFSBl3WGpgGJ6uK .crit0,#mermaid-svg-8kFSBl3WGpgGJ6uK .crit1,#mermaid-svg-8kFSBl3WGpgGJ6uK .crit2,#mermaid-svg-8kFSBl3WGpgGJ6uK .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-8kFSBl3WGpgGJ6uK .activeCrit0,#mermaid-svg-8kFSBl3WGpgGJ6uK .activeCrit1,#mermaid-svg-8kFSBl3WGpgGJ6uK .activeCrit2,#mermaid-svg-8kFSBl3WGpgGJ6uK .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-8kFSBl3WGpgGJ6uK .doneCrit0,#mermaid-svg-8kFSBl3WGpgGJ6uK .doneCrit1,#mermaid-svg-8kFSBl3WGpgGJ6uK .doneCrit2,#mermaid-svg-8kFSBl3WGpgGJ6uK .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-8kFSBl3WGpgGJ6uK .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-8kFSBl3WGpgGJ6uK .milestoneText{font-style:italic}#mermaid-svg-8kFSBl3WGpgGJ6uK .doneCritText0,#mermaid-svg-8kFSBl3WGpgGJ6uK .doneCritText1,#mermaid-svg-8kFSBl3WGpgGJ6uK .doneCritText2,#mermaid-svg-8kFSBl3WGpgGJ6uK .doneCritText3{fill:#000 !important}#mermaid-svg-8kFSBl3WGpgGJ6uK .activeCritText0,#mermaid-svg-8kFSBl3WGpgGJ6uK .activeCritText1,#mermaid-svg-8kFSBl3WGpgGJ6uK .activeCritText2,#mermaid-svg-8kFSBl3WGpgGJ6uK .activeCritText3{fill:#000 !important}#mermaid-svg-8kFSBl3WGpgGJ6uK .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-8kFSBl3WGpgGJ6uK g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-8kFSBl3WGpgGJ6uK g.classGroup text .title{font-weight:bolder}#mermaid-svg-8kFSBl3WGpgGJ6uK g.clickable{cursor:pointer}#mermaid-svg-8kFSBl3WGpgGJ6uK g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-8kFSBl3WGpgGJ6uK g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-8kFSBl3WGpgGJ6uK .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-8kFSBl3WGpgGJ6uK .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-8kFSBl3WGpgGJ6uK .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-8kFSBl3WGpgGJ6uK .dashed-line{stroke-dasharray:3}#mermaid-svg-8kFSBl3WGpgGJ6uK #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-8kFSBl3WGpgGJ6uK #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-8kFSBl3WGpgGJ6uK #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-8kFSBl3WGpgGJ6uK #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-8kFSBl3WGpgGJ6uK #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-8kFSBl3WGpgGJ6uK #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-8kFSBl3WGpgGJ6uK #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-8kFSBl3WGpgGJ6uK #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-8kFSBl3WGpgGJ6uK .commit-id,#mermaid-svg-8kFSBl3WGpgGJ6uK .commit-msg,#mermaid-svg-8kFSBl3WGpgGJ6uK .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-8kFSBl3WGpgGJ6uK .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-8kFSBl3WGpgGJ6uK .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-8kFSBl3WGpgGJ6uK g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-8kFSBl3WGpgGJ6uK g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-8kFSBl3WGpgGJ6uK g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-8kFSBl3WGpgGJ6uK g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-8kFSBl3WGpgGJ6uK g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-8kFSBl3WGpgGJ6uK .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-8kFSBl3WGpgGJ6uK .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-8kFSBl3WGpgGJ6uK .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-8kFSBl3WGpgGJ6uK .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-8kFSBl3WGpgGJ6uK .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-8kFSBl3WGpgGJ6uK .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-8kFSBl3WGpgGJ6uK .edgeLabel text{fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-8kFSBl3WGpgGJ6uK .node circle.state-start{fill:black;stroke:black}#mermaid-svg-8kFSBl3WGpgGJ6uK .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-8kFSBl3WGpgGJ6uK #statediagram-barbEnd{fill:#9370db}#mermaid-svg-8kFSBl3WGpgGJ6uK .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-8kFSBl3WGpgGJ6uK .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-8kFSBl3WGpgGJ6uK .statediagram-state .divider{stroke:#9370db}#mermaid-svg-8kFSBl3WGpgGJ6uK .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-8kFSBl3WGpgGJ6uK .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-8kFSBl3WGpgGJ6uK .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-8kFSBl3WGpgGJ6uK .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-8kFSBl3WGpgGJ6uK .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-8kFSBl3WGpgGJ6uK .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-8kFSBl3WGpgGJ6uK .note-edge{stroke-dasharray:5}#mermaid-svg-8kFSBl3WGpgGJ6uK .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-8kFSBl3WGpgGJ6uK .error-icon{fill:#522}#mermaid-svg-8kFSBl3WGpgGJ6uK .error-text{fill:#522;stroke:#522}#mermaid-svg-8kFSBl3WGpgGJ6uK .edge-thickness-normal{stroke-width:2px}#mermaid-svg-8kFSBl3WGpgGJ6uK .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-8kFSBl3WGpgGJ6uK .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-8kFSBl3WGpgGJ6uK .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-8kFSBl3WGpgGJ6uK .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-8kFSBl3WGpgGJ6uK .marker{fill:#333}#mermaid-svg-8kFSBl3WGpgGJ6uK .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-8kFSBl3WGpgGJ6uK {color: rgba(0, 0, 0, 0.75);font: ;}客戶端服務端你好！我需要data資源！1好的！給你data，請記下last-modified哦2記錄last-modified值賦值給if-modified-since老板！再來一份上次的資源！3攜帶if-modified-since獲取資源對比if-modified-since與資源修改時間稍等我對比一下4if-modified-since與資源修改時間一致返回304告知客戶端緩存未過期304! 你的資源還能用啊！5好的那我用之前的吧。6200！我重新給你一份吧。7if-modified-since與資源修改時間不一致返回200重新發送資源和新的last-modified萬分感謝客戶端服務端

node代碼實現

const fs = require("fs") const http = require("http"); const url = require("url") http.createServer((req,res) => {const {pathname} = url.parse(req.url);if(pathname === '/img/3.jpg') {//讀取圖片文件const data = fs.readFileSync("./img/3.jpg")//獲取文件修改時間const { mtime } = fs.statSync('./img/3.jpg')// 獲取請求頭中使用的緩存最后修改時間const ifModifiedSince = req.headers['if-modified-since']// 對比緩存最后修改時間與文件最后修改時間if(ifModifiedSince === mtime.toUTCString()) {// 緩存生效 返回304res.statusCode = 304res.end()return}// 添加響應文件最后修改時間res.setHeader("Last-modified", mtime.toUTCString())// 設置為協商緩存res.setHeader("Cache-Control", 'no-cache')res.end(data)} }))

last-modified缺點

1.根據資源修改時間戳判斷，資源內容可能沒有變更。這時就會重新請求資源，浪費網絡帶寬。
2.時間單位精確到秒，資源在一秒內完成修改，就會出現資源沒有更新的情況。

基于etag判斷資源修改內容

為了解決last-modified的兩個問題，http1.1添加了etag的頭信息，即實體標簽。
etag是服務器根據資源內容通過哈希運算生成的唯一標識字符串。不同資源將生成不同的etag。

請求流程圖

請求過程與之前類似

#mermaid-svg-dt6XT2EjfZLHM2AS .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .label text{fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .node rect,#mermaid-svg-dt6XT2EjfZLHM2AS .node circle,#mermaid-svg-dt6XT2EjfZLHM2AS .node ellipse,#mermaid-svg-dt6XT2EjfZLHM2AS .node polygon,#mermaid-svg-dt6XT2EjfZLHM2AS .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-dt6XT2EjfZLHM2AS .node .label{text-align:center;fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .node.clickable{cursor:pointer}#mermaid-svg-dt6XT2EjfZLHM2AS .arrowheadPath{fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-dt6XT2EjfZLHM2AS .flowchart-link{stroke:#333;fill:none}#mermaid-svg-dt6XT2EjfZLHM2AS .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-dt6XT2EjfZLHM2AS .edgeLabel rect{opacity:0.9}#mermaid-svg-dt6XT2EjfZLHM2AS .edgeLabel span{color:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-dt6XT2EjfZLHM2AS .cluster text{fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-dt6XT2EjfZLHM2AS .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-dt6XT2EjfZLHM2AS text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-dt6XT2EjfZLHM2AS .actor-line{stroke:grey}#mermaid-svg-dt6XT2EjfZLHM2AS .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-dt6XT2EjfZLHM2AS #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .sequenceNumber{fill:#fff}#mermaid-svg-dt6XT2EjfZLHM2AS #sequencenumber{fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS #crosshead path{fill:#333;stroke:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .messageText{fill:#333;stroke:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-dt6XT2EjfZLHM2AS .labelText,#mermaid-svg-dt6XT2EjfZLHM2AS .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-dt6XT2EjfZLHM2AS .loopText,#mermaid-svg-dt6XT2EjfZLHM2AS .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-dt6XT2EjfZLHM2AS .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-dt6XT2EjfZLHM2AS .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-dt6XT2EjfZLHM2AS .noteText,#mermaid-svg-dt6XT2EjfZLHM2AS .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-dt6XT2EjfZLHM2AS .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-dt6XT2EjfZLHM2AS .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-dt6XT2EjfZLHM2AS .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-dt6XT2EjfZLHM2AS .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-dt6XT2EjfZLHM2AS .section{stroke:none;opacity:0.2}#mermaid-svg-dt6XT2EjfZLHM2AS .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-dt6XT2EjfZLHM2AS .section2{fill:#fff400}#mermaid-svg-dt6XT2EjfZLHM2AS .section1,#mermaid-svg-dt6XT2EjfZLHM2AS .section3{fill:#fff;opacity:0.2}#mermaid-svg-dt6XT2EjfZLHM2AS .sectionTitle0{fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .sectionTitle1{fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .sectionTitle2{fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .sectionTitle3{fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-dt6XT2EjfZLHM2AS .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-dt6XT2EjfZLHM2AS .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-dt6XT2EjfZLHM2AS .grid path{stroke-width:0}#mermaid-svg-dt6XT2EjfZLHM2AS .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-dt6XT2EjfZLHM2AS .task{stroke-width:2}#mermaid-svg-dt6XT2EjfZLHM2AS .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-dt6XT2EjfZLHM2AS .taskText:not([font-size]){font-size:11px}#mermaid-svg-dt6XT2EjfZLHM2AS .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-dt6XT2EjfZLHM2AS .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-dt6XT2EjfZLHM2AS .task.clickable{cursor:pointer}#mermaid-svg-dt6XT2EjfZLHM2AS .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-dt6XT2EjfZLHM2AS .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-dt6XT2EjfZLHM2AS .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-dt6XT2EjfZLHM2AS .taskText0,#mermaid-svg-dt6XT2EjfZLHM2AS .taskText1,#mermaid-svg-dt6XT2EjfZLHM2AS .taskText2,#mermaid-svg-dt6XT2EjfZLHM2AS .taskText3{fill:#fff}#mermaid-svg-dt6XT2EjfZLHM2AS .task0,#mermaid-svg-dt6XT2EjfZLHM2AS .task1,#mermaid-svg-dt6XT2EjfZLHM2AS .task2,#mermaid-svg-dt6XT2EjfZLHM2AS .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-dt6XT2EjfZLHM2AS .taskTextOutside0,#mermaid-svg-dt6XT2EjfZLHM2AS .taskTextOutside2{fill:#000}#mermaid-svg-dt6XT2EjfZLHM2AS .taskTextOutside1,#mermaid-svg-dt6XT2EjfZLHM2AS .taskTextOutside3{fill:#000}#mermaid-svg-dt6XT2EjfZLHM2AS .active0,#mermaid-svg-dt6XT2EjfZLHM2AS .active1,#mermaid-svg-dt6XT2EjfZLHM2AS .active2,#mermaid-svg-dt6XT2EjfZLHM2AS .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-dt6XT2EjfZLHM2AS .activeText0,#mermaid-svg-dt6XT2EjfZLHM2AS .activeText1,#mermaid-svg-dt6XT2EjfZLHM2AS .activeText2,#mermaid-svg-dt6XT2EjfZLHM2AS .activeText3{fill:#000 !important}#mermaid-svg-dt6XT2EjfZLHM2AS .done0,#mermaid-svg-dt6XT2EjfZLHM2AS .done1,#mermaid-svg-dt6XT2EjfZLHM2AS .done2,#mermaid-svg-dt6XT2EjfZLHM2AS .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-dt6XT2EjfZLHM2AS .doneText0,#mermaid-svg-dt6XT2EjfZLHM2AS .doneText1,#mermaid-svg-dt6XT2EjfZLHM2AS .doneText2,#mermaid-svg-dt6XT2EjfZLHM2AS .doneText3{fill:#000 !important}#mermaid-svg-dt6XT2EjfZLHM2AS .crit0,#mermaid-svg-dt6XT2EjfZLHM2AS .crit1,#mermaid-svg-dt6XT2EjfZLHM2AS .crit2,#mermaid-svg-dt6XT2EjfZLHM2AS .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-dt6XT2EjfZLHM2AS .activeCrit0,#mermaid-svg-dt6XT2EjfZLHM2AS .activeCrit1,#mermaid-svg-dt6XT2EjfZLHM2AS .activeCrit2,#mermaid-svg-dt6XT2EjfZLHM2AS .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-dt6XT2EjfZLHM2AS .doneCrit0,#mermaid-svg-dt6XT2EjfZLHM2AS .doneCrit1,#mermaid-svg-dt6XT2EjfZLHM2AS .doneCrit2,#mermaid-svg-dt6XT2EjfZLHM2AS .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-dt6XT2EjfZLHM2AS .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-dt6XT2EjfZLHM2AS .milestoneText{font-style:italic}#mermaid-svg-dt6XT2EjfZLHM2AS .doneCritText0,#mermaid-svg-dt6XT2EjfZLHM2AS .doneCritText1,#mermaid-svg-dt6XT2EjfZLHM2AS .doneCritText2,#mermaid-svg-dt6XT2EjfZLHM2AS .doneCritText3{fill:#000 !important}#mermaid-svg-dt6XT2EjfZLHM2AS .activeCritText0,#mermaid-svg-dt6XT2EjfZLHM2AS .activeCritText1,#mermaid-svg-dt6XT2EjfZLHM2AS .activeCritText2,#mermaid-svg-dt6XT2EjfZLHM2AS .activeCritText3{fill:#000 !important}#mermaid-svg-dt6XT2EjfZLHM2AS .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-dt6XT2EjfZLHM2AS g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-dt6XT2EjfZLHM2AS g.classGroup text .title{font-weight:bolder}#mermaid-svg-dt6XT2EjfZLHM2AS g.clickable{cursor:pointer}#mermaid-svg-dt6XT2EjfZLHM2AS g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-dt6XT2EjfZLHM2AS g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-dt6XT2EjfZLHM2AS .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-dt6XT2EjfZLHM2AS .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-dt6XT2EjfZLHM2AS .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-dt6XT2EjfZLHM2AS .dashed-line{stroke-dasharray:3}#mermaid-svg-dt6XT2EjfZLHM2AS #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-dt6XT2EjfZLHM2AS #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-dt6XT2EjfZLHM2AS #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-dt6XT2EjfZLHM2AS #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-dt6XT2EjfZLHM2AS #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-dt6XT2EjfZLHM2AS #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-dt6XT2EjfZLHM2AS #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-dt6XT2EjfZLHM2AS #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-dt6XT2EjfZLHM2AS .commit-id,#mermaid-svg-dt6XT2EjfZLHM2AS .commit-msg,#mermaid-svg-dt6XT2EjfZLHM2AS .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-dt6XT2EjfZLHM2AS .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-dt6XT2EjfZLHM2AS .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-dt6XT2EjfZLHM2AS g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-dt6XT2EjfZLHM2AS g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-dt6XT2EjfZLHM2AS g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-dt6XT2EjfZLHM2AS g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-dt6XT2EjfZLHM2AS g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-dt6XT2EjfZLHM2AS .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-dt6XT2EjfZLHM2AS .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-dt6XT2EjfZLHM2AS .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-dt6XT2EjfZLHM2AS .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-dt6XT2EjfZLHM2AS .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-dt6XT2EjfZLHM2AS .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-dt6XT2EjfZLHM2AS .edgeLabel text{fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-dt6XT2EjfZLHM2AS .node circle.state-start{fill:black;stroke:black}#mermaid-svg-dt6XT2EjfZLHM2AS .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-dt6XT2EjfZLHM2AS #statediagram-barbEnd{fill:#9370db}#mermaid-svg-dt6XT2EjfZLHM2AS .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-dt6XT2EjfZLHM2AS .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-dt6XT2EjfZLHM2AS .statediagram-state .divider{stroke:#9370db}#mermaid-svg-dt6XT2EjfZLHM2AS .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-dt6XT2EjfZLHM2AS .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-dt6XT2EjfZLHM2AS .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-dt6XT2EjfZLHM2AS .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-dt6XT2EjfZLHM2AS .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-dt6XT2EjfZLHM2AS .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-dt6XT2EjfZLHM2AS .note-edge{stroke-dasharray:5}#mermaid-svg-dt6XT2EjfZLHM2AS .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-dt6XT2EjfZLHM2AS .error-icon{fill:#522}#mermaid-svg-dt6XT2EjfZLHM2AS .error-text{fill:#522;stroke:#522}#mermaid-svg-dt6XT2EjfZLHM2AS .edge-thickness-normal{stroke-width:2px}#mermaid-svg-dt6XT2EjfZLHM2AS .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-dt6XT2EjfZLHM2AS .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-dt6XT2EjfZLHM2AS .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-dt6XT2EjfZLHM2AS .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-dt6XT2EjfZLHM2AS .marker{fill:#333}#mermaid-svg-dt6XT2EjfZLHM2AS .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-dt6XT2EjfZLHM2AS {color: rgba(0, 0, 0, 0.75);font: ;}客戶端服務端你好！我需要data資源！1好的！給你data，請記下etag哦2記錄etag值賦值給if-none-match老板！再來一份上次的資源！3攜帶if-none-match獲取資源對比if-none-match與資源的etag值稍等我對比一下4if-none-match與資源的etag值一致返回304告知客戶端緩存未過期304! 你的資源還能用啊！5好的那我用之前的吧。6200！我重新給你一份吧。7if-none-match與資源修改時間不一致返回200重新發送資源和新的etag萬分感謝客戶端服務端

node實現

const fs = require("fs") const http = require("http") const url = require("url") const etag = require('etag') http.createServer((req,res) => {const {pathname} = url.parse(req.url);if (pathname === '/img/4.jpg') {// 讀取文件內容const data = fs.readFileSync("./img/4.jpg")// 生成etag標識字符串const etagControl = etag(data)// 獲取請求頭標識字符串const ifNoneMatch = req.headers['if-none-match']// 判斷是否為同一個文件if(ifNoneMatch === etagControl) {res.statusCode = 304res.end()return}res.setHeader("etag", etagControl)res.setHeader("Cache-Control", "no-cache")res.end(data)} }))

etag的弊端

1.生成etag需要額外的計算資源。

當資源尺寸大或者數量多的時候影響服務器性能。

2.etag字段分為強驗證和若驗證。

強驗證：根據資源內容生成。資源有任何變化都會生成不同的etag

弱驗證：根據資源的部分屬性值生成。生成速度快但是無法保證每個字節都相同。

3.分布式場景下依賴算法：計算etag的算法不一致會導致瀏覽器從一臺服務器獲取資源到另一臺服務器效驗時出現etag不匹配情況。

緩存策略

緩存策略流程圖

首先考慮是否需要緩存。如果想啟用協商緩存需要給cache-control字段添加no-cache屬性值
接下來考慮是否允許代理服務器緩存資源，通過cache-control字段添加private和public控制。
如果之前未設置no-cache啟用協商緩存，那么接下來可設置強制緩存的過期時間，即為 cache-control字段配置 max-age=… 的屬性值。
最后如果啟用了協商緩存，則可進一步設置請求資源的last-modified和ETag實體標簽等參數。

Created with Rapha?l 2.3.0開始是否使用緩存？是否進行協商緩存？no-cache是否能被代理服務器緩存public配置強制緩存過期時間配置協商緩存過期時間結束privateno-storeyesnoyesnoyesno

緩存策略示例

在使用緩存技術優化性能體驗的過程中，有一個問題是不可逾越的：我們既希望緩存能在客戶端盡可能久的保存，又希望它能在資源發生修改時進行及時更新。

這是兩個互斥的優化訴求，使用強制緩存并定義足夠長的過期時間就能讓緩存在客戶端長期駐留，但由于強制緩存的優先級高于協商緩存，所以很難進行及時更新；若使用協商緩存，雖然能夠保證及時更新，但頻繁與服務器進行協商驗證的響應速度肯定不及使用強制緩存快。那么如何兼顧二者的優勢呢？

我們可以將一個網站所需要的資源按照不同類型去拆解，為不同類型的資源制定相應的緩存策略，以下面的HTML文件資源為例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>http緩存</title><link rel="stylesheet" href="style.css"> </head> <body><img width="100" src="./img/2.png" alt="2.png"><img width="100" src="./img/3.jpg" alt="3.jpg"><img width="100" src="./img/4.jpg" alt="4.jpg"> </body> <script src="script.js"></script> </html>

該 HTML 文件中包含了一個 JavaScript 文件 script.js、一個樣式表文件 style.css和圖片文件，若要展示出該 HTML 中的內容就需要加載出其包含的所有外鏈文件。據此我們可針對它們進行如下設置。

首先 HTML 在這里屬于包含其他文件的主文件，為保證當其內容發生修改時能及時更新，應當將其設置為協商緩存，即為 cache-control 字段添加 no-cache 屬性值；其次是圖片文件，因為網站對圖片的修改基本都是更換修改，同時考慮到圖片文件的數量及大小可能對客戶端緩存空間造成不小的開銷，所以可采用強制緩存且過期時間不宜過長，故可設置cache-control 字段值為 max-age=86400。

接下來需要考慮的是樣式表文件 style.css，由于其屬于文本文件，可能存在內容的不定期修改，又想使用強制緩存來提高重用效率，故可以考慮在樣式表文件的命名中增加文件指紋或版本號（比如添加文件指紋后的樣式表文件名變為了 style.51ad84f7.css），這樣當發生文件修改后，不同的文件便會有不同的文件指紋，即需要請求的文件 URL 不同了，因此必然會發生對資源的重新請求。同時考慮到網絡中瀏覽器與 CDN 等中間代理的緩存，其過期時間可適當延長到一年，即cache-control：max-age=31536000。

最后是 JavaScript 腳本文件，其可類似于樣式表文件的設置，采取文件指紋和較長的過期時間，如果 JavaScript 中包含了用戶的私人信息而不想讓中間代理緩存，則可為 cache-control添加private屬性值。

從這個緩存策略的示例中我們可以看出，對不同資源進行組合使用強制緩存、協商緩存及文件指紋或版本號，可以做到一舉多得：及時修改更新、較長緩存過期時間及控制所能進行緩存的位置。

緩存設置注意事項

在前面的內容中雖然給出了一種制定緩存決策的思路與示例，但需要明白的一點是：不存在適用于所有場景下的最佳緩存策略。凡是恰當的緩存策略都需要根據具體場景下的請求資源類型、數據更新要求及網絡通信模式等多方面因素考量后制定出來，所以下面列舉一些緩存決策時的注意事項，來作為決策思路的補充。

拆分源碼，分包加載

對大型的前端應用迭代開發來說，其代碼量通常很大，如果發生修改的部分集中在幾個重要模塊中，那么進行全量的代碼更新顯然會比較冗余，因此我們可以考慮在代碼構建過程中，按照模塊拆分將其打包成多個單獨的文件。這樣在每次修改后的更新提取時，僅需拉取發生修改的模塊代碼包，從而大大降低了需要下載的內容大小。

預估資源的緩存時效

根據不同資源的不同需求特點，規劃相應的緩存更新時效，為強制緩存指定合適的max-age 取值，為協商緩存提供驗證更新的 ETag 實體標簽。

控制中間代理的緩存

凡是會涉及用戶隱私信息的盡量避免中間代理的緩存，如果對所有用戶響應相同的資源，則可以考慮讓中間代理也進行緩存。

避免網址的冗余

緩存是根據請求資源的 URL 進行的，不同的資源會有不同的 URL，所以盡量不要將相同的資源設置為不同的 URL。

規劃緩存的層次結構

參考緩存決策中介紹的示例，不僅是請求的資源類型，文件資源的層次結構也會對制定緩存策略有一定影響。

網頁訪問刷新與緩存

訪問和刷新分為三種情況：

標簽進入、輸入ulr回車進入
按刷新按鈕、f5刷新、網頁右鍵“重新加載”
ctrl + f5強制刷新

TODO

總結

以上是生活随笔為你收集整理的HTTP缓存-http强制缓存与协商缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

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