资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/浏览器缓存小结

浏览器缓存小结

CollinPeng / 2724人阅读

摘要：原文链接浏览器缓存浏览器缓存强缓存协商缓存强缓存释义客户端第一次问服务器要某个资源时，服务器丢还给客户端所请求的这个资源同时，告诉客户端将这个资源保存在本地，并且在未来的某个时点之前如果还需要这个资源，直接从本地获取就行了，不用向服务器请求

原文链接:浏览器缓存

浏览器缓存 强缓存 & 协商缓存

强缓存
释义: 客户端第一次问服务器要某个资源时，服务器丢还给客户端所请求的这个资源同时，告诉客户端将这个资源保存在本地，并且在未来的某个时点之前如果还需要这个资源，直接从本地获取就行了，不用向服务器请求.这种方式缓存下来的资源称为强缓存.

Expires & Cache-Control:max-age

Expires:
该字段是http1.0时的规范，值为一个绝对时间的GMT格式的时间字符串，代表缓存资源的过期时间，在这个时点之前，即命中缓存.

Cache-Control:
该字段是http1.0时的规范，值为一个绝对时间的GMT格式的时间字符串，代表缓存资源的过期时间，在这个时点之前，即命中缓存.
参数:
no-cache: 如果请求头部包含no-cache指令，表示客户端不接收缓存过的响应.中间缓存服务器必须将请求转发给给源服务器. 浏览器强制刷新(window下ctrl+F5)就是这个原理，所以的请求都设置no-cache
no-store: 暗示请求和响应包含机密信息，不能进行缓存.
区分: no-store才是真正的不缓存
max-age: 该指令用来标识缓存资源的最大有效期. 如果max-age=0，就会向源服务器发送请求进行缓存资源新鲜度的验证.浏览器普通刷新F5

cache-directive 作为请求首部时，cache-directive 的可选值有：

