http 协议入门之缓存

学习前端,http协议是我们绕不过去的一个坎,而http协议中的缓存则是重中之重。

知识储备

如果阅读完上面这3篇文章以后没有什么疑问的话,那么完全可以不用阅读接下来的内容,下面的内容主要是对这些知识做一个梳理。

缓存的执行过程

首先第一次请求,请求成功,服务器返回200,然后再次请求该文件。这时,首先要判断一下,缓存有没有被关闭,比如在cache中设置no-stroe,那么就在本地根本没有缓存,会再次重新请求这个文件,服务器也会重新发送,并返回200,请求结束。
如果缓存服务没有被关闭,那么我们就找到上次响应的响应头,然后检查cache-control的值,如果cache-control的值是maxage,则对maxage做一个判断,判断有没有超出缓存时间,如果没有超出,则不发出http请求,直接使用本地的资源,如果超出了,则再次发送请求,让服务器来判断资源是否一致,如果资源没有发生改变,则返回304状态码,告知浏览器直接使用缓存就行。如果cache-control等于no-cache,那么就直接进入服务器判断资源是否一致环节。
服务器用来判断资源是否一致有2种方式:

  • 文件修改时间
  • 文件资源

第一种就是通过if-modified-sincelast-modified这2个属性来判断,第一次请求资源的时候响应端先返回一个last-modified时间字段,再次请求时候 request头部会将缓存中的last-modified字段拿出来赋给if-modified-since,发送给服务器,服务器去判断时间是否过期,如未过期则返回304,告诉客户使用缓存数据,如果过期则重新返回一个last-modified并且返回200。缺点是文件可能在1s内发生多次更改,结果不一定准确。

第二种则是靠if-none-matchetag,客户端第一次发送请求时候响应报文会包含字段Etag,表示资源状态,当资源改变后该值也会改变(客户端不必关心该值怎么生成),然后缓存保存下该字段,第二次已经有该缓存时候在浏览本地缓存时候会将该值赋给if-none-match字段发送给服务器,服务器将发送的值与当前的状态进行对比,如果值一样的话则答复304去使用缓存数据,如果值改变了则发送最新数据给客户端替代现有缓存数据,并且返回状态200。

前端如何设置缓存

  1. 通过meta标签的http-equiv属性进行设置
    <meta http-equiv="pragram" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate">
  2. 在ajax请求中通过setRequestHeaders这个方法设置

如果还有其他的设置方法,欢迎留言指教。

性能优化

前端性能优化里面有一条就是避免304请求,具体到我们这里就是设置一个特别长的max-age,比如将max-age设置为3140000,这样在文件没有发生变动的情况下,浏览器就不用发送请求,直接从本地取就行。当文件需要变动,比如发布新版本了,那么怎么办呢?其实可以借用etag的思路,文件命名的时候在后面加上?ver=54,比如index.html?ver=54,这样,当浏览器再次请求index.html的时候,对应的url从index.html?ver=53变成了index.html?ver=54,因为请求的url不一样,所以就相当于请求了一个新文件,这样就实现了文件更新。

    原文作者:HTTP
    原文地址: https://juejin.im/entry/594b2fe7128fe10065030ed5
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