indows 等操作系統會在所謂的 DNS 緩存中自動生成訪問網站的臨時條目。 緩存中包含的信息在定義的時間段內有效。 DNS 刷新,即清空緩存,會在時間限制到期之前從系統中刪除數據。
DNS 刷新是手動刪除 DNS 緩存的臨時條目的過程。 如果沒有對緩存的直接干預,條目會一直存在,直到它們定義的生命周期(“生存時間”,TTL)到期。
通常,刪除過程是使用系統特定的刷新 DNS 命令行工具完成的。 例如,在 Mac 上,您可以使用終端和適用于特定版本的 Apple 系統的命令。 在 Windows 中,您可以通過 CMD(即通過命令提示符)刷新 DNS,并使用命令“ipconfig /flushdns”。
DNS 服務器用于將 www.example.com 等域名轉換為數字地址。 每次訪問相應的項目時,默認情況下都會通過瀏覽器聯系這些“名稱服務器”,這會略微增加它們的加載時間,并且在訪問者數量眾多的情況下也可能導致 DNS 服務器過載。 諸如“DNS 服務器無響應”之類的錯誤消息是一種常見且受人鄙視的后果。
出于這個原因,Windows 和 macOS 等操作系統為訪問和解析的地址附加了自己的緩存——DNS 緩存。 這些保存了與名稱解析相關的所有信息,例如 IP 地址、主機名和協議版本。 每個條目在給定時間內保持有效。 在這段時間內,直接從緩存中回答相應的查詢,無需繞行到 DNS 服務器。
注意
各種應用程序,例如來自 Internet 服務提供商的 Web 瀏覽器或名稱服務器,也有自己的 DNS 緩存以加快名稱解析。
無論單個記錄的實際有效期如何,通過 DNS 刷新定期將 DNS 寄存器設置為零有三個原因:
提示
您可以隨時顯示當前存儲在系統上的 DNS 緩存。 例如,在 Windows 中,只需像打開刷新 DNS 命令一樣打開命令提示符,然后輸入命令“ipconfig /displaydns”。
沒有規定何時進行 DNS 刷新的最佳時機——除非有一個緊急問題可以通過清空緩存來解決。 一旦您決定清除 DNS 緩存,該過程將快速而直接。 例如,Windows 用戶可以進行如下操作:
DNS 緩存清理
第 1 步:調用命令行
使用組合鍵 [Windows] + [R] 調用“運行”對話框。 然后執行命令“cmd”啟動命令提示符。
第 2 步:使用“ipconfig /flushdns”刷新 DNS
要通過 CMD 刷新 DNS,請使用命令 ipconfig。 為此,請輸入以下命令并使用 enter 確認:
ipconfig /flushdns
執行成功后會收到DNS解析緩存已清除的提示信息。
您無需擔心 DNS 刷新會對您的 Web 體驗產生任何負面影響:重置緩存后,如果之前從保存的資源記錄中加載 Web 項目,則只有第一次訪問該項目需要比平時更長的時間。
有時候我們不希望組件被重新渲染影響使用體驗;或者處于性能考慮,避免多次重復渲染降低性能。而是希望組件可以緩存下來,維持當前的狀態。這時候就可以用到keep-alive組件。
官網解釋:<keep-alive> 包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們。和 <transition> 相似,<keep-alive> 是一個抽象組件:它自身不會渲染一個 DOM 元素,也不會出現在父組件鏈中。 當組件在 <keep-alive> 內被切換,它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執行。 在 2.2.0 及其更高版本中,activated 和 deactivated 將會在 <keep-alive> 樹內的所有嵌套組件中觸發。 主要用于保留組件狀態或避免重新渲染
如果未使用keep-alive組件,則在頁面回退時仍然會重新渲染頁面,觸發created鉤子,使用體驗不好。 在以下場景中使用keep-alive組件會顯著提高用戶體驗,菜單存在多級關系,多見于列表頁+詳情頁的場景如:
1.更改App.vue
<div id="app" class='wrapper'>
<keep-alive>
<!-- 需要緩存的視圖組件 -->
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要緩存的視圖組件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
2.在路由中設置keepAlive
{
path: 'list',
name: 'itemList', // 商品管理
component (resolve) {
require(['@/pages/item/list'], resolve)
},
meta: {
keepAlive: true,
title: '商品管理'
}
}
3.更改 beforeEach鉤子
這一步是為了清空無用的頁面緩存。 假設現在A、B兩個頁面都開啟的緩存:
為了解決這個問題,需要判斷頁面是在前進還是后退。 在beforeEach鉤子添加代碼:
let toDepth=to.path.split('/').length
let fromDepth=from.path.split('/').length
if (toDepth < fromDepth) {
console.log('back...')
from.meta.keepAlive=false
to.meta.keepAlive=true
}
keep-alive并不會記錄頁面的滾動位置,所以我們在跳轉時需要記錄當前的滾動位置,在觸發activated鉤子時重新定位到原有位置。 具體設計思路:
deactivated () {
window.localStorage.setItem(this.key, JSON.stringify({
listScrollTop: this.scrollTop
}))
}
this.cacheData=window.localStorage.getItem(this.key) ?JSON.parse(window.localStorage.getItem(this.key)) : null
$('.sidebar-item').scrollTop(this.cacheData.listScrollTop)
歡迎在下方留言討論,小郭將與你一起成長,想看更多內容可關注同名公眾號“一郭鮮”
要:禁止input緩存,禁止select緩存
有時候,我們頁面的輸入框,我們再頁面里輸入內容后,并不保存,但是刷新頁面會發現值為輸入的頁面,完全沒有從新去從后臺取值,這是怎么回事呢?如下:
雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆雷姆雷姆拉姆拉姆
<input type="text" value="">
<select>
<option value="1">1</option>
<option value="2">1</option>
</select>
其實多數瀏覽器默認會緩存input的值,只有使用ctl+F5強制刷新的才可以清除緩存記錄。如果不想讓瀏覽器緩存input的值,很簡單,只需要價格屬性即可:autocomplete=”off”。
例如上面例子,改為如下就不會緩存啦:
<input type="text" autocomplete="off" value="">
<select autocomplete="off">
<option value="1">1</option>
<option value="2">1</option>
</select>
聽說還有一種直接加在form表單里也可以,但是因為我已經很久沒有用form表單提交數據啦,都是用ajax異步提交的,所以我就沒有采取這種方法,也很簡單的如下:
<form action="#" autocomplete="off">
<input type="text" value/>
</form>
當然,沒試過不知道行不行,應該是沒問題的!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。