浏览器的缓存机制

前言

这也是一道很基础的面试常考题。当涉及到网络浏览器的速度和性能时,缓存机制是一个不可忽视的关键因素。无论是浏览网页、查看图片还是播放视频,缓存都发挥着至关重要的作用。缓存机制我们就从强缓存和协商缓存两个方面来说。

强缓存

  1. Cache-Control

    其实缓存机制简单来说就是对一部分的请求将其结果缓存在浏览器中,在有效时间内重复请求则无需再次访问服务器。直接从浏览器的缓存资源中获取即可。 第一个Cache-Control 就是通过在请求头中设置Cache-Control:max-age ,则在max-age 内重复请求则无需访问服务器。

js 复制代码
res.writeHead(status, {
'Content-Type': 'text/html;charset="utf-8"', 
'Cache-Control': 'max-age=86400'
})
  1. Expires Expires 和第一个Cache-Control类似,都是直接在响应头中设置过期时间即可。

协商缓存

其实浏览器本身并没有强缓存和协商缓存的区分,这些都是程序员为了工作中方便称呼而取的名字。协商缓存本质上其实就是改写了缓存过期的机制,让缓存的生命周期在一个合理的范围,不会太早过期也不会在浏览器中保存过于长久。增强用户的体验。

  1. If-None-Match:etag

If-None-Match:etage 在浏览器首次请求返回数据时会带上这个etag,浏览器端就将其保存。在下一次请求时就带上并和服务端保存的进行对比,如果一致直接返回304从本地缓存中提取结果。不一致则重新请求并带回新的etag。这个etag可以直接使用缓存的整个文件进行一个转码,这样在文件修改时就能够生成一个新的etag。

  1. If-Modified-Since

这个用法也和If-None-Match:etag 是差不多的,这个一般是通过文件的last-modified属性,和上一次保存的last-modified时间戳进行对比,如果上一次的时间早于这次返回的时间也进行一个更新。

尾声

本文主要目的是为了带大家了解浏览器缓存机制这个概念,可能讲的并没有很深入,但是可以让你在面试的时候回答面试官的问题了。但是还是建议大家可以深入了解一下,因为缓存机制在平时的工作中也是能够用到的。我们还是需要会使用的。

相关推荐
前端摸鱼匠3 分钟前
【AI大模型春招面试题13】残差连接(Residual Connection)与层归一化(Layer Norm)在Transformer中的作用?
人工智能·深度学习·语言模型·面试·transformer·求职招聘
月光宝盒造梦师6 分钟前
Ant Design Ellipsis 中的判断逻辑 isEleEllipsis 方法非常消耗性能
javascript·react·优化
gechunlian8820 分钟前
SpringBoot3+Springdoc:v3api-docs可以访问,html无法访问的解决方法
前端·html
驾驭人生36 分钟前
ASP.NET Core 实现 SSE 服务器推送|生产级实战教程(含跨域 / Nginx / 前端完整代码)
服务器·前端·nginx
酉鬼女又兒1 小时前
零基础快速入门前端ES6 核心特性详解:Set 数据结构与对象增强写法(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·javascript·职场和发展·蓝桥杯·es6
慧一居士1 小时前
Vue项目中,子组件调用父组件方法示例,以及如何传值示例,对比使用插槽和不使用插槽区别
前端·vue.js
我是伪码农1 小时前
HTML和CSS复习
前端·css·html
林恒smileZAZ2 小时前
前端实现进度条
前端
前端老石人2 小时前
邂逅前端开发:从基础到实践的全景指南
开发语言·前端·html
阿珊和她的猫2 小时前
以用户为中心的前端性能指标解析
前端·javascript·css