关闭

浏览器缓存问题原理以及解决方案

时间: 2018-05-09阅读: 1829标签: 缓存

浏览器缓存问题:

简单来说,浏览器缓存就是把一个已经请求过的Web资源(如html页面,图片,js数据等)拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页,当再次访问这个URL地址的时候,如果网页没有更新,就不会再次下载网页,而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新,浏览器才会再次下载网页。


为什么使用缓存:

(1)减少网络带宽消耗

(2)降低服务器压力

(3)减少网络延迟,加快页面打开速度

浏览器端的缓存规则:

新鲜度(过期机制):也就是缓存副本有效期。

校验值(验证机制):资源的实体标签Etag(EntityTag)

 

解决方法:

(1)使用htmlMeta标签

Web开发者可以在HTML页面的<head>节点中加入<meta>标签,代码如下

<metahttp-equiv="Pragma"content="no-cache">

事实上这种禁用缓存的形式用处很有限:

 a.仅有IE才能识别这段meta标签含义,其它主流浏览器仅识别“Cache-Control:no-store”的meta标签。
 b.在IE中识别到该meta标签含义,并不一定会在请求字段加上Pragma,但的确会让当前页面每次都发新请求(仅限页面,页面上的资源则不受影响)


(2)使用缓存有关的HTTP消息报头

在HTTP请求和响应的消息报头中,常见的与缓存有关的消息报头有:

规则

消息包头

值/示例

类型

作用

新鲜度

Pragma

no-cache

响应

告诉浏览器忽略资源的缓存副本,每次访问都需要去服务器拉取【http1.0中存在的字段,在http1.1已被抛弃,使用Cache-Control替代,但为了做http协议的向下兼容,很多网站依旧会带上这个字段】

Expires

Mon,15Aug201603:56:47GMT

响应

启用缓存和定义缓存时间。告诉浏览器资源缓存过期时间,如果还没过该时间点则不发请求【http1.0中存在的字段,该字段所定义的缓存时间是相对服务器上的时间而言的,如果客户端上的时间跟服务器上的时间不一致(特别是用户修改了自己电脑的系统时间),那缓存时间可能就没啥意义了。在HTTP1.1版开始,使用Cache-Control:max-age=秒替代】

Cache-Control

no-cache

响应

告诉浏览器忽略资源的缓存副本,强制每次请求直接发送给服务器,拉取资源,但不是“不缓存”

no-store

响应

强制缓存在任何情况下都不要保留任何副本

max-age=[秒]

响应

指明缓存副本的有效时长,从请求时间开始到过期时间之间的秒数

public

响应

任何路径的缓存者(本地缓存、代理服务器),可以无条件的缓存改资源

private

响应

只针对单个用户或者实体(不同用户、窗口)缓存资源

Last-Modified

Mon,15Aug201603:56:47GMT

响应

告诉浏览器这个资源最后的修改时间。服务器将资源传递给客户端时,会将资源最后更改的时间以“Last-Modified:GMT”的形式加在实体首部上一起返回给客户端【只能精确到秒级,如果某些文件在1秒钟以内,被修改多次的话,它将不能准确标注文件的修改时间】

If-Modified-Since

Mon,15Aug201603:56:47GMT

请求

其值为上次响应头的Last-Modified值,再次向web服务器请求时带上头If-Modified-Since。web服务器收到请求后发现有头If-Modified-Since则与被请求资源的最后修改时间进行比对。若最后修改时间较新,说明资源又被改动过,则响应整片资源内容(写在响应消息包体内),包括更新Last-Modified的值,HTTP200;若最后修改时间较旧,说明资源无新修改,则响应HTTP304(无需包体,节省浏览),告知浏览器继续使用所保存的cache

校验值

ETag

"fd56273325a2114818df4f29a628226d"

响应

告诉浏览器当前资源在服务器的唯一标识符(生成规则又服务器决定)

If-None-Match

"fd56273325a2114818df4f29a628226d"

请求

当资源过期时(使用Cache-Control标识的max-age),发现资源具有Etage声明,则再次向web服务器请求时带上头If-None-Match(Etag的值)。web服务器收到请求后发现有头If-None-Match则与被请求资源的相应校验串进行比对,决定返回200或304

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/744

关闭

抽离css以及公共js

分离css:为何要把 CSS 文件分离出来,而不是直接一起打包在 JS 中。当我们考虑更好地利用缓存来加速静态资源访问时,会尝试把一些公共资源单独分离开来,利用缓存加速,以避免重复的加载

Nginx禁止html等缓存

在本地开发的时候,经常会碰到缓存引起的莫名其妙的问题,最暴力的方式就是清掉浏览器的缓存,或者使用Ctrl + F5,Shift + F5强制刷新页面。 有时候按了好几下,缓存还是清不掉,只能暂时禁用浏览器静态资源缓存了

运用惰性删除和定时删除实现可过期的localStorage缓存

使用localStorage可以在浏览器中存储键值对的数据。经常被和localStorage一并提及的是sessionStorage,它们都可以在当浏览器中存储键值对的数据。但是它们之间的区别是:存储在localStorage的数据可以长期保留;而当页面会话结束

localstorage实现带过期时间的缓存功能

一般可以使用cookie,localstorage,sessionStorage来实现浏览器端的数据缓存,减少对服务器的请求。cookie数据存放在本地硬盘中,只要在过期时间之前,都是有效的,即使重启浏览器。

nginx开启gzip压缩和静态缓存

nginx实现资源压缩的原理是通过ngx_http_gzip_module模块拦截请求,并对需要做gzip的类型做gzip压缩,该模块是默认基础的,不需要重新编译,直接开启即可。

给url加时间戳,骗过浏览器缓存

修改js的时候总是因为浏览器不刷新缓存,导致修改无效。URL后面添加随机数通常用于防止客户端(浏览器)缓存页面。 浏览器缓存是基于url进行缓存的,如果页面允许缓存

缓存命中率过低;大量缓存项同时刷新;刷新同一个缓存项

缓存的作用是在内存中临时存储来自外部系统(如数据库)的数据,以便让请求更快的得到响应。如果请求数据在缓存中不存在,或者已经超时失效,那么也要从外部系统查询,然后放入缓存中,这个过程叫刷新缓存。

vue开发之keep-alive

keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 transition 相似,keep-alive 是一个抽象组件:它自身不会渲染成一个 DOM 元素,也不会出现在父组件链中。

浏览器的缓存策略

已开始生产的项目,用户每次刷新的时候大多数与上次请求的数据一致。那么服务器端的数据没有更新,客户端也没有必要每次都去服务器端拉取数据,占用服务器的带宽。这时候需要前端的静态文件缓存机制。以下以nginx配置为例

浏览器端的九大缓存

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

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!