覽器緩存究竟是什么？

瀏覽器緩存（Browser Caching）是為了加速瀏覽，瀏覽器在用戶(hù)磁盤(pán)上對(duì)請(qǐng)求過(guò)的文檔進(jìn)行存儲(chǔ)，當(dāng)訪問(wèn)者再次請(qǐng)求這個(gè)頁(yè)面時(shí)，瀏覽器就可以從本地磁盤(pán)顯示文檔，這樣就可以加速頁(yè)面的閱覽。它是網(wǎng)站訪問(wèn)統(tǒng)計(jì)最難解決的問(wèn)題之一。為了回收重復(fù)閱覽網(wǎng)站而產(chǎn)生的資源浪費(fèi)，而產(chǎn)生的機(jī)制。緩存的方式節(jié)約了網(wǎng)絡(luò)的資源，提高了網(wǎng)絡(luò)的效率。

為什么要清理緩存呢？緩存會(huì)帶來(lái)哪些問(wèn)題？

部署前端項(xiàng)目以后，你會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題（為什么必須刷新頁(yè)面，頁(yè)面才會(huì)更新到最新版本），其實(shí)就是因?yàn)榉?wù)器緩存的問(wèn)題。緩存會(huì)導(dǎo)致你頁(yè)面樣式、圖片或腳本等未能及時(shí)更新展示。

瀏覽器自身如何清理緩存呢？

以谷歌瀏覽器為例：按照下圖指示：（也可使用快捷鍵直接喚起：Ctrl + Shift + Del）

vue項(xiàng)目中如何清理緩存呢?

1.在根目錄下index.html的header頭中添加一下代碼：

2.配置 nginx 不緩存 html

index.html在服務(wù)器端可能是有緩存的，需要在服務(wù)器nginx上配置不讓緩存index.html

名詞解釋:

no-cache：數(shù)據(jù)內(nèi)容不能被緩存, 每次請(qǐng)求都重新訪問(wèn)服務(wù)器, 若有max-age（最大緩存期）, 則緩存期間不訪問(wèn)服務(wù)器

no-store：不僅不能緩存, 連暫存也不可以(即: 臨時(shí)文件夾中不能暫存該資源)

以上就是我本次分享的方式，各位同仁們還有什么好的方式可以下方留言，共同學(xué)習(xí)！

---攜手共進(jìn)，一同進(jìn)階！

**實(shí)現(xiàn)梯形圓角Tab：打造獨(dú)特Web界面元素的藝術(shù)之旅**

**導(dǎo)語(yǔ)：**

在網(wǎng)頁(yè)設(shè)計(jì)中，創(chuàng)新且個(gè)性化的UI元素往往能帶來(lái)出色的視覺(jué)體驗(yàn)與用戶(hù)互動(dòng)性。本文將以“實(shí)現(xiàn)梯形圓角Tab”為主題，詳解如何利用CSS3和JavaScript實(shí)現(xiàn)這一獨(dú)特的導(dǎo)航樣式，帶你領(lǐng)略Web前端藝術(shù)的魅力。通過(guò)一步步的教程和實(shí)戰(zhàn)代碼，您將學(xué)會(huì)如何在項(xiàng)目中創(chuàng)造出富有創(chuàng)意的梯形圓角Tab。

## **一、認(rèn)識(shí)梯形圓角Tab**

梯形圓角Tab是一種融合了梯形和圓角矩形特征的導(dǎo)航標(biāo)簽，因其新穎的形狀和良好的觸感，常被用于網(wǎng)站或應(yīng)用的頁(yè)面切換或菜單導(dǎo)航。每個(gè)Tab項(xiàng)頂部呈梯形，兩側(cè)帶有圓角，賦予界面立體感和生動(dòng)性。

## **二、HTML結(jié)構(gòu)設(shè)定**

首先，我們構(gòu)建基礎(chǔ)的HTML結(jié)構(gòu)，為每個(gè)Tab項(xiàng)創(chuàng)建一個(gè)`<div>`元素。

```html

<div class="tab-container">

<div class="tab-item">Tab 1</div>

<div class="tab-item">Tab 2</div>

<div class="tab-item">Tab 3</div>

</div>

```

## **三、CSS樣式設(shè)定**

接下來(lái)，我們通過(guò)CSS3的border-radius、transform屬性以及偽元素技術(shù)，來(lái)實(shí)現(xiàn)梯形圓角Tab的樣式。

