回过头再看 计算机体系结构2----缓存cache

本文介绍了缓存的基本概念及其在计算机系统中的作用,详细解析了CPU缓存的层级结构,包括L1、L2和L3缓存的工作原理及特点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是缓存(cache)?
     CPU缓存(Cache Memory)是位于CPU与内存之间的临时存储器它的容量比内存小但交换速度快。在缓存中的数据是内存中的一小部分,但这一小部分是短时间内CPU即将访问的,当CPU调用大量数据时,就可避开内存直接从缓存中调用,从而加快读取速度。就像把工具和材料搬上工作台一样,这样会比用时现去仓库取更方便。
 

为什么有缓存?
     众所周知, CPU是计算机的大脑, 它负责执行程序的指令; 内存负责读写数据, 包括程序自身数据. 同样大家都知道, 内存比CPU慢很多. 其实在30年前, CPU的频率和内存总线的频率在同一个级别, 访问内存只比访问CPU寄存器慢一点儿. 由于内存的发展都到技术及成本的限制, 现在获取内存中的一条数据大概需要200多个CPU周期(CPU cycles), 而CPU寄存器一般情况下1个CPU周期就够了.所以我们需要缓存技术。也就是在内存和CPU之间加入多层缓存   

缓存是为了解决CPU速度和内存速度的速度差异问题那么把数据放至离CPU更近的缓存, 会给程序带来很大的速度提升所以内存中被CPU访问最频繁的数据和指令被复制入CPU中的缓存,这样CPU就可以不经常到象“蜗牛”一样慢的内存中去取数据了,CPU只要到缓存中去取就行了,缓存的读取速度要比内存快很多。
      例如, 做一个循环计数, 把计数变量放到缓存里,就不用每次循环都往内存存取数据了.这样就性能很好,
由此可见,在CPU中加入缓存是一种高效的解决方案,这样整个内存储器(缓存+内存)就变成了既有缓存的高速度,又有内存的大容量的存储系统了。
     内存与CPU的速度相差太远, 于是CPU设计者们就给CPU加上了缓存(CPU Cache),同样网页浏览器为了加快速度,会在本机存缓存以前浏览过的数据; 传统数据库或NoSQL数据库为了加速查询, 常在内存设置一个缓存, 减少对磁盘(慢)的IO. 

但是缓存对CPU的性能影响很大,主要是因为CPU的数据交换顺序和CPU与缓存间的带宽引起的。
     这里要特别指出的是:
     1.因为缓存只是内存中少部分数据的复制品,所以CPU到缓存中寻找数据时,也会出现找不到的情况(因为这些数据没有从内存复制到缓存中去),这时CPU还是会到内存中去找数据,相当于浪费了去缓存找的时间,这样系统的速度就慢下来了,不过CPU会把这些数据复制到缓存中去,以便下一次不要再到内存中去取。
     2.因为随着时间的变化,被访问得最频繁的数据不是一成不变的,也就是说,刚才还不频繁的数据,此时已经需要被频繁的访问,刚才还是最频繁的数据,现在又不频繁了,所以说缓存中的数据要经常按照一定的算法来更换,这样才能保证缓存中的数据是被访问最频繁的。也就是每次都要复制新的




[引申]
CPU缓存
下面是CPU Cache的简单示意图

随着多核的发展, CPU Cache分成了三个级别: L1, L2, L3. 级别越小越接近CPU, 所以速度也更快, 同时也代表着容量越小. L1是最接近CPU的, 它容量最小, 例如32K, 速度最快,每个核上都有一个L1 Cache(准确地说每个核上有两个L1 Cache, 一个存数据 L1d Cache, 一个存指令 L1i Cache). L2 Cache 更大一些,例如256K, 速度要慢一些, 一般情况下每个核上都有一个独立的L2 Cache; L3 Cache是三级缓存中最大的一级,例如12MB,同时也是最慢的一级, 在同一个CPU插槽之间的核共享一个L3 Cache.

