前端对所有文件请求添加header_【前端面试必问】浏览器缓存原理？送你满分答案...

(本文适合所1-3年的前端阅读)

原文链接：

http://blog.poetries.top/2019/01/02/browser-cache/

一、浏览器缓存基本认识

分为强缓存和协商缓存

  1. 浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器

  2. 当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源

  3. 强缓存与协商缓存的共同点是：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；区别是：强缓存不发请求到服务器，协商缓存会发请求到服务器

  4. 当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据

二、强缓存的原理

2.1 介绍

当浏览器对某个资源的请求命中了强缓存时，返回的http状态为200，在chrome的开发者工具的network里面size会显示为from cache，比如京东的首页里就有很多静态资源配置了强缓存，用chrome打开几次，再用f12查看network，可以看到有不少请求就是从缓存中加载的

b0a94307297fca2526eca413dbd6947f.png

  • 强缓存是利用Expires或者Cache-Control这两个http response header实现的，它们都用来表示资源在客户端缓存的有效期。

Expires是http1.0提出的一个表示资源过期时间的header，它描述的是一个绝对时间，由服务器返回，用GMT格式的字符串表示，如：Expires:Thu, 31 Dec 2037 23:55:55 GMT

2.2 Expires缓存原理

  1. 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Expires，如

fca387829996d65e1f7c396c8c8e6416.png

  1. 浏览器在接收到这个资源后，会把这个资源连同所有response header一起缓存下来(所以缓存命中的请求返回的header并不是来自服务器，而是来自之前缓存的header)

  2. 浏览器再请求这个资源时，先从缓存中寻找，找到这个资源后，拿出它的Expires跟当前的请求时间比较，如果请求时间在Expires指定的时间之前，就能命中缓存，否则就不行

  3. 如果缓存没有命中，浏览器直接从服务器加载资源时，Expires Header在重新加载的时候会被更新

Expires是较老的强缓存管理header，由于它是服务器返回的一个绝对时间，在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，比如随意修改下客户端时间，就能影响缓存命中的结果。所以在http1.1的时候，提出了一个新的header，就是Cache-Control，这是一个相对时间，在配置缓存的时候，以秒为单位，用数值表示，如：Cache-Control:max-age=315360000

2.3 Cache-Control缓存原理

  1. 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Cache-Control，如：

47b41983a9843d900294c9f9180cb617.png

  1. 浏览器在接收到这个资源后，会把这个资源连同所有response header一起缓存下来

  2. 浏览器再请求这个资源时，先从缓存中寻找，找到这个资源后，根据它第一次的请求时间和Cache-Control设定的有效期，计算出一个资源过期时间，再拿这个过期时间跟当前的请求时间比较，如果请求时间在过期时间之前，就能命中缓存，否则就不行

  3. 如果缓存没有命中，浏览器直接从服务器加载资源时，Cache-Control Header在重新加载的时候会被更新

  • Cache-Control描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，所以相比较Expires，Cache-Control的缓存管理更有效，安全一些。

  • 这两个header可以只启用一个，也可以同时启用，当response header中，Expires和Cache-Control同时存在时，Cache-Control优先级高于Expires：

deac9c6b1d6e888f7e1d1895a3fed767.png

三、强缓存的管理

前面介绍的是强缓存的原理，在实际应用中我们会碰到需要强缓存的场景和不需要强缓存的场景，通常有2种方式来设置是否启用强缓存

  1. 通过代码的方式，在web服务器返回的响应中添加Expires和Cache-Control Header

  2. 通过配置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等静态资源，所以开发环境下经常会因为强缓存导致资源没有及时更新而看不到最新的效果，解决这个问题的方法有很多，常用的有以下几种

处理缓存带来的问题

  1. 直接ctrl+f5，这个办法能解决页面直接引用的资源更新的问题

  2. 使用浏览器的隐私模式开发

  3. 如果用的是chrome，可以f12在network那里把缓存给禁掉(这是个非常有效的方法)

