浏览器缓存相关的知识点

浏览器的缓存能够极大程度的提高页面的性能,提高用户的使用体验。

当浏览器中第一次输入一个URL访问服务器,服务器发送资源,并带上一个ETag(当前资源的唯一标识符),以及Last-Modified(用来标记当前资源的最后修改时间) 浏览器请求到的资源进行缓存,当浏览器第二次请求的时候,根据浏览器的缓存机制来判断,缓存是否过期,如未过期,直接使用缓存的资源,如过期则向服务器重新请求资源。

1.1  浏览器缓存的控制  

   1.1.1 可以通过设置meta标签,设置当前页面不被缓存,每次访问都需要去服务器拉取

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

 1.1.2    与缓存有关系的HTTP消息报头

  Cache-Control    响应信息   

Cache-Control有很多值,max-age 为缓存最大的有效时间  no-cache  获取缓存前要向服务器请求,资源是否是最新的   no-store

禁止缓存

  Expries    用来指定资源的到期时间 ,优先级低于Cache-Control

  Last-modified & If-modified-since

   浏览器再次请求的时候,会在请求信息中带上If-modified-since  询问 Last-modified 时间点之前,资源是否被修改过,如果没有被修改则返回304,使用缓存,如果修改过,则再次向服务器请求资源,返回码为200

 Etag 和 If-None-Match

 服务器生成一段hash 字符串,来标记资源,浏览器携带请求头If-None-Match 检查Etag是否有更改 ,比Last-modified  更加准确,服务器会优先对比Etag

 1.1.2    以下单位请求浏览器不会缓存

  1.    HTTP信息头中 Cache-Control : no-cache  或者Cache-Control​​​​​​​ :max-age = 0
  2.    需要根据cookie,认证信息等决定输入内容的动态请求
  3.    post请求不能被缓存
  4.    经过https加密的缓存

   http响应头中不包含Last-modified & If-modified-since Etag 和 If-None-Match 不能被缓存​​​​​​​

用户行为对缓存的影响, F5 强缓存失效,ctrl+F5 缓存都失效,需要重新请求

发布了12 篇原创文章 · 获赞 1 · 访问量 403

猜你喜欢

转载自blog.csdn.net/gdloveyl/article/details/104201463