自己的网站到期域名如何续费,百度搜索关键词排名优化推广,外贸建站wordpress主题,好看的网页前端模板(本文适合所1-3年的前端阅读)原文链接#xff1a;http://blog.poetries.top/2019/01/02/browser-cache/一、浏览器缓存基本认识分为强缓存和协商缓存浏览器在加载资源时#xff0c;先根据这个资源的一些http header判断它是否命中强缓存#xff0c;强缓存如果命中#xff0… (本文适合所1-3年的前端阅读)原文链接http://blog.poetries.top/2019/01/02/browser-cache/一、浏览器缓存基本认识分为强缓存和协商缓存浏览器在加载资源时先根据这个资源的一些http header判断它是否命中强缓存强缓存如果命中浏览器直接从自己的缓存中读取资源不会发请求到服务器。比如某个css文件如果浏览器在加载它所在的网页时这个css文件的缓存配置命中了强缓存浏览器就直接从缓存中加载这个css连请求都不会发送到网页所在服务器当强缓存没有命中的时候浏览器一定会发送一个请求到服务器通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存如果协商缓存命中服务器会将这个请求返回但是不会返回这个资源的数据而是告诉客户端可以直接从缓存中加载这个资源于是浏览器就又会从自己的缓存中去加载这个资源强缓存与协商缓存的共同点是如果命中都是从客户端缓存中加载资源而不是从服务器加载资源数据区别是强缓存不发请求到服务器协商缓存会发请求到服务器当协商缓存也没有命中的时候浏览器直接从服务器加载资源数据二、强缓存的原理2.1 介绍当浏览器对某个资源的请求命中了强缓存时返回的http状态为200在chrome的开发者工具的network里面size会显示为from cache比如京东的首页里就有很多静态资源配置了强缓存用chrome打开几次再用f12查看network可以看到有不少请求就是从缓存中加载的强缓存是利用Expires或者Cache-Control这两个http response header实现的它们都用来表示资源在客户端缓存的有效期。Expires是http1.0提出的一个表示资源过期时间的header它描述的是一个绝对时间由服务器返回用GMT格式的字符串表示如Expires:Thu, 31 Dec 2037 23:55:55 GMT2.2 Expires缓存原理浏览器第一次跟服务器请求一个资源服务器在返回这个资源的同时在respone的header加上Expires如浏览器在接收到这个资源后会把这个资源连同所有response header一起缓存下来(所以缓存命中的请求返回的header并不是来自服务器而是来自之前缓存的header)浏览器再请求这个资源时先从缓存中寻找找到这个资源后拿出它的Expires跟当前的请求时间比较如果请求时间在Expires指定的时间之前就能命中缓存否则就不行如果缓存没有命中浏览器直接从服务器加载资源时Expires Header在重新加载的时候会被更新Expires是较老的强缓存管理header由于它是服务器返回的一个绝对时间在服务器时间与客户端时间相差较大时缓存管理容易出现问题比如随意修改下客户端时间就能影响缓存命中的结果。所以在http1.1的时候提出了一个新的header就是Cache-Control这是一个相对时间在配置缓存的时候以秒为单位用数值表示如Cache-Control:max-age3153600002.3 Cache-Control缓存原理浏览器第一次跟服务器请求一个资源服务器在返回这个资源的同时在respone的header加上Cache-Control如浏览器在接收到这个资源后会把这个资源连同所有response header一起缓存下来浏览器再请求这个资源时先从缓存中寻找找到这个资源后根据它第一次的请求时间和Cache-Control设定的有效期计算出一个资源过期时间再拿这个过期时间跟当前的请求时间比较如果请求时间在过期时间之前就能命中缓存否则就不行如果缓存没有命中浏览器直接从服务器加载资源时Cache-Control Header在重新加载的时候会被更新Cache-Control描述的是一个相对时间在进行缓存命中的时候都是利用客户端时间进行判断所以相比较ExpiresCache-Control的缓存管理更有效安全一些。这两个header可以只启用一个也可以同时启用当response header中Expires和Cache-Control同时存在时Cache-Control优先级高于Expires三、强缓存的管理前面介绍的是强缓存的原理在实际应用中我们会碰到需要强缓存的场景和不需要强缓存的场景通常有2种方式来设置是否启用强缓存通过代码的方式在web服务器返回的响应中添加Expires和Cache-Control Header通过配置web服务器的方式让web服务器在响应资源的时候统一添加Expires和Cache-Control Header比如在javaweb里面我们可以使用类似下面的代码设置强缓存java.util.Date date new java.util.Date(); response.setDateHeader(Expires,date.getTime()20000); //Expires:过时期限值response.setHeader(Cache-Control, public); //Cache-Control来控制页面的缓存与否,public:浏览器和缓存服务器都可以缓存页面信息response.setHeader(Pragma, Pragma); //Pragma:设置页面是否缓存为Pragma则缓存no-cache则不缓存还可以通过类似下面的java代码设置不启用强缓存response.setHeader( Pragma, no-cache ); response.setDateHeader(Expires, 0); response.addHeader( Cache-Control, no-cache );//浏览器和缓存服务器都不应该缓存页面信息nginx和apache作为专业的web服务器都有专门的配置文件可以配置expires和cache-control这方面的知识如果你对运维感兴趣的话可以在百度上搜索nginx 设置 expires cache-control或 apache 设置 expires cache-control 都能找到不少相关的文章。由于在开发的时候不会专门去配置强缓存而浏览器又默认会缓存图片css和js等静态资源所以开发环境下经常会因为强缓存导致资源没有及时更新而看不到最新的效果解决这个问题的方法有很多常用的有以下几种处理缓存带来的问题直接ctrlf5这个办法能解决页面直接引用的资源更新的问题使用浏览器的隐私模式开发如果用的是chrome可以f12在network那里把缓存给禁掉(这是个非常有效的方法)在开发阶段给资源加上一个动态的参数如css/index.css?v0.0001由于每次资源的修改都要更新引用的位置同时修改参数的值所以操作起来不是很方便除非你是在动态页面比如jsp里开发就可以用服务器变量来解决(v${sysRnd})或者你能用一些前端的构建工具来处理这个参数修改的问题如果资源引用的页面被嵌入到了一个iframe里面可以在iframe的区域右键单击重新加载该页面以chrome为例如果缓存问题出现在ajax请求中最有效的解决办法就是ajax的请求地址追加随机数还有一种情况就是动态设置iframe的src时有可能也会因为缓存问题导致看不到最新的效果这时候在要设置的src后面添加随机数也能解决问题如果你用的是grunt和gulp、webpack这种前端工具开发通过它们的插件比如grunt-contrib-connect来启动一个静态服务器则完全不用担心开发阶段的资源更新问题因为在这个静态服务器下的所有资源返回的respone header中cache-control始终被设置为不缓存四、强缓存的应用强缓存是前端性能优化最有力的工具没有之一对于有大量静态资源的网页一定要利用强缓存提高响应速度。通常的做法是为这些静态资源全部配置一个超时时间超长的Expires或Cache-Control这样用户在访问网页时只会在第一次加载时从服务器请求静态资源其它时候只要缓存没有失效并且用户没有强制刷新的条件下都会从自己的缓存中加载比如前面提到过的京东首页缓存的资源它的缓存过期时间都设置到了2026年强缓存还有一点需要注意的是通常都是针对静态资源使用动态资源需要慎用除了服务端页面可以看作动态资源外那些引用静态资源的html也可以看作是动态资源如果这种html也被缓存当这些html更新之后可能就没有机制能够通知浏览器这些html有更新尤其是前后端分离的应用里页面都是纯html页面每个访问地址可能都是直接访问html页面这些页面通常不加强缓存以保证浏览器访问这些页面时始终请求服务器最新的资源五、协商缓存的原理5.1 介绍当浏览器对某个资源的请求没有命中强缓存就会发一个请求到服务器验证协商缓存是否命中如果协商缓存命中请求响应返回的http状态为304并且会显示一个Not Modified的字符串比如你打开京东的首页按f12打开开发者工具再按f5刷新页面查看network可以看到有不少请求就是命中了协商缓存的查看单个请求的Response Header也能看到304的状态码和Not Modified的字符串只要看到这个就可说明这个资源是命中了协商缓存然后从客户端缓存中加载的而不是服务器最新的资源5.2 Last-ModifiedIf-Modified-Since控制协商缓存浏览器第一次跟服务器请求一个资源服务器在返回这个资源的同时在respone的header加上Last-Modified的header这个header表示这个资源在服务器上的最后修改时间浏览器再次跟服务器请求这个资源时在request的header上加上If-Modified-Since的header这个header的值就是上一次请求时返回的Last-Modified的值服务器再次收到资源请求时根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化如果没有变化则返回304 Not Modified但是不会返回资源内容如果有变化就正常返回资源内容。当服务器返回304 Not Modified的响应时response header中不会再添加Last-Modified的header因为既然资源没有变化那么Last-Modified也就不会改变这是服务器返回304时的response header浏览器收到304的响应后就会从缓存中加载资源如果协商缓存没有命中浏览器直接从服务器加载资源时Last-Modified Header在重新加载的时候会被更新下次请求时If-Modified-Since会启用上次返回的Last-Modified值【Last-ModifiedIf-Modified-Since】都是根据服务器时间返回的header一般来说在没有调整服务器时间和篡改客户端缓存的情况下这两个header配合起来管理协商缓存是非常可靠的但是有时候也会服务器上资源其实有变化但是最后修改时间却没有变化的情况而这种问题又很不容易被定位出来而当这种情况出现的时候就会影响协商缓存的可靠性。所以就有了另外一对header来管理协商缓存这对header就是【ETag、If-None-Match】。它们的缓存管理的方式是5.3 ETag、If-None-Match控制协商缓存浏览器第一次跟服务器请求一个资源服务器在返回这个资源的同时在respone的header加上ETag的header这个header是服务器根据当前请求的资源生成的一个唯一标识这个唯一标识是一个字符串只要资源有变化这个串就不同跟最后修改时间没有关系所以能很好的补充Last-Modified的问题浏览器再次跟服务器请求这个资源时在request的header上加上If-None-Match的header这个header的值就是上一次请求时返回的ETag的值服务器再次收到资源请求时根据浏览器传过来If-None-Match和然后再根据资源生成一个新的ETag如果这两个值相同就说明资源没有变化否则就是有变化如果没有变化则返回304 Not Modified但是不会返回资源内容如果有变化就正常返回资源内容。与Last-Modified不一样的是当服务器返回304 Not Modified的响应时由于ETag重新生成过response header中还会把这个ETag返回即使这个ETag跟之前的没有变化浏览器收到304的响应后就会从缓存中加载资源。六、协商缓存的管理协商缓存跟强缓存不一样强缓存不发请求到服务器所以有时候资源更新了浏览器还不知道但是协商缓存会发请求到服务器所以资源是否更新服务器肯定知道。大部分web服务器都默认开启协商缓存而且是同时启用【Last-ModifiedIf-Modified-Since】和【ETag、If-None-Match】比如apache:如果没有协商缓存每个到服务器的请求就都得返回资源内容这样服务器的性能会极差。【Last-ModifiedIf-Modified-Since】和【ETag、If-None-Match】一般都是同时启用这是为了处理Last-Modified不可靠的情况。有一种场景需要注意分布式系统里多台机器间文件的Last-Modified必须保持一致以免负载均衡到不同机器导致比对失败分布式系统尽量关闭掉ETag(每台机器生成的ETag都会不一样)京东页面的资源请求返回的repsones header就只有Last-Modified没有ETag协商缓存需要配合强缓存使用你看前面这个截图中除了Last-Modified这个header还有强缓存的相关header因为如果不启用强缓存的话协商缓存根本没有意义七、相关浏览器行为对缓存的影响如果资源已经被浏览器缓存下来在缓存失效之前再次请求时默认会先检查是否命中强缓存如果强缓存命中则直接读取缓存如果强缓存没有命中则发请求到服务器检查是否命中协商缓存如果协商缓存命中则告诉浏览器还是可以从缓存读取否则才从服务器返回最新的资源。这是默认的处理方式这个方式可能被浏览器的行为改变当ctrlf5强制刷新网页时直接从服务器加载跳过强缓存和协商缓存当f5刷新网页时跳过强缓存但是会检查协商缓存长按关注前端码头私人微信yun1015911204任何问题欢迎叨扰往期推荐01今日头条前端面经(4轮技术面hr面)02前端面试从技术总监到hr一“篇”拿下03利用webpack4手把手带你搭建一个vue多页面应用觉得有用记得点个在看哦~???