2bcb2c799288dfbd1b90f67e568e9aa8.png

  1. 在开发阶段，给资源加上一个动态的参数，如css/index.css?v=0.0001，由于每次资源的修改都要更新引用的位置，同时修改参数的值，所以操作起来不是很方便，除非你是在动态页面比如jsp里开发就可以用服务器变量来解决(v=${sysRnd})，或者你能用一些前端的构建工具来处理这个参数修改的问题

  2. 如果资源引用的页面，被嵌入到了一个iframe里面，可以在iframe的区域右键单击重新加载该页面，以chrome为例

c7e4391cdc9a748e8cec09cfbbdd6c3d.png

  1. 如果缓存问题出现在ajax请求中，最有效的解决办法就是ajax的请求地址追加随机数

  2. 还有一种情况就是动态设置iframe的src时，有可能也会因为缓存问题，导致看不到最新的效果，这时候在要设置的src后面添加随机数也能解决问题

  3. 如果你用的是grunt和gulp、webpack这种前端工具开发，通过它们的插件比如grunt-contrib-connect来启动一个静态服务器，则完全不用担心开发阶段的资源更新问题，因为在这个静态服务器下的所有资源返回的respone header中，cache-control始终被设置为不缓存

beeb6ca4ea3edb4fe0c598288e8b7e73.png

四、强缓存的应用

强缓存是前端性能优化最有力的工具，没有之一，对于有大量静态资源的网页，一定要利用强缓存，提高响应速度。通常的做法是，为这些静态资源全部配置一个超时时间超长的Expires或Cache-Control，这样用户在访问网页时，只会在第一次加载时从服务器请求静态资源，其它时候只要缓存没有失效并且用户没有强制刷新的条件下都会从自己的缓存中加载，比如前面提到过的京东首页缓存的资源，它的缓存过期时间都设置到了2026年

deac9c6b1d6e888f7e1d1895a3fed767.png

强缓存还有一点需要注意的是，通常都是针对静态资源使用，动态资源需要慎用，除了服务端页面可以看作动态资源外，那些引用静态资源的html也可以看作是动态资源，如果这种html也被缓存，当这些html更新之后，可能就没有机制能够通知浏览器这些html有更新，尤其是前后端分离的应用里，页面都是纯html页面，每个访问地址可能都是直接访问html页面，这些页面通常不加强缓存，以保证浏览器访问这些页面时始终请求服务器最新的资源

五、协商缓存的原理

5.1 介绍

当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为304并且会显示一个Not Modified的字符串，比如你打开京东的首页，按f12打开开发者工具，再按f5刷新页面，查看network，可以看到有不少请求就是命中了协商缓存的

4f8148ca3b4fc74eccfec4ba2f168868.png

查看单个请求的Response Header，也能看到304的状态码和Not Modified的字符串，只要看到这个就可说明这个资源是命中了协商缓存，然后从客户端缓存中加载的，而不是服务器最新的资源

c4f28a43da1549652826e7ebc03970de.png

5.2 Last-Modified，If-Modified-Since控制协商缓存

  1. 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified的header，这个header表示这个资源在服务器上的最后修改时间

e5ba92a23a0ef6709b3a305da4fe1d5f.png

  1. 浏览器再次跟服务器请求这个资源时，在request的header上加上If-Modified-Since的header，这个header的值就是上一次请求时返回的Last-Modified的值

e9f8ac7e5b67732c969f8c0ea4bcd0b0.png

  1. 服务器再次收到资源请求时，根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化，如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。当服务器返回304 Not Modified的响应时，response header中不会再添加Last-Modified的header，因为既然资源没有变化，那么Last-Modified也就不会改变，这是服务器返回304时的response header

c9d8dfad4a70ea265658560a29d433d8.png

  1. 浏览器收到304的响应后，就会从缓存中加载资源

  2. 如果协商缓存没有命中，浏览器直接从服务器加载资源时，Last-Modified Header在重新加载的时候会被更新，下次请求时，If-Modified-Since会启用上次返回的Last-Modified值

【Last-Modified，If-Modified-Since】都是根据服务器时间返回的header，一般来说，在没有调整服务器时间和篡改客户端缓存的情况下，这两个header配合起来管理协商缓存是非常可靠的，但是有时候也会服务器上资源其实有变化，但是最后修改时间却没有变化的情况，而这种问题又很不容易被定位出来，而当这种情况出现的时候，就会影响协商缓存的可靠性。所以就有了另外一对header来管理协商缓存，这对header就是【ETag、If-None-Match】。它们的缓存管理的方式是