```css

.tab-container {

display: flex;

justify-content: space-between;

}

.tab-item {

background: #ccc;

padding: 1em;

color: white;

position: relative;

cursor: pointer;

z-index: 1;

}

.tab-item::before,

.tab-item::after {

content: '';

position: absolute;

width: 0;

height: 0;

border-style: solid;

}

/* 左側(cè)梯形 */

.tab-item::before {

left: 0;

top: 0;

border-width: 0 calc(50% - 10px) calc(50% - 10px) 0;

border-color: transparent transparent #ccc transparent;

}

/* 右側(cè)梯形 */

.tab-item::after {

right: 0;

top: 0;

border-width: 0 0 calc(50% - 10px) calc(50% - 10px);

border-color: transparent transparent transparent #ccc;

}

/* 圓角 */

.tab-item {

border-radius: 10px 10px 0 0;

}

/* 選中態(tài)樣式 */

.tab-item.active {

background: #007bff;

}

.tab-item.active::before,

.tab-item.active::after {

border-bottom-color: #007bff;

}

```

## **四、JavaScript交互**

為了讓Tab具備切換功能，我們可以為每個(gè)Tab項(xiàng)添加JavaScript事件監(jiān)聽(tīng)器，實(shí)現(xiàn)選中狀態(tài)的切換。

```javascript

document.querySelectorAll('.tab-item').forEach(tab => {

tab.addEventListener('click', function() {

this.classList.add('active');

this.parentNode.querySelectorAll('.tab-item').forEach(otherTab => {

if (otherTab !== this) {

otherTab.classList.remove('active');

}

});

});

});

```

## **五、應(yīng)用場(chǎng)景與拓展**

梯形圓角Tab不僅適用于常規(guī)的導(dǎo)航欄，還可應(yīng)用于各種創(chuàng)新交互設(shè)計(jì)中，如產(chǎn)品選項(xiàng)卡、折疊面板等。通過(guò)修改CSS樣式，您可以輕松調(diào)整梯形的角度、顏色以及圓角大小，以適應(yīng)不同的設(shè)計(jì)風(fēng)格。

總結(jié)來(lái)說(shuō)，通過(guò)巧妙運(yùn)用CSS3的高級(jí)特性，我們成功地創(chuàng)建了一組美觀且實(shí)用的梯形圓角Tab。這個(gè)過(guò)程不僅鍛煉了我們的前端技術(shù)功底，也啟發(fā)了我們?nèi)グl(fā)掘更多可能的Web設(shè)計(jì)形態(tài)。在實(shí)際項(xiàng)目中，這類(lèi)富有創(chuàng)意的UI元素將極大地提升用戶(hù)體驗(yàn)，從而讓你的網(wǎng)站或應(yīng)用脫穎而出。

、html頁(yè)面會(huì)緩存嗎？

單純的html頁(yè)面不會(huì)緩存，htm是一種標(biāo)記語(yǔ)言，用來(lái)描述和標(biāo)記的，不能實(shí)現(xiàn)緩存。html里面的JavaScript代碼是當(dāng)這個(gè)html頁(yè)面加載時(shí)瀏覽器解釋執(zhí)行，也不可以實(shí)現(xiàn)數(shù)據(jù)緩存。

二、html 頁(yè)面怎么對(duì)緩存進(jìn)行設(shè)置

根據(jù)服務(wù)器系統(tǒng)環(huán)節(jié)的不同設(shè)置方法不一樣

1、在Apache環(huán)境下

可以通過(guò)在.htaccess文件中添加下面的代碼，設(shè)置圖片的HTTP緩存和有效期（需要開(kāi)啟apache的headers模塊支持）：

其中max-age后面這個(gè)數(shù)字就是設(shè)置的緩存有效期（以秒為單位），比如上面的代碼設(shè)置了網(wǎng)站的圖片使用為期一年（秒）的HTTP緩存。

2、在Nginx下

可以通過(guò)修改nginx.conf配置文件，來(lái)修改緩存設(shè)置：

location~*\.(flv|gif|jpg|jpeg|png|ico|swf)${;access_logoff;break;}

注意：同樣的方法，可以給js和css文件設(shè)置緩存。

html緩存:html5 應(yīng)用程序緩存和瀏覽器緩存有什么區(qū)別

應(yīng)用程序緩存是會(huì)預(yù)加載的，保證齊全地供應(yīng)和保存。瀏覽器緩存沒(méi)有這些控制，不能作為程序緩存使用。不幸地，應(yīng)用程序緩存過(guò)於簡(jiǎn)單，導(dǎo)致效率不彰，預(yù)期將會(huì)被ServiceWorker取代。