php建站软件,做明星网站可以做那些子网页,城阳区网站建设公司,杭州公司牌照申请条件文章目录 前言为什么需要缓存#xff1f;DNS缓存缓存读写顺序缓存位置memory cache#xff08;浏览器本地缓存#xff09;disk cache#xff08;硬盘缓存#xff09;重点#xff01;#xff01;#xff01; 缓存策略 - 强缓存和协商缓存1#xff09;强缓存ExpiresCach… 文章目录 前言为什么需要缓存DNS缓存缓存读写顺序缓存位置memory cache浏览器本地缓存disk cache硬盘缓存重点 缓存策略 - 强缓存和协商缓存1强缓存ExpiresCache-Control 2协商缓存Last-Modify / If-Modify-SinceETag / If-None-Match 不需要缓存的时候 前言
作为一个前端开发者每天都在和浏览器打交道对于浏览器缓存相信都不会陌生同时它也是我们日常开发中存在的一个非常重要的优化手段无论在节省带宽、提高加载和渲染速度、减少网络阻塞以及提高用户体验上都有重要的作用。
为什么需要缓存
减少用户等待时间提升用户体验直接从内存或磁盘中取缓存数据肯定是比从服务器请求更快的。减少了冗余的数据传输。减少服务器的负担大大提升了网站性能。
DNS缓存
这是我们输入网址后最开始的一个缓存通常我们输入一个网址它包含了域名和端口可以指定唯一的IP地址然后建立连接进行通信而域名查找IP地址的过程就是DNS解析。
www.baidu.com (域名) - DNS解析 - 180.76.76.76 (IP地址)这个过程会对网络请求带来一定的损耗所以浏览器在第一次获取到IP地址后会将其缓存起来。下次相同域名再次发起请求时浏览器会先查找本地缓存如果缓存有效则会直接返回该IP地址否则会继续开始寻址之旅。 关于寻址过程请看我之前的文章 浏览器从输入URL到页面渲染加载的过程浏览器知识体系整理
缓存读写顺序 备注 memory cache 》浏览器本地缓存 disk cache 》 硬盘缓存 先在 浏览器缓存 中查找如果有直接加载。 如果 浏览器缓存 中不存在则在 硬盘 中查找这里又细分 1如果有强缓存且未失效则使用强缓存不请求服务器。 2如果有强缓存但已失效使用协商缓存比较后确定 304 还是 200 如果硬盘中也不存在向服务器发起网络请求 请求获取的资源缓存到硬盘和内存。
下面将从 缓存位置 和 缓存策略 两个角度介绍浏览器缓存。
缓存位置
memory cache浏览器本地缓存
是浏览器内存中的缓存相比于 disk cache 它的特点是读取速度快但容量小且时效性短不受开发者控制也不受HTTP协议头的约束。一旦浏览器 tab 页关闭memory cache 就将被清空再次重新打开相同页面时不再出现from memory cache的情况。
disk cache硬盘缓存重点
硬盘缓存取决于HTTP中的响应头信息它也是浏览器缓存中最重要的内容。因为DNS缓存它主要是做一个ip地址查找并且是自主完成的memory cache 也是不受控制算是一个黑盒。所以剩下的可以受我们控制的硬盘缓存的重要性就不言而喻了大多优化手段也是针对硬盘缓存。
根据 HTTP 响应头的各类字段进行判定资源的缓存规则比如是否可以缓存什么时候过期过期之后是否需要重新发起请求呢相比于 memory cache 的 disk cache 拥有存储空间时间长等优点。
HTTP所控制下的 disk cache 缓存分为强缓存和协商缓存。
缓存策略 - 强缓存和协商缓存 根据 HTTP header 的字段将缓存分为两个部分分别是强缓存和协商缓存。
强缓存使用强缓存策略时如果缓存资源在过期时间内是的话直接从本地缓存中读取资源不与服务器进行通信。协商缓存如果强缓存失效后客户端将向服务器发出请求进行协商缓存。浏览器携带上一次请求返回的响应头中的 缓存标识 向服务器发起请求如ETag、Last-Modified等由服务器判断资源是否更新。如果资源没有更新则返回状态码 304 Not Modified告诉浏览器可以使用本地缓存否则返回新的资源内容。强缓存优先级高于协商缓存但是协商缓存可以更加灵活地控制缓存的有效性。
强缓存的字段有Expires 和 Cache-Control。协商缓存的字段有Last-Modified 和 ETag。
当Expires 和 Cache-Control 都被设置的时候浏览器会优先考虑后者。当 Last-Modified 和 ETag 都被设置的时候浏览器会优先考虑后者。
1强缓存
当客户端发出一个请求到服务器服务器希望你把资源缓存起来于是在响应头中加入了这些内容
Cache-Control: max-age3600 // 我希望你把这个资源缓存起来缓存时间是3600秒1小时
Expires: Mon Oct 17 2023 16:10:32 GMT // 到达指定时间过期
Date: Mon Oct 16 2023 13:30:30 GMT
Etag:W/121-171ca289ebf// (后面协商缓存内容)这个资源的编号是W/121-171ca289ebf
Last-Modified: Mon Oct 16 2023 09:20:10 GMT // (后面协商缓存内容)这个资源的上一次修改时间Cache-Control和 Expires分别是HTTP/1.1 和 HTTP/1.0的内容为了兼容 HTTP/1.0 和 HTTP/1.1实际项目中两个字段我们都会设置。
浏览器收到这个响应之后就会做下面的事情
浏览器把这次请求得到的响应体缓存到本地文件中浏览器标记这次请求的请求方法和请求路径浏览器标记这次缓存的时间是3600秒浏览器记录服务器的响应时间是格林威治时间2023-10-16 09:20:10
这一次的记录非常重要它为以后浏览器要不要去请求服务器提供了依据。
判断缓存是否有效就是通过把 max-age Date得到一个过期时间看看这个过期时间是否大于当前时间如果是则表示缓存还没有过期仍然有效如果不是则表示缓存失效。
Expires
Expires 是HTTP/1.0的字段表示缓存过期时间。Expires 需要在服务端配置具体配置也根据服务器而定浏览器会根据该过期日期与客户端时间对比如果过期时间还没到则会去缓存中读取该资源如果已经到期了则浏览器判断为该资源已经过期需要重新从服务端获取。由于 Expires 是一个绝对时间所以会局限于客户端时间的准确性从而可能会出现浏览器判断缓存失效的问题。所以出现了Cache-Control如下是一个 Expires 示例是一个日期/时间
Expires: Mon Oct 17 2023 16:10:32 GMT 到了HTTP/1.0版本已更改为通过Cache-Control的max-age来记录了。
Cache-Control
Cache-Control 是 http1.1 时出现的响应头信息主要通过Cache-Control的max-age来记录。下面是几个比较常用的设置值
max-age 最大缓存时间它是一个相对时间值的单位是秒在该时间内浏览器不需要向浏览器请求。这个设置解决了 Expires 中由于客户端系统时间不准确而导致缓存失效的问题。no-cache 跳过强缓存直接进入协商缓存阶段。no-store 禁止使用缓存每次都要重新请求数据不会被缓存到内存和硬盘。public 响应可以被任何对象客户端、代理服务器等缓存。private响应只能被客户端缓存。
Cache-Control 的值是可以混合使用的比如
Cache-Control: private, max-age0, no-cache当强缓存失效的时候则会进入到协商缓存阶段。
2协商缓存
一旦发现强缓存无效浏览器会发送一个请求到服务器服务器根据请求header中的部分信息来判断资源是否更新。如果没有更新返回304重定向告诉浏览器资源未更新可继续使用本地的缓存否则返回 状态码200 和 新的资源内容浏览器缓存新的内容。
这里的请求头header就是加入了
If-Modified-Since: Mon Oct 16 2023 09:20:10 GMT 你好你曾经告诉我这个资源的上一次修改时间是格林威治时间2023-10-16 09:20:10请问这个资源在这个时间之后有发生变动吗
If-None-Match: W/121-171ca289ebf 你好你曾经告诉我这个资源的编号是W/121-171ca289ebf请问这个资源的编号发生变动了吗其实响应头和请求头的对应关系就是 Last-Modify/If-Modify-Since 和 ETag/If-None-Match。
之所以要发两个信息是为了兼容不同的服务器因为有些服务器只认If-Modified-Since有些服务器只认If-None-Match有些服务器两个都认,但是一般来说 If-None-Match 的优先级高于 If-Modified-Since
Last-Modify / If-Modify-Since
浏览器第一次请求一个资源的时候服务器返回的 header 中会加上 Last-ModifyLast-Modify是一个时间标识该资源的最后修改时间。 当浏览器再次请求该资源时请求头中会包含 If-Modify-Since该值为缓存之前返回的 Last-Modify。服务器收到 If-Modify-Since 后根据资源的最后修改时间判断资源是否更新。
资源未更新返回304重定向表示资源未更新可以继续使用缓存中的资源。资源更新返回200状态码返回新的资源并进行硬盘和浏览器缓存。
缺点如果资源更新的速度是小于 1 秒的那么该字段将失效因为 Last-Modified 时间是精确到秒的。所以有了 ETag。
ETag / If-None-Match
与 Last-Modify/If-Modify-Since 不同的是Etag/If-None-Match 返回的是一个校验码。ETag 可以保证每一个资源是唯一的资源变化都会导致 ETag 变化。服务器根据浏览器上发送的 If-None-Match 值来判断是否缓存。 与 Last-Modified 不一样的是当服务器返回 304 Not Modified 的响应时由于 ETag 重新生成过response header 中还会把这个 ETag 返回即使这个 ETag 跟之前的没有变化。
不需要缓存的时候
并不是所有请求都能被缓存无法被浏览器缓存的请求如下
HTTP 信息头中包含 Cache-Control: no-cache pragma: no-cacheHTTP1.0或 Cache-Control: max-age0 等告诉浏览器不用缓存的请求需要根据 Cookie、认证信息等决定输入内容的动态请求是不能被缓存的经过 HTTPS 安全加密的请求POST 请求无法被缓存HTTP 响应头中不包含 Last-Modified/Etag也不包含 Cache-Control/Expires 的请求无法被缓存
本文参考 一文读懂浏览器缓存 实践这一次,彻底搞懂浏览器缓存机制 浏览器缓存缓存策略看完就懂
