资讯专栏INFORMATION COLUMN

浏览器缓存机制

ISherry / 1859人阅读

摘要:是协议提供的若干机制中的一种缓存验证机制,并且允许客户端进行缓存协商。在浏览器地址栏按回车刷新网页的区别看过很多文章将缓存,好像大家都忽略了一件事,就是浏览器地址栏按回车刷新网页缓存是各不一样的。

引子

昨天晚上上线到很晚,今天早上迷迷糊糊到公司就看到领导在群里@我,气冲冲的说为什么我回车网址还是以前的页面,技术leader好心提醒他说有缓存,刷新一下就好了。果然刷新一下就好了,领导消气完之后跑过来说我不要缓存,好吧,本着我一贯拍领导马屁不动摇的原则,我把电脑和刀抱到运维同学旁边搞了半天,才保证领导每次看到的200的请求返回。

Expires

HTTP头信息Expires(过期时间)属性是HTTP控制缓存的基本手段,这个属性告诉缓存器:相关副本在多长时间内是新鲜的。过了这个时间,缓存器就会向源服务器发送请求,检查文档是否被修
改。几乎所有的缓存服务器都支持Expires(过期时间)属性;

其实大白话来说,就是服务器设置的一个失效时间,通过response头Expires属性告诉浏览器你需不需要重新向服务器发送请求,如果Expires未失效,HTTP返回状态显示200 OK,但是请求并没有真正提交到HTTP服务器,而是浏览器发现缓存中还有未过期的文件,当我们在浏览器地址栏按回车这个属性才会生效。

ETag

ETag或实体标签(entity
tag)是万维网协议HTTP的一部分。ETag是HTTP协议提供的若干机制中的一种Web缓存验证机制,并且允许客户端进行缓存协商。这就使得缓存变得更加高效,而且节省带宽。如果资源的内容没有发生改变,Web服务器就不需要发送一个完整的响应。ETag也可用于乐观并发控制,作为一种防止资源同步更新而相互覆盖的方法。

简单来说,ETag是服务器为文件生成的md5戳,如果ETag是处于关闭的状态,则浏览器会跳过此环节。如果此时etag是存在的,浏览器会带着这个戳请求服务器,服务器根据这个戳是否变化判断是否缓存静态资源,这个时候如果服务器判断这个值并没有变化,那么就会返回304的请求头。

Last-Modified

在浏览器第一次请求某一个URL时,服务器端的返回状态会是200,内容是你请求的资源,同时有一个Last-Modified的属性标记(HttpReponse
Header)此文件在服务期端最后被修改的时间

如果服务器端的资源没有变化,则自动返回 HTTP 304(Not Changed.)状态码,内容为空,这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似。从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。

在浏览器地址栏按回车、F5、Ctrl+F5刷新网页的区别

看过很多文章将缓存,好像大家都忽略了一件事,就是浏览器地址栏按回车、F5、Ctrl+F5刷新网页缓存是各不一样的。
回车在 Expires有效的时候,是不会去请求服务器的,直接读取本地硬盘缓存。
F5 Cache-Control: no-cache,只有Last-Modified/ETag有效果。
Ctrl+F5则会发送 Cache-Control: no-cache,If-Modified-Since off,etag off,真正的从服务器重新获取文件,此时缓存完全失效。

结尾上代码
 location ~ .*.(gif|jpg|jpeg|bmp|png|ico|txt|js|css|html)$
{

    root   /usr/share/nginx/html;
    expires      -1;
    add_header Last-Modified $date_gmt;
    if_modified_since off;
    etag off;
}

其实现在每次上线的js css文件都是webpack打包生成文件名都会带上md5戳,只有html文件会存在上线缓存。没办法,为了满足领导的口味,我含泪让运维按上面的代码把nginx配置改了。。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83427.html

相关文章

  • Web缓存相关知识整理

    摘要:缓存缓存,也叫网关缓存反向代理缓存。浏览器先向网关发起请求,网关服务器后面对应着一台或多台负载均衡源服务器,会根据它们的负载请求,动态将请求转发到合适的源服务器上。虽然这种架构负载均衡源服务器之间的缓存没法共享,但却拥有更好的处扩展性。 一、前言  工作上遇到一个这样的需求,一个H5页面在APP端,如果勾选已读状态,则下次打开该链接,会跳过此页面。用到了HTML5 的本地存储 API ...

    rickchen 评论0 收藏0
  • H5 缓存机制浅析 - 移动端 Web 加载性能优化

    摘要:根据标准,到目前为止,一共有种缓存机制,有些是之前已有,有些是才新加入的。首次请求缓存有效期内请求缓存过期后请求一般浏览器会将缓存记录及缓存文件存在本地文件夹中。 腾讯 Bugly 特约作者:贺辉超 1. H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离线存储,这意味着 web ...

    alin 评论0 收藏0
  • 览器缓存是什么?它的机制又是什么?

    摘要:对于浏览器缓存,相信很多开发者对它真的是又爱又恨。那么浏览器缓存究竟是个什么样的神奇玩意呢什么是浏览器缓存简单来说,浏览器缓存就是把一个已经请求过的资源如页面,图片,,数据等拷贝一份副本储存在浏览器中。 对于浏览器缓存,相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验,而另一方面有时会因为读取了缓存而展示了错误的东西,而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟...

    jsummer 评论0 收藏0
  • 览器缓存是什么?它的机制又是什么?

    摘要:对于浏览器缓存,相信很多开发者对它真的是又爱又恨。那么浏览器缓存究竟是个什么样的神奇玩意呢什么是浏览器缓存简单来说,浏览器缓存就是把一个已经请求过的资源如页面,图片,,数据等拷贝一份副本储存在浏览器中。 对于浏览器缓存,相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验,而另一方面有时会因为读取了缓存而展示了错误的东西,而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟...

    godruoyi 评论0 收藏0
  • 览器缓存机制

    摘要:从浏览器角度来看,整个就是一个源服务器,从这个层面来说,浏览器和服务器之间的缓存机制,在这种架构下同样适用。如果命中,则返回,告诉浏览器资源未更新,可使用本地的缓存。 缓存类型 缓存在宏观上可以分成两类:私有缓存和共享缓存。共享缓存就是那些能被各级代理缓存的缓存。私有缓存就是用户专享的,各级代理不能缓存的缓存。 微观上可以分下面几类: 浏览器缓存 缓存存在的意义就是当用户点击back按...

    LeanCloud 评论0 收藏0

发表评论

0条评论

ISherry

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<