5.3 ETag、If-None-Match控制协商缓存

  1. 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上ETag的header，这个header是服务器根据当前请求的资源生成的一个唯一标识，这个唯一标识是一个字符串，只要资源有变化这个串就不同，跟最后修改时间没有关系，所以能很好的补充Last-Modified的问题

d3cbfa9f7d2bb9a09a6d2e617204d818.png

  1. 浏览器再次跟服务器请求这个资源时，在request的header上加上If-None-Match的header，这个header的值就是上一次请求时返回的ETag的值

d4875c0e6bfb2323b79c2b0ae4d62a12.png

  1. 服务器再次收到资源请求时，根据浏览器传过来If-None-Match和然后再根据资源生成一个新的ETag，如果这两个值相同就说明资源没有变化，否则就是有变化；如果没有变化则返回304 Not Modified，但是不会返回资源内容；如果有变化，就正常返回资源内容。与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化

d07e3e1c37df4e38d3085678201bf0ba.png

  1. 浏览器收到304的响应后，就会从缓存中加载资源。

六、协商缓存的管理

协商缓存跟强缓存不一样，强缓存不发请求到服务器，所以有时候资源更新了浏览器还不知道，但是协商缓存会发请求到服务器，所以资源是否更新，服务器肯定知道。大部分web服务器都默认开启协商缓存，而且是同时启用【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】，比如apache:

33df6129d898957530009368ae6f9c3f.png

如果没有协商缓存，每个到服务器的请求，就都得返回资源内容，这样服务器的性能会极差。

  • 【Last-Modified，If-Modified-Since】和【ETag、If-None-Match】一般都是同时启用，这是为了处理Last-Modified不可靠的情况。

有一种场景需要注意

  • 分布式系统里多台机器间文件的Last-Modified必须保持一致，以免负载均衡到不同机器导致比对失败；

  • 分布式系统尽量关闭掉ETag(每台机器生成的ETag都会不一样)；

  • 京东页面的资源请求，返回的repsones header就只有Last-Modified，没有ETag：

158ab5224242624c89e53ea3cf9dff5e.png

协商缓存需要配合强缓存使用，你看前面这个截图中，除了Last-Modified这个header，还有强缓存的相关header，因为如果不启用强缓存的话，协商缓存根本没有意义

七、相关浏览器行为对缓存的影响

如果资源已经被浏览器缓存下来，在缓存失效之前，再次请求时，默认会先检查是否命中强缓存，如果强缓存命中则直接读取缓存，如果强缓存没有命中则发请求到服务器检查是否命中协商缓存，如果协商缓存命中，则告诉浏览器还是可以从缓存读取，否则才从服务器返回最新的资源。这是默认的处理方式，这个方式可能被浏览器的行为改变：

  • 当ctrl+f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；

  • 当f5刷新网页时，跳过强缓存，但是会检查协商缓存

6bf38a6227dd13721f4dc6268efed6b5.png

长按关注：前端码头

私人微信：yun1015911204

任何问题

欢迎叨扰

fb66ab35abcbb321a1e34e154eb6062b.gif往期推荐01

今日头条前端面经(4轮技术面+hr面)

02

前端面试从技术总监到hr一“篇”拿下

03

利用webpack4手把手带你搭建一个vue多页面应用

觉得有用

记得点个在看哦~???

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/426745.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

实例59:python

实例59:python

#题目：计算字符串长度 #!/usr/bin/python -- coding: UTF-8 -- sStr1 ‘strlen’ print (len(sStr1))
阅读更多...
C语言实战：(1) 整数的二进制表示

C语言实战：(1) 整数的二进制表示

#include<stdio.h> int main( ) {int a; //待转换的整数scanf("%d",&a);//用左移位运算(移到符号位时a的正负)逐位判断0和1for(int i0,n 0;i<sizeof(int)*8;i,n,aa<<1){if(n%40&&n!0)putchar( );//控制格式的输出&#xff1a;每四位输出…
阅读更多...
intern()方法的使用

