indows 等操作系统会在所谓的 DNS 缓存中自动生成访问网站的临时条目。 缓存中包含的信息在定义的时间段内有效。 DNS 刷新，即清空缓存，会在时间限制到期之前从系统中删除数据。

什么是 DNS 刷新？

DNS 刷新是手动删除 DNS 缓存的临时条目的过程。 如果没有对缓存的直接干预，条目会一直存在，直到它们定义的生命周期（“生存时间”，TTL）到期。

通常，删除过程是使用系统特定的刷新 DNS 命令行工具完成的。 例如，在 Mac 上，您可以使用终端和适用于特定版本的 Apple 系统的命令。 在 Windows 中，您可以通过 CMD（即通过命令提示符）刷新 DNS，并使用命令“ipconfig /flushdns”。

什么是 DNS 缓存？

DNS 服务器用于将 www.example.com 等域名转换为数字地址。 每次访问相应的项目时，默认情况下都会通过浏览器联系这些“名称服务器”，这会略微增加它们的加载时间，并且在访问者数量众多的情况下也可能导致 DNS 服务器过载。 诸如“DNS 服务器无响应”之类的错误消息是一种常见且受人鄙视的后果。

出于这个原因，Windows 和 macOS 等操作系统为访问和解析的地址附加了自己的缓存——DNS 缓存。 这些保存了与名称解析相关的所有信息，例如 IP 地址、主机名和协议版本。 每个条目在给定时间内保持有效。 在这段时间内，直接从缓存中回答相应的查询，无需绕行到 DNS 服务器。

注意

各种应用程序，例如来自 Internet 服务提供商的 Web 浏览器或名称服务器，也有自己的 DNS 缓存以加快名称解析。

为什么常规 DNS 刷新有用？

无论单个记录的实际有效期如何，通过 DNS 刷新定期将 DNS 寄存器设置为零有三个原因：

1. 隐藏搜索行为：记录的地址（包括有效期等附加信息）提供了您页面历史记录的大致概览。 缓存地址的集合越广泛，您对自己的了解就越多。
2. 防止操纵的安全性：如果网络犯罪分子获得对 DNS 缓存的访问权限，他们可以操纵条目并将您重定向到虚假网站。 所谓的 DNS 欺骗（或 DNS 缓存中毒）旨在利用敏感的登录数据，例如网上银行的用户详细信息。
3. 解决技术问题：DNS 刷新可以解决访问 Web 应用程序时的技术问题，例如，如果由于条目过时而显示的被调用网站的版本不正确。 刷新后，负责的 DNS 服务器再次响应请求，并且与 Web 项目的连接设置再次按计划工作。

提示

您可以随时显示当前存储在系统上的 DNS 缓存。 例如，在 Windows 中，只需像打开刷新 DNS 命令一样打开命令提示符，然后输入命令“ipconfig /displaydns”。

清除 DNS 缓存：操作方法

没有规定何时进行 DNS 刷新的最佳时机——除非有一个紧急问题可以通过清空缓存来解决。 一旦您决定清除 DNS 缓存，该过程将快速而直接。 例如，Windows 用户可以进行如下操作：

DNS 缓存清理

第 1 步：调用命令行

使用组合键 [Windows] + [R] 调用“运行”对话框。 然后执行命令“cmd”启动命令提示符。

第 2 步：使用“ipconfig /flushdns”刷新 DNS

要通过 CMD 刷新 DNS，请使用命令 ipconfig。 为此，请输入以下命令并使用 enter 确认：

ipconfig /flushdns

执行成功后会收到DNS解析缓存已清除的提示信息。

最后

您无需担心 DNS 刷新会对您的 Web 体验产生任何负面影响：重置缓存后，如果之前从保存的资源记录中加载 Web 项目，则只有第一次访问该项目需要比平时更长的时间。

eep-alive

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。

官网解释：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染

应用场景

如果未使用keep-alive组件，则在页面回退时仍然会重新渲染页面，触发created钩子，使用体验不好。 在以下场景中使用keep-alive组件会显著提高用户体验，菜单存在多级关系，多见于列表页+详情页的场景如：

• 商品列表页点击商品跳转到商品详情，返回后仍显示原有信息

• 订单列表跳转到订单详情，返回，等等场景。

keep-alive的生命周期

• 初次进入时：created > mounted > activated；退出后触发 deactivated

• 再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中

项目实践

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两个页面都开启的缓存：

• 若第一次进入A页面后退出，再次进入页面时，页面不会刷新。这和目前的业务逻辑不符。我们想要的结果是A页面前进后返回，页面保持不变，而不是退出后重新进入保持不变。
• 在进入过A页面后进入B页面，经过测试后发现，B页面竟然会显示A页面的缓存，尽管url已经改变

为了解决这个问题，需要判断页面是在前进还是后退。 在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钩子时重新定位到原有位置。 具体设计思路：

1. 在deactivated钩子中记录当前滚动位置，使用localStorage：

deactivated () {

window.localStorage.setItem(this.key, JSON.stringify({

listScrollTop: this.scrollTop

}))

}

2. 在activated钩子中滚动：

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>

当然，没试过不知道行不行，应该是没问题的！