优化手段--Http缓存(常见面试问题)

675 阅读4分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

最近在学习http的经典面试题: 从输入URL到页面的渲染?

这个问题知识面非常的广,每个过程都可以十分的深入。Http缓存也是其中的一部分。所以我打算以这道面试题出发建立这块的知识体系。

所以就讲讲好用的优化手段Http缓存。

Http缓存规则

Http缓存是存储一些不经常变化的静态文件(js文件、图片文件、css文件等)。Http缓存分为强缓存和协商缓存(弱缓存)。

Background (9).png

强缓存

强缓存: 当有缓存数据直接使用不用向服务器征求同意。

image.png

强缓存又有两种方式: 绝对时间(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

协商缓存(弱缓存)

image.png

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

整体优先级

先强缓存再到协商缓存

流程图

756299828_1580206133630_4A47A0DB6E60853DEDFCFDF08A5CA249.png

说说感想

本来想认认真真详详细细的写一遍,但是我感觉我参考的那些博客文章都写了特别的详细了,所以这里就把简要概括加上一些有可能问到问题加深知识点的印象。

参考看的文章顺序:

这篇文章让你知道http缓存干嘛用的,和它们的区别。

面试精选之http缓存

加深印象。

HTTP----HTTP缓存机制

下篇文章是根据koa2的http实践,里面有作者github的案例地址,大家可以拉下来加深认知。

通过 koa2 服务器实践探究浏览器HTTP缓存机制

最后, 共勉大家一起加油,如果文章对你有帮助,希望给我个赞谢谢。