小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
前言
最近在学习http的经典面试题: 从输入URL到页面的渲染?
这个问题知识面非常的广,每个过程都可以十分的深入。Http缓存也是其中的一部分。所以我打算以这道面试题出发建立这块的知识体系。
所以就讲讲好用的优化手段Http缓存。
Http缓存规则
Http缓存是存储一些不经常变化的静态文件(js文件、图片文件、css文件等)。Http缓存分为强缓存和协商缓存(弱缓存)。
强缓存
强缓存: 当有缓存数据直接使用不用向服务器征求同意。
强缓存又有两种方式: 绝对时间(Expires) 和 相对时间(Cache-Control)
(这里还有一个pragma(Http 1.0),但是它只能设置no-cache值 与 Cache-Control(Http 1.1): no-cache 作用一样这里就不讲了)
绝对时间(Expires)
设置一个过期的时间,当在过期之前就是从Http缓存中获取。如果时间超过就重新向服务器获取最新的数据。
相对时间(Cache-Control)
使用Cache-Control的属性max-age来针对相对时间内都是从缓存中拿数据。例如Cache-Control: max-age=20
表示在这个20秒之内都是从缓存中获取数据。20秒之后就是从服务器中获取了。
强缓存可能问的问题
知道 from disk cache和from memory cache吗,他们都是什么时候会触发?
当强缓存的时候会触发这个, 浏览器缓存是存储在磁盘和内存中,当需要使用到缓存的时候会先从内存查找,没有查找到就从磁盘中查找。如果还是找不到就向服务器请求,得到数据再存到内存和磁盘。
如何刷新强缓存?
从上面的强缓存知识中,知道如果缓存时间没有过,我们一直都是在缓存中拿数据的,那么当我们把服务器的数据更新,如何让强缓存也能拿到最新的数据。
因为强缓存都是判断url来判断是从缓存中拿数据还是从服务器拿数据,所以只要我们更改了这个url就可以。例如我们在url的后面添加一个version版本或者使用hash来让原来的url改变
就可以刷新浏览器的缓存了。
优先级
Cache-Control > expires
协商缓存(弱缓存)
if-modified-since(request) 和 last-modified(response)
协商缓存: 客户端向服务器咨询
是否使用缓存。
第一次请求的时候服务器会把数据和last-modified
头字段(文件最后修改时间)返回
给浏览器。
第二次请求以及之后请求浏览器都会携带if-modified-since头字段
,它值是last-modified的值,只是把名字换了下。
然后服务器根据文件修改时间和if-modified-since带过来的值进行判断
,如果一样就返回304
,如果不一样表示文件修改返回最新文件以及最新的last-modified, 时间是以秒为单位。
if-none-match(request) 和 Etag(response)
Etag表示每个文件有一个内容标识。
当文件内容发现修改的时候Etag会发现变化,然后和前面一样,浏览器换成了if-none-match,服务器拿if-none-match和Etag做判断。
协商缓存问题
为什么有了last-modified 还需要 Etag
这是因为last-modified是以秒为单位,当出现一秒内两次或者多次修改,这样浏览器永远都拿不到最新的数据了,所以使用Etag就更加的稳妥。
优先级
Etag > last-modified
整体优先级
先强缓存再到协商缓存
流程图
说说感想
本来想认认真真详详细细的写一遍,但是我感觉我参考的那些博客文章都写了特别的详细了,所以这里就把简要概括加上一些有可能问到问题加深知识点的印象。
参考看的文章顺序:
这篇文章让你知道http缓存干嘛用的,和它们的区别。
加深印象。
下篇文章是根据koa2的http实践,里面有作者github的案例地址,大家可以拉下来加深认知。
最后, 共勉大家一起加油,如果文章对你有帮助,希望给我个赞谢谢。