摘要：协商缓存当浏览器判断不是强缓存，就会发向服务器发请求，判断是否是协商缓存。如果是，服务器会返回，浏览器从缓存中加载。若这两个字段相同，则代表资源没有变化，服务器返回，浏览器从缓存中加载。
加快页面打开速度
减轻服务器压力
减少网络损耗
mate标签控制
1、content-type(文档内容类型：用于设定文档的类型和字符集)
2、expires(期限：可以用于设定网页的到期期限)
3、pragma（cashe模式：即是否从缓存中访问网页内容）
4、refresh(刷新：等待一定时间自动刷新或跳转到其他url)
// 文档类型 // 必须是 GMT 格式 // 是否设置缓存 // 等待一定时间自动跳转
接下来说点有用的，浏览器会通过Response header信息，来确认是否缓存，怎么缓存。
强缓存
协商缓存
先说强缓存：
在控制台资源加载 size栏我们会看到架子啊资源的大小，如果是缓存直接在本地读取 （from memory cache 来自内存缓存）（from disk cache 来自磁盘缓存）
浏览器加载资源时先判断头信息是否包含Cache-Control和Expires这两个属性，Expires是http1.0，Cache-Control是http1.1,从版本上来说肯定是Cache-control更强一些，毕竟不能越升级越low，约定也是两个同时存在Cache-control优先级更高。
截图为js的Response header信息，包含Cache-control和Expires，但从字面上我们能看出Expires设置了一个时间，我们猜它应该是过期时间，擦居然猜对了。我们再猜一下Cache-control：一坨字段，max-age=31536000，我猜也是过期时间，哈哈又猜对了，不逗比了挨个说说
Expires：设置浏览器缓存时间，时间是绝对时间，从设置的值上可以看出是个日期，浏览器收到Response时看看有没有Expires字段有的话缓存头信息和资源，再次请求时查看缓存时间过没过，没过在缓存拿出来，过了重新请求。
Cache-control：这个承载值就多了
max-age=xxx：缓存的内容将在 xxx 秒后失效，这个时间是个时间间隔相对时间。
public：所有内容都将被缓存（客户端和代理服务器都可缓存）
private：内容只缓存到私有缓存中（仅客户端可以缓存，代理服务器不可缓存）
no-cache：必须先与服务器确认返回的响应是否被更改，然后才能使用该响应来满足后续对同一个网址的请求。因此，如果存在合适的验证令牌（ETag），no-cache 会发起往返通信来验证缓存的响应，如果资源未被更改，可以避免下载
no-store：所有内容都不会被缓存或 Internet 临时文件中
must-revalidation/proxy-revalidation：如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证
服务端通过If-Modified-Since（Last-Modified）和If-None-Match（Etag）这两个属性的值来判断缓存是否失效的。
2、协商缓存：当浏览器判断不是强缓存，就会发向服务器发请求，判断是否是协商缓存。如果是，服务器会返回304Not Modified，浏览器从缓存中加载。那什么又是协商缓存呢？
Last-Modified和If-Modified-Since字段：
1、浏览器第一次向服务器发请求，服务器返回资源并在response header加上Last-Modified字段，表示资源最后修改的时间。
2、浏览器再次请求这个资源时，请求头会加上If-Modified-Since字段。若这两个字段一样，说明资源没有修改过，返回304Not Modified，浏览器从缓存中获取资源。若这两个字段不一样，说明资源修改过，服务器正常返回资源。
ETag、If-None-Match：
但有时候服务器上资源有变化，单最后修改时间没更新，则引出下面两个字段。
1、浏览器第一次向服务器请求，服务器返回资源并在response header上加ETag字段。表示资源本身，资源有变化，则该字段有变化。
2、浏览器再次向服务器请求这个资源时，请求头携带If-None-Match字段。若这两个字段相同，则代表资源没有变化，服务器返回304Not Modified，浏览器从缓存中加载。若两个字段不同，证明资源有变动，服务器正常返回资源。
参考：
https://juejin.im/post/5a7a8e...
https://juejin.im/post/59c602...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/100511.html
摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。 如何提升页面渲染效率 - 前端 - 掘金Web页面的性能 我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...
摘要：前端是应用服务器处理之前的部分，前端主要包括等各种资源，针对不同的资源有不同的优化方式。常见方法合并多个文件和文件，利用整合图像，使用在实际的页面嵌入图像数据，合理设置缓存等。 web前端是应用服务器处理之前的部分，前端主要包括：HTML,CSS,javascript,image等各种资源，针对不同的资源有不同的优化方式。 内容优化 (1)减少HTTP请求数:这条策略是最重要最有效...
摘要：是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。 web前端性能优化主要分为以下几个板块: 加载优化 DNS预解析 合并img、css、javascript文件，减少http请求 缓存一切可缓存资源 使用长Cache 使用外联式引用css、javascript文件 压缩HTML、css、jav...
摘要：是具有此属性的域名不需要用户点击链接就在后台解析，而域名解析和内容载入是串行的网络操作，所以这个方式能减少用户的等待时间，提升用户体验。 web前端性能优化主要分为以下几个板块: 加载优化 DNS预解析 合并img、css、javascript文件，减少http请求 缓存一切可缓存资源 使用长Cache 使用外联式引用css、javascript文件 压缩HTML、css、jav...
阅读 3532·2021-09-22 15:50
阅读 3235·2019-08-30 15:54
阅读 2750·2019-08-30 14:12
阅读 3059·2019-08-30 11:22
阅读 2084·2019-08-29 11:16
阅读 3576·2019-08-26 13:43
阅读 1192·2019-08-23 18:33
阅读 923·2019-08-23 18:32
