浏览器缓存机制

原创 2018年04月17日 11:16:36

在web的开发中,合理的利用缓存可以在重复获取一些静态资源时(比如最占用网络的图片)直接从缓存中读取,不用和服务端打交道,优化用户体验,并能够一定程度上降低服务器的压力

缓存可以分为两种:强制缓存和协商缓存

  • 强制缓存
    命中强制缓存的过程:
    浏览器请求—–>先获取header信息,判断是否命中强制缓存(根据expires或cache-control),如果命中强制缓存,本次请求不会和服务器打交道,数据直接会从缓存中读取。

    header信息:
    1、expires:这是http1.0的规范,它的值为一个绝对时间的GMT格式的时间字符串

    2、cache-control:这是http1.1时出现的header信息,主要是利用该字段的max-age值来进行判断,它是一个相对值;资源第一次的请求时间和cache-control设定的有效期,计算出一个资源过期时间,再拿这个过期时间跟当前的请求时间比较,如果请求时间在过期时间之前,就能命中缓存,否则就不行;cache-control除了该字段外,no-cache(使用协商缓存),no-store(禁止浏览器缓存数据,每次请求都会直接从服务器获取),public(可以被所有用户缓存),private(只能被终端用户缓存,不能被CDN等中继缓存服务器缓存)
    cache-control的优先级比expires的优先级高,有cache-control的情况下优先使用

  • 协商缓存
    协商缓存命中过程:
    在没有命中强制缓存的前提下(就是说强制缓存的优先级比协商缓存的优先级高),浏览器会携带缓存中的header信息中的Last-Modified/If-Modified-Since和Etag/If-None-Match等字段去请求服务器,询问服务器是否可以使用缓存,若命中,则服务器返回新的响应header信息更新缓存中的对应header信息,但是并不返回资源内容,它会告知浏览器可以直接从缓存获取;否则返回最新的资源内容和header信息,更新缓存

    从协商缓存中读取数据时,http状态码为304

    1、Last-Modified/If-Modified-Since:两个的值都是一个GMT格式的时间,浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Last-Modified的header,这个header表示这个资源在服务器上的最后修改时间,浏览器再次跟服务器请求这个资源时,在request的header上加上If-Modified-Since的header,这个header的值就是上一次请求时返回的Last-Modified的值,服务器收到请求时,根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化,如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。当服务器返回304 Not Modified的响应时,response header中不会再添加Last-Modified的header,因为既然资源没有变化,那么Last-Modified也就不会改变,这是服务器返回304时的response header,浏览器收到304的响应后,就会从缓存中加载资源,如果协商缓存没有命中,浏览器直接从服务器加载资源时,Last-Modified的Header在重新加载的时候会被更新,下次请求时,If-Modified-Since会启用上次返回的Last-Modified值

    2、Etag/If-None-Match:这两个值是由服务器生成的每个资源的唯一标识字符串,只要资源有变化就这个值就会改变;其判断过程与Last-Modified/If-Modified-Since类似,与Last-Modified不一样的是,当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag跟之前的没有变化。

这里写图片描述

参考文章:https://www.cnblogs.com/wonyun/p/5524617.html

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_34368775/article/details/79972122

浏览器端的九种缓存机制介绍

浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户。浏览器端缓存的机制种类较多,总体归纳为九...
  • ccfxue
  • ccfxue
  • 2017-07-22 19:28:59
  • 508

浏览器缓存机制图解流程总结

一、浏览器缓存机制流程 二、相关术语的解释 1.Etag 2.Last-Modified 3.Expires 4.Cache-control...
  • qq_37943295
  • qq_37943295
  • 2017-08-04 15:29:15
  • 380

【缓存技术原理】浏览器端缓存机制详解

浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户。浏览器端缓存的机制种类较多,总体归纳为九...
  • moshenglv
  • moshenglv
  • 2016-07-25 09:07:56
  • 10492

HTTP浏览器缓存机制

1、HTTP浏览器缓存机制 清晰明了的介绍 http://www.cnblogs.com/sunxucool/p/3342790.html 2、HTTP 头缓存Last-Modifi...
  • lzlchangqi
  • lzlchangqi
  • 2014-12-26 09:38:21
  • 507

atitit。浏览器缓存机制 and 微信浏览器防止缓存的设计 attilax 总结

atitit。浏览器缓存机制 and 微信浏览器防止缓存的设计 attilax 总结   1. 缓存的一些机制 1 1.1. http 304 1 1.2. 浏览器刷新的处理机制 1 1.3...
  • attilax
  • attilax
  • 2015-07-12 01:17:15
  • 2330

ie浏览器(包括微软的最新的edge)最ajax请求具有缓存机制

ie浏览器对相同url的的ajax请求具有缓存的机制,这样在ajax请求的数据,在数据库发生变化的时候,页面将会不发生更新,不知道这个机制是bug,还是属于ie的优化,但有时确实会带来麻烦,并且其他浏...
  • s8460049
  • s8460049
  • 2016-08-21 13:10:27
  • 884

从php到浏览器的缓存机制,不得不看!_0

所有的php程序员都知道在php脚本里面执行 echo “1”;访客的浏览器里面就会显示“1”。 但是我们执行下面的代码的时候,并不是显示“1”之后5秒再显示“2”,而是等待5秒后直接显示“12” ...
  • gcqcc848
  • gcqcc848
  • 2017-01-25 12:38:00
  • 98

浏览器缓存机制(1)

浏览器缓存机制之一(经典缓存) 因为在接手的项目中用到过比较新的HTML5应用缓存,也用到了经典的缓存如设置max-age,Etag之类,而之前一直就是在用着没有去深究其中原理。周末天气不好,懒得...
  • ssjhust123
  • ssjhust123
  • 2015-03-10 23:14:11
  • 1371

浏览器缓存策略Httpwatch

  • 2012年09月29日 17:15
  • 251KB
  • 下载
收藏助手
不良信息举报
您举报文章:浏览器缓存机制
举报原因:
原因补充:

(最多只允许输入30个字)