字段名称 说明
no-cache 告知（代理）服务器不直接使用缓存，要求向原服务器发起请求.
no-store 所有内容都不会保存到缓存或者Internet临时文件中.
max-age=delta-seconds 告知 （代理）服务器，客户端希望接收一个存在时间不大于detal-seconds秒的资源.
max-stale[=delta-seconds 告知 （代理）服务器，客户端愿意接收一个超过缓存时间的资源，若有定义delta-seconds则为delta-seconds，若没有则为任意超出的时间.
min-fresh=delta-seconds 告知 （代理）服务器，客户端希望接收一个在小于delta-seconds秒内被更新过的资源.
no-transform 告知 （代理）服务器，客户端希望获取实体数据没有被转换（比如压缩）过的资源.
only-if-cached 告知 （代理）服务器，客户端希望获取换成的内容(若有)，而不用向原来服务器请求.
cache-extension 自定义扩展值，若服务器不识别改值则会被忽略.

cache-directive 作为响应首部时，cache-directive 的可选值有：

字段名称 说明
public 表明任何情况下都得缓存该资源（即使是需要HTTP认证的资源）.
Private[="field-name"] 表明返回报文中全部或者部分（若指定field-name，则为field-name的字段数据）仅开放给某些用户（服务器指定的share-user,如代理服务器）做缓存使用，其他用户则不能缓存这些数据.
no-cache 不直接使用缓存，要向服务器发起（新鲜度校验）请求.
no-store 所有内容都不会保存到缓存或者Internet临时文件中.
no-transform 告知客户端缓存文件时不得对实体数据做任何改变.
only-if-cached 告知（代理）服务器，客户端希望获取缓存的内容（如果有），而不向原来服务器发起请求.
must-revalidate 当前资源一定是向原服务器发起验证请求的，若请求失败会返回504（而非代理服务器上的缓存）.
proxy-revalidate 与must-revalidate类似，但仅能应用于共享缓存（如代理）.
max-age=delta-seconds 告知客户端，该资源在delta-seconds秒内是新鲜的，无需向 服务器发起请求.
s-max-age=delta-seconds 同max-age，但仅用于共享缓存（如代理）.
cache-extension 自定义扩展值，若服务器不识别改值则会被忽略. 
在请求头中max-age=0与no-cache的区别？
   返回的状态来看：no-cache都是200，而max-age可能是304（如果浏览器有缓存）.  
   请求参数：max-age请求头一般会携带If-Modified-Since或If-None-Match字段进行新鲜度验证，而no-cache不会携带. F5刷新是max-age=0来实现，而强制刷新(Ctrl+F5)是通过no-cache实现.  

异同: Expires是HTTP 1.0+的首部，用来指定一个绝对的过期日期，依赖客户端时间设置的准确性,缓存时间是相对服务器上的时间而言的.  
而max-age是HTTP/1.1的Cache-Control的一个字段，用来指定文档的最大使用时间.

协商缓存
释义: 客户端第一次问服务器要某个资源时，服务器丢还给客户端所请求的这个资源同时，将该资源的一些信息（文件摘要、或者最后修改时间）也返回给客户端，告诉客户端将这个资源缓存在本地.当客户端下一次需要这个资源时，将请求以及相关信息（文件摘要、或者最后修改时间）一并发送给服务器，由服务器来判断客户端缓存的资源是否需要更新：如不需要更新，就直接告诉客户端获取本地缓存资源；如需要更新，则将最新的资源连同相应的信息一并返回给客户端.

Last-Modified & If-Modified-Since & Etag & If-None-Match

Last-Modidied & If-Modified-Since:

Last-Modified: 为实体首部字段，值为资源最后更新时间，随服务器response返回.

If-Modified-Since: 为请求首部字段，通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存，浏览器从缓存中获取资源；如果有过修改，则服务器返回资源，同时返回新的Last-Modified时间.

Etag & If-None-Match:

Etag: 为相应头部字段，表示资源内容的唯一标识，随服务器response返回.

If-None-Match: 为请求头部字段，服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存，浏览器从缓存中获取资源；如果有过修改，则服务器返回资源，同时返回新的ETag.

不能缓存的请求

HTTP信息头中包含Cache-Control:no-cache，pragma:no-cache（HTTP1.0），或Cache-Control:max-age=0等告诉浏览器不用缓存的请求. Cache-Control: no-cache：这个很容易让人产生误解，使人误以为是响应不被缓存.实际上Cache-Control: no-cache是会被缓存的，只不过每次在向客户端（浏览器）提供响应数据时，缓存都要向服务器评估缓存响应的有效性.

需要根据Cookie，认证信息等决定输入内容的动态请求是不能被缓存的.

经过HTTPS安全加密的请求.

POST请求无法被缓存.

HTTP响应头中不包含Last-Modified/Etag，也不包含Cache-Control/Expires的请求无法被缓存.

浏览器缓存机制示意图

云服务器 GPU云服务器 浏览器缓存 清除浏览器缓存 cdn浏览器缓存 webrtc浏览器接收缓存

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/62040.html

相关文章

  • 浏览器缓存小结

    摘要：告知浏览器我希望内容来自缓存我并不关心被缓存响应是否是新鲜的。客户端请求验证缓存的有效性。 因为最近面试经常会被问到304缓存的问题，因此在网上搜集了各种资料，小记一下 缓存有浏览器缓存，代理服务器缓存，服务端缓存等，这里着重记一下浏览器缓存 浏览器第一次像服务器发起请求时，如果有缓存，浏览器在返回信息里面会带上相应的缓存策略，下面介绍一下有哪些常用的缓存策略。 Expires 过期...

    raise_yang 评论0 收藏0

  • 高性能JavaScript（文档）

    摘要：最近在全力整理高性能的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。 最近在全力整理《高性能JavaScript》的文档，并重新学习一遍，放在这里方便大家查看并找到自己需要的知识点。 前端开发文档 高性能JavaScript 第1章：加载和执行 脚本位置 阻止脚本 无阻塞的脚本 延迟的脚本 动态脚本元素 XMLHTTPRequest脚本注入 推荐的无阻塞模式...

    RayKr 评论0 收藏0

  • http 缓存小结

    摘要：为了优化性能，使用缓存是一种比较常见的手段。由于篇幅原因，本篇重点讲述缓存。缓存未命中达缓存的请求没有副本可用，而被转发给原始服务器，与缓存命中相反。协商缓存协商缓存是在用户强缓存失败的情况下，向服务器端进行再验证。 为了优化性能，使用缓存是一种比较常见的手段。那么如何实现缓存以及如何避免缓存呢，都是要探讨的话题。可以从三个部分：http 缓存、cookie、localStorage&...

    miguel.jiang 评论0 收藏0

  • Web站点缓存技术小结

    摘要：导言本文将列举站点常用缓存技术的基本概念与特点，为想要了解缓存技术的读者们提供提纲式的技术介绍。这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为。参考连接网站缓存技术总结高性能网站的关键缓存静态资源缓存 导言：本文将列举web站点常用缓存技术的基本概念与特点，为想要了解web缓存技术的读者们提供提纲式的技术介绍。 在互联网迅速发展的今天，一个互联网站点的请求量是十分惊人的，动辄上...

    printempw 评论0 收藏0

  • CDN小结

    摘要：二目的是一个经策略性部署的整体系统，从技术上全面解决由于网络带宽小用户访问量大网点分布不均而产生的用户访问网站响应速度慢的根本原因。 一、CDN全称:  Content Delivery Network或Content Ddistribute Network，即内容分发网络。   二、目的：  CDN是一个经策略性部署的整体系统，从技术上全面解决由于网络带宽小、用户访问量大、网点分布不...

    cod7ce 评论0 收藏0

  • 浏览器缓存小结

    摘要：原文链接浏览器缓存浏览器缓存强缓存协商缓存强缓存释义客户端第一次问服务器要某个资源时，服务器丢还给客户端所请求的这个资源同时，告诉客户端将这个资源保存在本地，并且在未来的某个时点之前如果还需要这个资源，直接从本地获取就行了，不用向服务器请求 原文链接:浏览器缓存 浏览器缓存 强缓存 & 协商缓存 强缓存 释义: 客户端第一次问服务器要某个资源时，服务器丢还给客户端所请求的这个资源...

    pepperwang 评论0 收藏0

发表评论

登陆后可评论

0条评论

CollinPeng

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<