从CPU到 大约需要的CPU周期 大约需要的时间(单位ns)
寄存器1 cycle 
L1 Cache~3-4 cycles~0.5-1 ns
L2 Cache~10-20 cycles~3-7 ns
L3 Cache~40-45 cycles~15 ns
跨槽传输 ~20 ns
内存~120-240 cycles~60-120ns
就像数据库cache一样, 获取数据时首先会在最快的cache中找数据, 如果没有命中(Cache miss) 则往下一级找, 直到三层Cache都找不到,那只要向内存要数据了. 一次次地未命中,代表取数据消耗的时间越长.

### el-input 组件的输入缓存问题或实现方法 在 Vue 和 Element UI 中,`el-input` 是常用的输入框组件。为了实现 `el-input` 的输入内容缓存功能,可以通过以下几种方式来解决: #### 方法一:通过浏览器原生属性控制自动填充行为 可以利用 HTML 原生的 `autocomplete` 属性来设置是否允许浏览器自动填充表单字段的内容。如果希望禁用自动填充,则可以在模板中将该属性设为 `"off"`。 ```html <el-input v-model="password" placeholder="请输入密码" autocomplete="off" name="password"></el-input> ``` 这种方法适用于简单的场景,但在某些情况下可能无法完全阻止浏览器的行为[^1]。 --- #### 方法二:动态调整 input 类型防止缓存 当遇到浏览器强制缓存的情况时,可以通过动态改变 `<input>` 元素的类型(例如从 `text` 切换到其他类型再切回),从而绕过浏览器的缓存机制。 ```javascript // 动态更改 type 来清除缓存 this.$nextTick(() => { const input = this.$refs.passwordInput; if (input) { input.setAttribute('type', 'password'); setTimeout(() => { input.setAttribute('type', 'text'); // 可选操作 }, 0); } }); ``` 此方法能够有效应对部分浏览器的顽固缓存问题。 --- #### 方法三:基于 Vuex 或 LocalStorage/SessionStorage 存储用户输入的历史记录 对于更复杂的业务需求,比如保存用户的多次输入作为历史记录并提供查询、删除等功能,推荐使用 Vuex 或者 Web Storage API (`localStorage`, `sessionStorage`) 来管理这些数据。 以下是具体实现代码示例: ##### 使用 localStorage 实现简单缓存逻辑 ```javascript methods: { saveToCache(value, key) { let cacheData = JSON.parse(localStorage.getItem(key)) || []; if (!cacheData.includes(value.trim())) { // 避免重复存储 cacheData.push(value.trim()); localStorage.setItem(key, JSON.stringify(cacheData)); } }, loadFromCache(key) { return JSON.parse(localStorage.getItem(key)) || []; } } ``` 绑定到 `el-input` 上: ```vue <template> <div> <el-input v-model="searchText" @blur="saveToCache(searchText, 'historySearch')" :placeholder="'点击加载历史'" clearable></el-input> <!-- 显示历史 --> <ul> <li v-for="(item, index) in historyList" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { searchText: '', historyList: [] }; }, created() { this.historyList = this.loadFromCache('historySearch'); }, methods: { saveToCache(value, key) { let cacheData = JSON.parse(localStorage.getItem(key)) || []; if (!cacheData.includes(value.trim()) && value.length > 0) { cacheData.push(value.trim()); localStorage.setItem(key, JSON.stringify(cacheData)); this.historyList = cacheData; // 更新视图 } }, loadFromCache(key) { return JSON.parse(localStorage.getItem(key)) || []; } } }; </script> ``` 上述代码展示了如何结合 `@blur` 事件监听器,在失去焦点时触发保存动作,并读取本地存储中的历史记录进行渲染[^3]。 --- #### 方法四:针对性能优化的大规模表格嵌套场景下的缓存策略 如果项目中有大量 `el-input` 被用于复杂表格编辑模式下,可能会因为 DOM 渲染过多而导致卡顿现象。此时可通过虚拟列表技术或者按需加载的方式减少不必要的计算开销。 一种常见的做法是对超出当前分页范围的数据隐藏其关联的 `el-input`,仅保留可见区域内的实例化对象。这样既保证了用户体验流畅度又降低了内存占用率[^4]。 --- ### 总结 以上四种方法分别覆盖了不同的应用场景和技术层面的要求。开发者可以根据实际项目的具体情况选择合适的方案实施。无论是单纯地屏蔽掉浏览器默认行为还是构建一套完整的自定义缓存体系结构都具有重要意义。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值