intern()方法的使用

intern() intern方法的作用是&#xff1a;如果字符串常量池中已经包含一个字符串等于此String对象的字符串&#xff0c;则返回常量池中的这个String对应的对象&#xff0c; 否则将其添加到常量池并返回常量池中的引用。 在jdk1.7以后&#xff0c;就不会像之前那样把String对象复…
阅读更多...
华为做raid5步骤_华为验厂验厂流程如何？主要内容是什么呢？

华为做raid5步骤_华为验厂验厂流程如何？主要内容是什么呢？

华为作为民族企业是全球领先的信息与通信技术(ICT)解决方案供应商&#xff0c;消除数字鸿沟&#xff0c;促进经济、环境和社会的和谐与可持续发展是华为一直以来的可持续发展愿景。为此&#xff0c;华为不仅支持联合国可持续发展目标的实现&#xff0c;还同时与供应链上下游的客…
阅读更多...
实例60:python

实例60:python

#题目&#xff1a;打印出杨辉三角形&#xff08;要求打印出10行如下图&#xff09;。 #!/usr/bin/python3 def Pascal(n): ls [[1]] for i in range (1, n): ls.append([1]) for j in range(1, i): ls[i].append(ls[i-1][j-1] ls[i-1][j]) ls[i].append(1) for i in range(0…
阅读更多...
FUI- 我离钢铁侠还差几步？

FUI- 我离钢铁侠还差几步？

本文来自网易云社区作者&#xff1a;马宝什么是FUI本文不累赘的可以自行Google&#xff0c;喜欢科幻的同学们都看一张图就能感受到FUI的魅力。本文算是一篇所见即所的&#xff0c;可边学边干的原创教程。总结全文就一句话&#xff0c;“让结构和表现分离&#xff0c;自下而上的…
阅读更多...
C语言实战：(2)字符串的倒转变换

C语言实战：(2)字符串的倒转变换

#include<stdio.h> #define N 50 void reverse(char s[]); //定义倒转函数 int main( ) {char s[N];scanf("%s",s);reverse(s); printf("%s",s);return 0; } void reverse(char s[]) {char c,*p,*q;pqs;while(*p!\0)p;p--; //保留\0不被交换//基本思…
阅读更多...
亿嘉和机器人上市了吗_亿嘉和上半年收入持续增长，拟7亿元定增加码主业研发...

亿嘉和机器人上市了吗_亿嘉和上半年收入持续增长，拟7亿元定增加码主业研发...

《电鳗财经》 赵超/文作为国内机器人行业中重要成员之一的亿嘉和(603666.SH)&#xff0c;在深耕省内市场、持续拓展省外市场的策略下&#xff0c;上半年收入延续一季度增长态势。《电鳗财经》注意到&#xff0c;在公布半年报的同时&#xff0c;亿嘉和也抛出了7.08亿元的定增方案…
阅读更多...
实例61:python

实例61:python

#题目&#xff1a;查找字符串 #!/usr/bin/python -- coding: UTF-8 -- sStr1 ‘abcdefg’ sStr2 ‘cde’ print (sStr1.find(sStr2))
阅读更多...
阿斯克码表ACSII对照表

阿斯克码表ACSII对照表

ASCII码对照表 信息在计算机上是用二进制表示的&#xff0c;这种表示法让人理解就很困难。 因此计算机上都配有输入和输出设备&#xff0c;这些设备的主要目的就是&#xff0c;以一种人类可阅读的形式将信息在这些设备上显示出来供人阅读理解。 为保证人类和设备&#xff0c;设…
阅读更多...
dft计算傅里叶级数系数_一道国外的DFT性质的题目

dft计算傅里叶级数系数_一道国外的DFT性质的题目

由于上半年实在太忙太忙&#xff0c;所以导致很久没更新公众号了&#xff0c;特意向各位长期关注的小伙伴表示歉意。今天分享的是DFT性质的应用。背景&#xff1a;DFT的对称性在解题中是非常常见的&#xff0c;很多同学&#xff0c;一看到“实序列”就感觉无从下手。然而它却是…
阅读更多...
实例62:python

