美文网首页
浏览器缓存浅谈(强缓存与协商缓存的认知)

浏览器缓存浅谈(强缓存与协商缓存的认知)

作者: Erric_Zhang | 来源:发表于2017-02-09 12:07 被阅读0次

        谈到缓存时,大家想到的可能有浏览器缓存、CDN缓存、服务器缓存等,而浏览器缓存则是与我们前端开发最密切相关的,有时为了考虑用户体验以及网站性能优化,通常我们会考虑在浏览器缓存上做一定的优化,下面就谈谈我对浏览器缓存的基本认知。


我们通常所说的浏览器缓存,通常分为强缓存协商缓存两种:

1.强缓存和协商缓存

①浏览器在加载资源的时候会根据这个资源的一些http header判断它是否命中强缓存。如果命中了强缓存,浏览器就直接从缓存中加载这个资源,连请求都不会发送到网页所在的服务器。

②当强缓存没有命中时,浏览器会发送一个请求到服务器,服务器端依据资源的另一些http header验证是否命中协商缓存。若命中,服务器将这个请求返回,但不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就自己从自己的缓存中加载这个资源。

③当协商缓存没有命中的时候,浏览器直接从服务器加载资源数据。


2.1 强缓存的原理

命中强缓存后http状态码: 200

network里面的size显示from cache

http1.0:Expires

http1.1:Cache-Control

上面这两个header可以只启用一个或者两个都使用。两个同时存在时Cache-control的优先级高于Expires

2.2 强缓存的管理

可以通过两种方式设置强缓存:

① 通过代码的方式,在web服务器返回的响应中添加Expires和Cache-control Header

② 通过配置web服务器的方式,让web服务器在响应资源的时候统一添加Expires和Cache-control Header

2.3 由于在开发的时候不会专门去配置强缓存,而浏览器又默认会缓存图片、css和js等静态资源,所以开发环境下经常会因为强缓存导致资源没有及时更新而看不到最新的效果,解决这个问题的方法有很多,常用的有以下几种:

① ctrl+F5

② 使用浏览器的隐私模式开发

③ 如果用的是chrome浏览器的话,可以f12在network里面把缓存禁掉。

④ 给资源加上一个动态的参数,例如时间戳

⑥ 如果ajax请求存在缓存 可以在请求的地址栏追加随机数或者时间戳

⑦ 动态设置iframe时也可能会出现缓存问题,也可以在src后面动态添加时间戳或者随机数解决

2.4 强缓存的应用

① 强缓存是前端性能优化最有利的工具。对于有大量今天资源的网站,一定要利用强缓存,提高响应速度。

通常做法:将静态资源全部配置一个超时时间超长的Expires或Cache-Control。


3.1 协商缓存的原理

协商缓存状态码: 304 (Not Modified)

会显示资源的大小

从浏览器缓存中加载资源,但是会和web服务器通信,web服务器返回告知其在浏览器缓存中加载资源。

① 浏览器第一次跟服务器请求一个资源的时候,服务器在返回这个资源的同时,在response的header上加上Last-Modified的header

② 浏览器再次请求这个资源的时候,请求头上加上If-Modified-Since的header,这个header的值就是上一次请求返回时的Last-Modified的值

③服务器再次收到资源请求时,根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化,如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。当服务器返回304 Not Modified的响应时,response header中不会再添加Last-Modified的header,因为既然资源没有变化,那么Last-Modified也就不会改变,

3.2 协商缓存的管理

强缓存由于不发请求到服务器,所以不知道资源的更新,协商缓存会发请求到服务器,服务器知道支援的更新。大部分的web服务器都默认开启协商缓存。

1)当ctrl+f5强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存;

2)当f5刷新网页时,跳过强缓存,但是会检查协商缓存;

相关文章

  • 了解一下浏览器的协商缓存以及nginx如何配置

    强缓存与协商缓存的区别 强缓存:浏览器不与服务端协商直接取浏览器缓存协商缓存:浏览器会先向服务器确认资源的有效性后...

  • 协商缓存和强缓存

    浏览器缓存主要有两类:缓存协商和彻底缓存,也有称之为协商缓存和强缓存 浏览器缓存机制浏览器缓存(Brower Ca...

  • 浏览器缓存机制

    浏览器缓存分为强缓存和协商缓存。 强缓存 浏览器加载资源时,会先根据本地缓存资源 header 中的信息(expi...

  • 快速理解浏览器缓存

    快速理解浏览器缓存知识。 浏览器缓存主要为两类:强缓存、协商缓存。 和缓存相关的HTTP头有6个。 强缓存: Ca...

  • 浏览器缓存浅谈(强缓存与协商缓存的认知)

    谈到缓存时,大家想到的可能有浏览器缓存、CDN缓存、服务器缓存等,而浏览器缓存则是与我们前端开发最密切相关...

  • 浏览器缓存

    强缓存和协商缓存:强缓存优先于协商缓存进行;协商缓存失效,返回200,重新返回资源和缓存标志;协商缓存生效,返回3...

  • 浏览器缓存

    浏览器缓存分为两种,强缓存和协商缓存。浏览器缓存的流程大致如下: 强缓存 强缓存就是图中第一个判定条件。有两种方式...

  • http缓存

    http缓存分为强缓存和协商缓存。 ● 每次发起请求,浏览器都会先在浏览器缓存中查找该请求的结果以及缓存标识。● ...

  • HTTP缓存原理

    什么是HTTP缓存 HTTP缓存通常指浏览器缓存,基于HTTP中header字段实现HTTP缓存分为强缓存和协商缓...

  • 浏览器的缓存策略

    浏览器的缓存分为强缓存和协商缓存 1、强缓存 定义:不会向服务器发送请求,直接送浏览器中读取缓存可向请求头设置一下...

网友评论

      本文标题:浏览器缓存浅谈(强缓存与协商缓存的认知)

      本文链接:https://www.haomeiwen.com/subject/lzsiittx.html