摘要：概念浏览器缓存是前端开发中经常遇到的问题，它是提升性能同时减少服务器压力的有效手段之一。服务器通过指定，告知代理服务器，需要缓存两个版本压缩和未压缩。异常表现上述缓存有关的规律，并非所有浏览器都遵循，比如说。
概念
浏览器缓存是前端开发中经常遇到的问题，它是提升性能同时减少服务器压力的有效手段之一。
类型 1.强缓存如果启用了强缓存，请求资源时不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network中看到请求返回的200状态码，并在状态码的后面跟着from disk cache 或者from memory cache关键字。
2.协商缓存向服务器请求资源时，服务器会根据这个请求的request header一些参数来判断是否符合协商缓存类型，如果符合在返回304状态码并带上新的response header通知浏览器从缓存中读取资源。
对比：
缓存相关的header 1.强缓存两者的共同点是都从客户端读取资源，不同的是强缓存不会向服务器发送请求，协商缓存会发请求。
expires
response header里的过期时间，浏览器再次加载资源时，如果在这个时间内，则会使用强缓存；
cache control
当值设为max-age = 300时，则代表在这个请求正确返回时间的5分钟内再次加载资源，就会启用强缓存。这个参数的设置和Expires作用是差不多的，只不过Expire是http1.0就有的，Cache-Control是http1.1才有的，相对于配置expires的方式，Cache-Control的优先级更高。现在配置Expires是为了兼容不能支持http1.1的环境。
Etag和If-None-Match
Etag是上一次加载资源时，服务器返回的对该资源的唯一标识，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到request header里的If-None-Match里，服务器接受到If-None-Match的值后，会拿来跟该资源文件的Etag值做比较，如果相同，则表示资源文件没有发生改变，命中协商缓存。
Last-Modified和If-Since-Modified
Last-Modified是该资源文件最后一次更改时间，服务器会在response header里返回，同时浏览器会将这个值保存起来，在下一次发送请求时，放到request header里的If-Modified-Since里，服务器在接收到后也会做比对，如果相同则命中协商缓存。
用户行为多浏览器缓存的控制ETag和Last-Modified的作用和用法差不多。对比下他们的不同。
1.首先在精度上，ETag要优于Last-Modified。Last-Modifed的时间单位是秒，如果某个文件在1秒内修改了很多次，那么他们的Last-Modified其实没有体现出来修改，但是ETag每次都会改变确保了精度，如果是负载均衡的服务器，各个服务器生成的Last-Modified也可能不一致。
2.其次在性能上，ETag要逊于Last-Mdified，毕竟Last-Modified只需要记录时间，而Etag需要通过算法计算出来一个hash值。
3.最后在优先级上，服务器经验优先考虑ETag。
地址栏访问，链接跳转是正常用户行为，将会触发浏览器缓存机制；
F5刷新，浏览器会设置max-age = 0，跳过强缓判断，会进行协商缓存判断；
ctrl+F5，跳过强缓存和协商缓存判断，直接从服务器拉取资源。
几个常见的response header字段的解释age
出现此字段，表示命中代理服务器的缓存，它的值指的是代理服务器对于请求资源的已缓存时间，单位为妙。
date
指的是相应生成的时间，请求经过代理服务器时，返回的Date未必是最新的，所以通常这个时候，代理服务器增加一个Age字段告知该资源已缓存了多久。
Vary
对于服务器而言，资源文件可能有压缩和未压缩版本，针对不同的客户端，返回不同的资源版本。有些老式浏览器不支持解压缩，这时候需要返回未压缩版本；对于新浏览器，支持压缩的，返回压缩版本，节省带宽，提升体验。这时候用Vary来区分这个资源版本。服务器通过指定Vary：Accept-Encoding，告知代理服务器，需要缓存两个版本：压缩和未压缩。
有时候，很多工作场景需要避免浏览器缓存，除了浏览器浏览器隐身模式，请求时要禁用缓存：
设置请求头：Cache-control：no-cache，no-store，must-revalidate；
给资源加一个版本号，这样你就可以自由控制什么时候加载最新的资源:
HTML禁用缓存，在页面上写:
但是最后一种方法只有部分浏览器支持，由于代理服务器不解析HTML文档，所以也不支持这种方式。
IE8异常表现上述缓存有关的规律，并非所有浏览器都遵循，比如说IE8。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/40569.html
摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。 最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...
摘要：浅谈网站性能之前端性能优化性能优化的目的无非是减少用户流量消耗，提升用户首屏体验，提升用户访问速度，让用户专注内容本身。前端性能优化减少请求数量基本原理在浏览器与服务器进行通信时，主要是通过进行通信。 最近项目慢慢走上正轨，需求趋于平稳，这才想起需要对整站进行性能优化。经过一段时间的学习，结合现在项目的实际性能情况，发现确实有许多地方可以进行优化。于是就开始了我的前端性能优化之旅。以下...
摘要：协商缓存用户发送的请求，发送到服务器后，由服务器判定是否从缓存中获取资源。如果想主动清除缓存，也可以在请求头信息中加入来禁止缓存。主要取值如下缓存的时效由决定。是的字段，而是的字段，当与同时存在时，的优先级要高于。 在讲这几个属性之前，先复习下浏览器的缓存机制，再结合了解一下Last-Modified / If-Modified-Since、Etag / If-Match、cache-...
阅读 1120·2023-04-26 03:02
阅读 1163·2023-04-25 19:18
阅读 2585·2021-11-23 09:51
阅读 2564·2021-11-11 16:55
阅读 2617·2021-10-21 09:39
阅读 1695·2021-10-09 09:59
阅读 1992·2021-09-26 09:55
阅读 3516·2021-09-26 09:55
