`
csd_ali
  • 浏览: 133650 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

浅谈浏览器缓存

阅读更多

 

 

  • 为什么使用浏览器缓存
  • 缓存存在的内容
  • 缓存协商
  • 缓存协商的简单演示
  • 缓存相关的header
  • 缓存相关header之间的关系
  • 用户的不同操作
  • 用户不同操作对应浏览器的不同处理方式
  • 测试环境与线上环境取js方式不同导致的问题

 

 

为什么使用本地缓存

对于一些比较少变化的文件,如jscss等,可以在第一次请求之后将这些文件先放在本地,在下次再去请求这些文件的时候就可以不用再去请求,直接使用本地的就可以了,直接消灭请求。这是最好的减少带宽占用、降低服务器压力的方法,同时也可以最大限度的提升页面的显示速度(直接本地取)。

 

查看缓存:

 

ieInternet选项-设置-查看文件


 

Firefox:缓存采用二进制的方式存储,查看可以在地址栏中输入about:cache

 

 

缓存存在的问题

       既然存在了本地,那么最大的问题就是一旦服务器的文件更新了,而浏览器还在使用本地的缓存,会造成服务器端的修改不能生效。

缓存协商

       缓存的文件是由服务器生成,在本地保存,所以对缓存的使用必须要双方配合才能达到最好的效果,这样就引入了缓存协商。

       缓存协商其实就是浏览器在请求某个文件的时候,服务器在返回时会在头部加一些额外的信息,如这个文件在多长时间内可以使用、文件的最后修改时间是什么等等,浏览器在下次再请求这个文件的就会根据之前服务器在头部加入的额外信息来对应的进行一些处理。

 

缓存协商的简单演示

http://levit.china.alibaba.com/guarantee/listBuyerContract/list.htm


注释:左侧的是一个.htm的请求,右侧是一个js的请求

 


注释:在第二次请求的时候.js的请求头信息中多出了红框中的三个值

 

缓存相关的header

Cache-control常用值

  1. public 指示响应数据可以被任何客户端缓存
  2. private 指示响应数据可以被非共享缓存所缓存。这表明响应的数据可以           被发送请求的浏览器缓存,而不能被中介所缓存
  3. no-cache 指示响应数据不能被任何接受响应的客户端所缓存
  4. max-age 数据经过max-age设置的秒数后就会失效,相当于HTTP/1.0中的Expires头。如果在一次响应中同时设置了max-age Expires,那么max-age将具有较高的优先级。

Cache-control

打开一个新页面

在原始窗口中单击 Enter 按钮

F5 键刷新

单击 Back Forward 按钮

public

浏览器呈现来自缓存的页面

浏览器呈现来自缓存的页面

浏览器重新发送请求到服务器

浏览器呈现来自缓存的页面

private

浏览器重新发送请求到服务器

第一次,浏览器重新发送请求到服务器;此后,浏览器呈现来自缓存的页面

浏览器重新发送请求到服务器

浏览器呈现来自缓存的页面

no-cache

浏览器重新发送请求到服务器

浏览器重新发送请求到服务器

浏览器重新发送请求到服务器

浏览器重新发送请求到服务器

max-age=xxx

xxx 秒后,浏览器重新发送请求到服务器

xxx 秒后,浏览器重新发送请求到服务器

浏览器重新发送请求到服务器

xxx 秒后,浏览器重新发送请求到服务器

 

Last-modified:在浏览器第一次请求页面的时候如果返回的header中有这一项的值,则在下次请求的头信息中会加入if-modified-since这个值,服务器端取到这个值后去判断和该文件的最后修改时间是否一样,如果一样,则直接返回304not modified),通知浏览器可以使用本地缓存。


 

E-tag:在浏览器第一次请求页面的时候如果返回的header中有这一项的值,则在下次请求的头信息中会加入if-None-match这个值,服务器端取到这个值后去和这个文件生成的E-tag值进行对比,如果一样,则直接返回304not modified),通知浏览器可以使用本地缓存。Etag默认生成规则是根据文件的inode、文件大小、文件修改时间,可以通过配置选择其中的某几项来生成、

 


 

Expires:过期时间,在这个时间之前,不会再去想服务器发任何请求,直接用本地缓存


缓存相关header的关系

Cache-control会覆盖掉Expires的值,即如果同时存在cache-control:max-age=900expires:******,则以cache-control的值为准

 

Etaglast-modified的值同时存在的时候,last-modified的值失效,仅判断Etag

 

用户的几种不同操作

       当用户打开一个新的浏览器窗口时的失效操作提高访问速度,提升用户的体验

       当用户在原始浏览器窗口中单击 Enter 按钮时的失效操作

       当用户单击 Back Forward 按钮时的失效操作

       当用户按 F5 键刷新页面时的失效操作

       用户按ctrl+F5

不同的操作对应的不同请求

下面截图的情况为firefox中请求http://levit.china.alibaba.com/guarantee/listBuyerContract/list.htm这个网址的结果。

 

 

新打开浏览器窗口:未过期的缓存直接使用本地的,不向服务器发送请求


 

在地址栏单击回车:未过期的缓存直接使用本地的,不向服务器发送请求

(注:在ie中在地址栏单击回车行为与下面的回退一样,全部使用本地缓存,不论过不过期)



 

回退:不论缓存由没有过期,都使用本地缓存。可以看出来比上面少了两个请求,原因是上图中标红的请求的两个文件的缓存都已过期,但在回退时不管是否已过期,直接使用缓存。(浏览器默认对所有的文件都进行缓存,是否使用另说)。剩下的五个请求是因为这几个请求携带的参数都有一个每次都不一样的,导致本地没有与其对应的缓存(例如参数中有系统本地时间)。

 


 

 

F5:所有的文件都会发送请求,有缓存的进行缓存协商,没有修改的返回304使用本地缓存。

 


 

 

Ctrl+F5:所有文件都会发送请求,并且不进行缓存协商(cache-control:no-cache),每个文件重新返回(200


 

 

此次整理的正文到这里就结束了,下面列出的是可能比较多关注的点:

 

1.       Cache-control的值覆盖其他的设置

2.       Etaglast-modified共存的时候以Etag为准

3.       F5刷新的时候不论缓存过不过期都会和服务器进行缓存协商(带上Etaglast-modified之类的信息)

4.       ctrl+F5的时候直接在浏览器单方面决定不使用缓存(直接cache-control:no-cache

5.       在后退的时候除非显式的声明no-cache,否则都会使用缓存(不论是否过期)

 

  • 大小: 27.4 KB
  • 大小: 62 KB
  • 大小: 75 KB
  • 大小: 28.1 KB
  • 大小: 29 KB
  • 大小: 20.5 KB
  • 大小: 32.9 KB
  • 大小: 34.4 KB
  • 大小: 35.4 KB
  • 大小: 99.6 KB
  • 大小: 77.2 KB
  • 大小: 32.8 KB
分享到:
评论
1 楼 liuweihug 2014-10-21  
图说浏览器的缓存原理及缓存方式说明(1)
http://www.suchso.com/projecteactual/web-server-browser-cache-1.html

相关推荐

    浅谈Ajax请求与浏览器缓存

    下面小编就为大家带来一篇浅谈Ajax请求与浏览器缓存。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    缓存技术浅谈

    操作系统磁盘缓存 减少磁盘机械操作 数据库缓存 减少文件系统I/O 应用程序缓存 减少对数据库的查询 Web服务器缓存 减少应用服务器请求 客户端浏览器缓存 减少对网站的访问

    浅谈HTTP 缓存的那些事儿

    由于从本地缓存读取静态资源,加快浏览器的网页加载速度是一定的,也确实的减少了数据传输,就提高网站性能来说,可能一两个用户的访问对于减小服务器的负担没有明显效果,但如果这个网站在高并发的情况下,使用缓存...

    浅谈Ajax的缓存机制

    Ajax的缓存机制和浏览器处理资源时的缓存机制是一样的。 三条简单规则: 只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置)。 只要是POST请求,...

    浅谈利用缓存来优化HTML5 Canvas程序的性能

    canvas玩多了后,就会自动的要开始考虑性能问题了。怎么优化canvas的动画呢?  【使用缓存】  使用缓存也就是用离屏canvas进行预渲染了...这就是双缓冲,但是canvas中是没有双缓冲的,因为现代浏览器基本上都是内置了

    浅谈Python的Django框架中的缓存控制

    通常用户将会面对两种缓存: 他或她自己的浏览器缓存(私有缓存)以及他或她的提供者缓存(公共缓存)。 公共缓存由多个用户使用,而受其他某人的控制。 这就产生了你不想遇到的敏感数据的问题,比如说你的银行账号...

    浅谈Webpack 持久化缓存实践

    最近在看 webpack 如何做持久化缓存的内容,发现其中还是有一些坑点的,正好有时间就将它们整理总结一下,读完本文你大致能够明白: 什么是持久化缓存,为什么做持久化缓存? webpack 如何做持久化缓存? webpack ...

    浅谈Vue页面级缓存解决方案feb-alive(上)

    开发者无需手动缓存页面状态,例如通过localStorage或者sessionStorage缓存当前页面的数据 feb-alive会帮你处理路由meta信息的存储与恢复 为什么开发feb-laive? 当我们通过Vue开发项目时候,是否会有以下场景...

    浅谈django三种缓存模式的使用及注意点

    如果能将渲染后的结果放到速度更快的缓存中,每次有请求过来,先检查缓存中是否有对应的资源,如果有,直接从缓存中取出来返回响应,节省取数据和渲染的时间,不仅能大大提高系统性能,还能提高用户体验。...

    浅谈微信页面入口文件被缓存解决方案

    缓存对于前端页面来说,是加速页面加载的利器之一,但也同时带来了很多问题,比如新版本发布之后,怎么替换客户端上的缓存文件呢?大家一般的的解决方案主要有以下几种形式, 一般情况 1、添加版本号,在静态资源...

    浅谈Vue页面级缓存解决方案feb-alive (下)

    Vue页面级缓存解决方案feb-alive (上) 在剖析feb-alive实现之前,希望大家对以下基本知识有一定的了解。 keep-alive实现原理 history api vue渲染原理 vue虚拟dom原理 feb-alive与keep-alive差异性 1. 针对...

    浅谈PHP中output_buffering

    由于PHP是基于B/S架构的,所以,我们可以理解为浏览器端的缓存,服务器端缓存。 在服务器端PHP自带的缓存中,主要可以分为两大类缓存!程序缓存和OB缓存!这也是我们学习服务器端缓存的主要内容! 在PHP中缓存的输出...

    浅谈JS和jQuery的区别

    库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,...

    浅谈JavaScript的Polymer框架中的behaviors对象

     CacheStorage 在浏览器上的引用名叫 caches 而不是驼峰写法的 cacheStorage,它定义在 ServiceWorker 的规范中。CacheStorage 是多个 Cache 的集合,而每个 Cache 可以存储多个 Response 对象。  废话不能说再多...

    浅谈AngularJS中$http服务的简单用法

    $http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。 1、链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容。这个函数返回一个promise对象,具有success...

    大数据在生活中的应用(1).doc

    进而言之,这是由于浏览器缓存cookie,你通过浏览器浏览任意网站内容时,都会 在你的计算机缓存文件夹内生成一个缓存文件,其记录了你什么时间,通过什么渠道,访问 了什么内容,做了些什么,等等一系列的信息。...

    大数据在生活中的应用.doc

    进而言之,这是由于浏览器缓存cookie,你通过浏览器浏览任意网站内容时,都会在 你的计算机缓存文件夹内生成一个缓存文件,其记录了你什么时间,通过什么渠道,访问 了什么内容,做了些什么,等等一系列的信息。...

    大数据在生活中的应用.docx

    进而言之,这是由于浏览器缓存cookie,你通过浏览器浏览任意网站内容时,都会在你的计算机缓存文件夹内生成一个缓存文件,其记录了你什么时间,通过什么渠道,访问了什么内容,做了些什么,等等一系列的信息。...

Global site tag (gtag.js) - Google Analytics