Head設(shè)置緩存是Web開(kāi)發(fā)中一個(gè)重要的話題。緩存代表著應(yīng)用程序能夠在客戶(hù)端和服務(wù)器端之間存儲(chǔ)和獲取數(shù)據(jù)。在HTML中，緩存可以被設(shè)置在head元素中。為了讓您的頁(yè)面更快地加載并減少服務(wù)器的負(fù)擔(dān)，這是非常有必要的。
在Head中設(shè)置緩存非常簡(jiǎn)單，只需要添加一些元素和元數(shù)據(jù)。在下面的示例中，我們將使用Pre標(biāo)記來(lái)顯示代碼：
<head> <meta http-equiv="cache-control" content="max-age=86400, must-revalidate" /> <meta http-equiv="expires" content="86400" /> <meta http-equiv="pragma" content="cache" /> </head>
上面的代碼片段是設(shè)置緩存的基本元素。通過(guò)這樣做，服務(wù)器可以告訴瀏覽器緩存多長(zhǎng)時(shí)間，以及何時(shí)更新緩存。下面是這些元素的更多信息：
max-age- 緩存過(guò)期時(shí)間。它表示服務(wù)器告訴瀏覽器緩存可以存儲(chǔ)多長(zhǎng)時(shí)間，以秒為單位。在這個(gè)例子中，它被設(shè)置為一天，也就是86400秒。must-revalidate- 如果設(shè)置了這個(gè)屬性，就告訴瀏覽器當(dāng)緩存過(guò)期后必須重新驗(yàn)證緩存。這將導(dǎo)致在過(guò)期緩存不存在的情況下，瀏覽器必須重新發(fā)送請(qǐng)求。expires- 由于一些瀏覽器不能正確處理max-age標(biāo)記，我們還要設(shè)置expires元素。這個(gè)元素表示了一個(gè)在某個(gè)時(shí)間過(guò)期的日期對(duì)象。在上面的例子中，我們將它設(shè)置為一天。pragma- 嘗試告訴瀏覽器使用緩存。不過(guò)，這個(gè)元素在不同的瀏覽器中被實(shí)現(xiàn)的方式是不同的。例如，Safari不會(huì)理會(huì)這個(gè)元素，所以你需要使用cache-control和expires元素。
在HTML中設(shè)置緩存是一個(gè)重要的技巧，特別是當(dāng)你使用自己的服務(wù)器時(shí)。通過(guò)這樣做，你可以使用客戶(hù)端存儲(chǔ)來(lái)減少服務(wù)器的負(fù)荷，加快頁(yè)面的加載速度。所以，不要忘記在Head中設(shè)置緩存！