实例62:python

#输入3个数a,b,c&#xff0c;按大小顺序输出。 #!/usr/bin/python -- coding: UTF-8 -- if name ‘main’: n1 int(input(‘n1 :\n’)) n2 int(input(‘n2 :\n’)) n3 int(input(‘n3 :\n’)) def swap(p1,p2):return p2,p1if n1 > n2 : n1,n2 swap(n1,n2) if n…
阅读更多...
c语言笔记：转义字符

c语言笔记：转义字符

转义字符及其含义 转义字符含义转义字符含义\a响铃符\\反斜杠\b回退符?问号\f换页符\’单引号\n换行符\"双引号\r回车符\000八进制数\t横向制表符\xhh十六进制数\v纵向制表符
阅读更多...
LightOJ 1393 Crazy Calendar（博弈）题解

LightOJ 1393 Crazy Calendar（博弈）题解

题意&#xff1a;r*c方格中&#xff0c;每个格子有一定石子&#xff0c;每次移动每格任意数量石子&#xff0c;只能向下或者向右动一格&#xff0c;不能移动为败 思路&#xff1a;显然是Nim&#xff0c;到右下曼哈顿距离为偶数的不用管&#xff0c;因为先手动一下后手动一下最后…
阅读更多...
扩容是元素还是数组_Map扩容源码

扩容是元素还是数组_Map扩容源码

首先我们运行一段代码&#xff1a;此时运行&#xff0c;程序正常&#xff0c;接下来我们将注释放开&#xff1a;此时运行发现&#xff0c;OOM了&#xff1a;为什么new出来HashMap的时候并没有报OOM&#xff0c;而是在第一次进行put操作的时候才报的OOM&#xff1f;我们来看下ma…
阅读更多...
实例63:python

实例63:python

#题目&#xff1a;输入数组&#xff0c;最大的与第一个元素交换&#xff0c;最小的与最后一个元素交换&#xff0c;输出数组 #!/usr/bin/python -- coding: UTF-8 -- a[1,2,3,7,9,8] for i in range(len(a)): if a[i]max(a): a[0],a[i]a[i],a[0] for i in range(len(a)): i…
阅读更多...
css关于position的几个值

css关于position的几个值

1. staitic:该值符合文档的初始排版&#xff0c;其中设置的与位置有关的值不起作用。2.relative 该值的偏移量&#xff0c;是在文档初始排版的基础上进行排版&#xff0c;并且覆盖顺序是最新输出的在最上面3.absolute该值元素的定位是以网页文档左上角位基准&#xff0c;并且不…
阅读更多...
C语言笔记：格式化输入输出（fprintf、fscanf、sscanf...)

C语言笔记：格式化输入输出（fprintf、fscanf、sscanf...)

C语言笔记&#xff1a;格式化输入输出&#xff08;fprintf、fscanf、sscanf…) 包含以下函数的基本库&#xff1a;stdlib.h fprintf int fprintf(FILE *stream, const char *format,...) fprintf函数按照format说明的格式对输出进行转换&#xff0c;并写到stream流中。返回值是…
阅读更多...
客户端配置_交换机作为STelnet客户端登录其他设备配置示例

客户端配置_交换机作为STelnet客户端登录其他设备配置示例

交换机作为STelnet客户端登录其他设备配置示例1、组网需求图1 设备通过STelnet登录其他设备组网图如上图1所示&#xff0c;用户希望在服务器端和客户端进行安全的数据交互&#xff0c;配置两个登录用户为client001和client002&#xff0c;分别使用password认证方式和RSA认证方式…
阅读更多...
实例64:python

实例64:python

#题目&#xff1a;有 n 个整数&#xff0c;使其前面各数顺序向后移 m 个位置&#xff0c;最后 m 个数变成最前面的 m 个数 #!/usr/bin/python -- coding: UTF-8 -- if name ‘main’: n int(input(‘整数 n 为:\n’)) m int(input(‘向后移 m 个位置为:\n’)) def move(a…
阅读更多...
最新文章

Copyright @ 2022~2023