当前位置:首页 > 网站技术 > 前端技术 > 正文内容

浏览器几种缓存方法的比较

binadmin2020-06-22前端技术132


在Web应用领域,Web缓存大致可以分为以下几种类型:

1.数据库数据缓存

Web应用,特别是社交网络服务类型的应用,往往关系比较复杂,数据库表繁多,如果频繁进行数据库查询,很容易导致数据库不堪重荷。为了提供查询的性能,会将查询后的数据放到内存中进行缓存,下次查询时,直接从内存缓存直接返回,提供响应效率。比如常用的缓存方案有memcached,redis等。

2.服务器端缓存

- 代理服务器缓存

代理服务器是浏览器和源服务器之间的中间服务器,浏览器先向这个中间服务器发起Web请求,经过处理后(比如权限验证,缓存匹配等),再将请求转发到源服务器。代理服务器缓存的运作原理跟浏览器的运作原理差不多,只是规模更大。可以把它理解为一个共享缓存,不只为一个用户服务,一般为大量用户提供服务,因此在减少相应时间和带宽使用方面很有效,同一个副本会被重用多次。常见代理服务器缓存解决方案有Squid,Nginx,apache等。

- CDN缓存

CDN(Content delivery networks)缓存,也叫网关缓存、反向代理缓存。CDN缓存一般是由网站管理员自己部署,为了让他们的网站更容易扩展并获得更好的性能。浏览器先向CDN网关发起Web请求,网关服务器后面对应着一台或多台负载均衡源服务器,会根据它们的负载请求,动态将请求转发到合适的源服务器上。虽然这种架构负载均衡源服务器之间的缓存没法共享,但却拥有更好的处扩展性。从浏览器角度来看,整个CDN就是一个源服务器,浏览器和服务器之间的缓存机制,在这种架构下同样适用。

3.浏览器端缓存

浏览器缓存根据一套与服务器约定的规则进行工作,在同一个会话过程中会检查一次并确定缓存的副本足够新。如果你浏览过程中,比如前进或后退,访问到同一个图片,这些图片可以从浏览器缓存中调出而即时显现。

4.Web应用层缓存

应用层缓存指的是从代码层面上,通过代码逻辑和缓存策略,实现对数据,页面,图片等资源的缓存,可以根据实际情况选择将数据存在文件系统或者内存中,减少数据库查询或者读写瓶颈,提高响应效率。

什么是浏览器缓存

浏览器缓存 是指一个Web资源(如html页面,图片,js,数据等)存在于Web服务器和客户端(浏览器)之间的副本。缓存会根据进来的请求保存输出内容的副本;当下一个请求来到的时候,如果是相同的URL,缓存会根据缓存机制决定是直接使用副本响应访问请求,还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页,当再次访问这个URL地址的时候,如果网页没有更新,就不会再次下载网页,而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新,浏览器才会再次下载网页。至于浏览器和网站服务器是如何标识网站页面是否更新的机制,将在后面介绍。

浏览器缓存 这个概念,对于经常用浏览器来浏览信息的用户来说并不十分陌生。用户也许在用浏览器浏览信息时,经常使用”返回”和”后退”的浏览功能,调用你以前阅读过的页面,这时,你会发现显示速度是很快的,其实这些你刚调出来的内容就放在计算机的缓存中,而不需要再次从Internet上重新传输数据,这样就会给用户造成了一种访问速度被提高的错觉。 所以浏览器缓存其实就是指在本地使用的计算机中开辟一个内存区,同时也开辟一个硬盘区作为数据传输的缓冲区,然后用这个缓冲区来暂时保存用户以前访问过的信息。既然缓存存在于硬盘之中,那么它肯定是以文件夹的形式出现的(查看各浏览器本地缓存位置)。

使用Web缓存的作用其实是非常显而易见的:

减少网络带宽消耗

无论对于网站运营者或者用户,带宽都代表着金钱,过多的带宽消耗,只会便宜了网络运营商。当Web缓存副本被使用时,只会产生极小的网络流量,可以有效的降低运营成本。

降低服务器压力

给网络资源设定有效期之后,用户可以重复使用本地的缓存,减少对源服务器的请求,间接降低服务器的压力。同时,搜索引擎的爬虫机器人也能根据过期机制降低爬取的频率,也能有效降低服务器的压力。

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

带宽对于个人网站运营者来说是十分重要,而对于大型的互联网公司来说,可能有时因为钱多而真的不在乎。那Web缓存还有作用吗?答案是肯定的,对于最终用户,缓存的使用能够明显加快页面打开速度,达到更好的体验。

现在的大型网站,随便一个页面都是一两百个请求,每天 pv 都是亿级别,如果没有缓存,用户体验会急剧下降、同时服务器压力和网络带宽都面临严重的考验。 缓存和重用以前获取的资源的是优化网页性能很重要的一个方面。

缺点也是有的:

缓存没有清理机制:这些缓存的文件会永久性地保存在机器上,在特定的时间内,这些文件可能是帮了你大忙,但是时间一长,我们已经不再需要浏览之前的这些网页,这些文件就成了无效或者无用的文件,它们存储在用户硬盘中只会占用空间而没有任何用处,如果要缓存的东西非常多,那就会撑暴整个硬盘空间。

给开发带来的困扰:明明修改了样式文件、图片、视频或脚本,刷新页面或部署到站点之后看不到修改之后的效果。

所以在产品开发的时候我们总是想办法避免缓存产生,而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理和清除方法,对我们大有裨益。

浏览器缓存的类型

1、非http协议定义的缓存机制

浏览器缓存机制,其实主要就是http协议定义的缓存机制(如: Expires; Cache-control等)。但是也有非http协议定义的缓存机制,如使用html meta 标签,Web开发者可以在html页面的节点中加入标签,代码如下:

1、Expires(期限)

说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。

用法:

html代码
<meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT">

注意:必须使用GMT的时间格式。

2、Pragma(cache模式)

说明:是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出

用法:

html代码
<meta http-EQUIV="Pragma" CONTENT="no-cache">

注意:这样设定,访问者将无法脱机浏览。

更多设置:参看Meta http-equiv属性详解

2、http协议定义的缓存机制。

浏览器缓存机制图

3.jpg 

 浏览器缓存机制策略

3、其他主流浏览器缓存机制

•websql

•indexDB

cookie

•localstorage

sessionstorage

•application cache

•cacheStorage

较多的缓存机制目前主流浏览器并不兼容,不过可以使用polyfill的方法来处理。

https://github.com/Modernizr/Modernizr/wiki/html5-Cross-Browser-Polyfills

http协议下的缓存机制

1. http协议缓存基本认识

它分为强缓存协商缓存
1
)浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器;

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

3)强缓存与协商缓存的共同点是:如果命中,都是从客户端缓存中加载资源,而不是从服务器加载资源数据;区别是:强缓存不发请求到服务器,协商缓存会发请求到服务器。

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

2. 强缓存的原理

当浏览器对某个资源的请求命中了强缓存时,返回的http状态为200,在chrome的开发者工具的network里面size会显示为from cache

强缓存是利用Expires或者Cache-Control这两个http response header实现的,它们都用来表示资源在客户端缓存的有效期。

Expireshttp1.0提出的一个表示资源过期时间的header,它描述的是一个绝对时间,由服务器返回,用GMT格式的字符串表示,如:Expires:Thu, 31 Dec 2017 23:55:55 GMT,它的缓存原理是:

1)浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在responeheader加上Expiresheader

2)浏览器在接收到这个资源后,会把这个资源连同所有response header一起缓存下来(所以缓存命中的请求返回的header并不是来自服务器,而是来自之前缓存的header);

3)浏览器再请求这个资源时,先从缓存中寻找,找到这个资源后,拿出它的Expires跟当前的请求时间比较,如果请求时间在Expires指定的时间之前,就能命中缓存,否则就不行。

4)如果缓存没有命中,浏览器直接从服务器加载资源时,Expires Header在重新加载的时候会被更新。

Expires是较老的强缓存管理header,由于它是服务器返回的一个绝对时间,在服务器时间与客户端时间相差较大时,缓存管理容易出现问题,比如随意修改下客户端时间,就能影响缓存命中的结果。

所以在http1.1的时候,提出了一个新的header,就是Cache-Control,这是一个相对时间,在配置缓存的时候,以秒为单位,用数值表示,如:Cache-Control:max-age=315360000,它的缓存原理是:
1
)浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在responeheader加上Cache-Controlheader
2
)浏览器在接收到这个资源后,会把这个资源连同所有response header一起缓存下来;

3)浏览器再请求这个资源时,先从缓存中寻找,找到这个资源后,根据它第一次的请求时间和Cache-Control设定的有效期,计算出一个资源过期时间,再拿这个过期时间跟当前的请求时间比较,如果请求时间在过期时间之前,就能命中缓存,否则就不行。

4)如果缓存没有命中,浏览器直接从服务器加载资源时,Cache-Control Header在重新加载的时候会被更新。

Cache-Control描述的是一个相对时间,在进行缓存命中的时候,都是利用客户端时间进行判断,所以相比较ExpiresCache-Control的缓存管理更有效,安全一些。

这两个header可以只启用一个,也可以同时启用,当response header中,ExpiresCache-Control同时存在时,Cache-Control优先级高于Expires

3. 强缓存的管理

在实际应用中我们会碰到需要强缓存的场景和不需要强缓存的场景,通常有2种方式来设置是否启用强缓存:

1)通过代码的方式,在web服务器返回的响应中添加ExpiresCache-Control Header

java.util.Date date = new java.util.Date();   
response.setDateHeader("Expires",date.getTime()+20000); //Expires:过时期限值
response.setHeader("Cache-Control", "public"); //Cache-Control来控制页面的缓存与否,public:浏览器和缓存服务器都可以缓存页面信息;
response.setHeader("Pragma", "Pragma"); //Pragma:设置页面是否缓存,为Pragma则缓存,no-cache则不缓存

设置不缓存:

response.setHeader( "Pragma", "no-cache" );  
response.setDateHeader("Expires", 0);  
response.addHeader( "Cache-Control", "no-cache" );//浏览器和缓存服务器都不应该缓存页面信息

2)通过配置web服务器的方式,让web服务器在响应资源的时候统一添加ExpiresCache-Control Header
tomcat
还提供了一个ExpiresFilter专门用来配置强缓存,具体使用的方式可参考tomcat的官方文档:http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#Expires_Filter


比如在javaweb里面,我们可以使用类似下面的代码设置强缓存:

4. 强缓存的应用

强缓存是前端性能优化最有力的工具,没有之一,对于有大量静态资源的网页,一定要利用强缓存,提高响应速度。通常的做法是,为这些静态资源全部配置一个超时时间超长的ExpiresCache-Control,这样用户在访问网页时,只会在第一次加载时从服务器请求静态资源,其它时候只要缓存没有失效并且用户没有强制刷新的条件下都会从自己的缓存中加载,比如前面提到过的京东首页缓存的资源,它的缓存过期时间都设置到了2027
然而这种缓存配置方式会带来一个新的问题,就是发布时资源更新的问题,比如某一张图片,在用户访问第一个版本的时候已经缓存到了用户的电脑上,当网站发布新版本,替换了这个图片时,已经访问过第一个版本的用户由于缓存的设置,导致在默认的情况下不会请求服务器最新的图片资源,除非他清掉或禁用缓存或者强制刷新,否则就看不到最新的图片效果

5. 协商缓存的原理

当浏览器对某个资源的请求没有命中强缓存,就会发一个请求到服务器,验证协商缓存是否命中,如果协商缓存命中,请求响应返回的http状态为304并且会显示一个Not Modified的字符串。
协商缓存是利用的是【Last-ModifiedIf-Modified-Since】和【ETagIf-None-Match】这两对Header来管理的。

Last-ModifiedIf-Modified-Since的控制缓存的原理是:

1浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在responeheader加上Last-Modifiedheader,这个header表示这个资源在服务器上的最后修改时间
2
浏览器再次跟服务器请求这个资源时,在requestheader上加上If-Modified-Sinceheader,这个header的值就是上一次请求时返回的Last-Modified的值:
3
服务器再次收到资源请求时,根据浏览器传过来If-Modified-Since和资源在服务器上的最后修改时间判断资源是否有变化,如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。当服务器返回304 Not Modified的响应时,response header中不会再添加Last-Modifiedheader,因为既然资源没有变化,那么Last-Modified也就不会改变
4
浏览器收到304的响应后,就会从缓存中加载资源。

5如果协商缓存没有命中,浏览器直接从服务器加载资源时,Last-Modified Header在重新加载的时候会被更新,下次请求时,If-Modified-Since会启用上次返回的Last-Modified值。

Last-Modified -> ETag
Last-ModifiedIf-Modified-Since】都是根据服务器时间返回的header,一般来说,在没有调整服务器时间和篡改客户端缓存的情况下,这两个header配合起来管理协商缓存是非常可靠的,但是有时候也会服务器上资源其实有变化,但是最后修改时间却没有变化的情况,而这种问题又很不容易被定位出来,而当这种情况出现的时候,就会影响协商缓存的可靠性。所以就有了另外一对header来管理协商缓存,这对header就是【ETagIf-None-Match】。

ETagIf-None-Match的缓存管理的方式是:
1
浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在responeheader加上ETagheader,这个header是服务器根据当前请求的资源生成的一个唯一标识,这个唯一标识是一个字符串,只要资源有变化这个串就不同,跟最后修改时间没有关系,所以能很好的补充Last-Modified的问题
2
浏览器再次跟服务器请求这个资源时,在requestheader上加上If-None-Matchheader,这个header的值就是上一次请求时返回的ETag的值
3
服务器再次收到资源请求时,根据浏览器传过来If-None-Match和然后再根据资源生成一个新的ETag,如果这两个值相同就说明资源没有变化,否则就是有变化;如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。与Last-Modified不一样的是,当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag跟之前的没有变化
4
浏览器收到304的响应后,就会从缓存中加载资源。

6. 协商缓存的管理

如果没有协商缓存,每个到服务器的请求,就都得返回资源内容,这样服务器的性能会极差。

Last-ModifiedIf-Modified-Since】和【ETagIf-None-Match】一般都是同时启用,这是为了处理Last-Modified不可靠的情况。有一种场景需要注意:

分布式系统里多台机器间文件的Last-Modified必须保持一致,以免负载均衡到不同机器导致比对失败;

分布式系统尽量关闭掉ETag(每台机器生成的ETag都会不一样);

协商缓存需要配合强缓存使用,你看前面这个截图中,除了Last-Modified这个header,还有强缓存的相关header,因为如果不启用强缓存的话,协商缓存根本没有意义。

7. 浏览器行为对缓存的影响

8、代码避免浏览器缓存的几种方法总结

meta方法

//不缓存
<meta HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta HTTP-EQUIV="expires" CONTENT="0">

jquery ajax清除浏览器缓存

方式一:用ajax请求服务器最新文件,并加上请求头If-Modified-Since和Cache-Control,如下:
$.ajax({
url:'www.jb51.net',
dataType:'json',
data:{},
beforeSend :function(xmlHttp){
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.setRequestHeader("Cache-Control","no-cache");
},
success:function(response){
//操作
}
async:false
});
方法二,直接用cache:false,
$.ajax({
url:'www.jb51.net',
dataType:'json',
data:{},
cache:false,
ifModified :true ,
success:function(response){
//操作
}
async:false
});

ajax 跨域请求设置headers
http://blog.csdn.net/WRian_Ban/article/details/70257261

方法三:用随机数,随机数也是避免缓存的一种很不错的方法
URL
参数后加上 “?ran=” + Math.random(); //当然这里参数 ran可以任意取了

方法四:用随机时间,和随机数一样。
URL 参数后加上 “?timestamp=” + new Date().getTime();

html5教程之本地存储Web Storage

html5中,一个新增的非常重要的功能就是客户端本地保存数据的功能,我们知道在过去本地存储数据基本都是使用cookies保存一些简单的数据,但是通过长期的实际使用下来,咱们不难发现使用cookies存储永久数据存在一下几个问题:

1cookies的大小被限制在4KB

2cookies是随HTTP事务一起发送的,因此会浪费一部分发送cookies时所使用的带宽;

3cookies操作繁琐复杂;

Web Storage是什么?

Web Storage功能,顾名思义,就是在Web上针对客户端本地储存数据的功能,具体来说Web Storage分为两种;

sessionStorage

将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间,也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStorage

将数据保存在客户端本地的硬件设备(通常指硬盘,当然可以是其他的硬件设备)中,即是浏览器被关闭了,该数据仍然存在,下次打开浏览器访问网站时,仍然可以继续使用。

localStorage自带的方法:

名称

说明

clear

清空localStorage上存储的数据

getItem

读取数据

hasOwnProperty

检查localStorage上是否保存了变量x,需要传入x

key

读取第i个数据的名字或称为键值(0开始计数)

length

localStorage存储变量的个数

propertyIsEnumerable

用来检测属性是否属于某个对象的

removeItem

删除某个具体变量

setItem

存储数据

toLocaleString

将(数组)转为本地字符串

valueOf

获取所有存储的数据

清空localStorage
localStorage.clear()    // undefined   
localStorage            // Storage {length: 0}

存储数据
localStorage.setItem("name","caibin") //存储名字为name值为caibin的变量
localStorage.name = "caibin"; // 等价于上面的命令
localStorage // Storage {name: "caibin", length: 1}

读取数据
localStorage.getItem("name") //caibin,读取保存在localStorage对象里名为name的变量的值
localStorage.name // "caibin"
localStorage.valueOf() //读取存储在localStorage上的所有数据
localStorage.key(0) // 读取第一条数据的变量名(键值)

//遍历并输出localStorage里存储的名字和值
for(var i=0; i<localStorage.length;i++){
console.log('localStorage里存储的第'+i+'条数据的名字为:'+localStorage.key(i)+',值为:'+localStorage.getItem(localStorage.key(i)));
}

删除某个变量
localStorage.removeItem("name"); //undefined
localStorage // Storage {length: 0} 可以看到之前保存的name变量已经从localStorage里删除了
检查localStorage里是否保存某个变量
// 这些数据都是测试的,是在我当下环境里的,只是demo哦~
localStorage.hasOwnProperty('name') //
truelocalStorage.hasOwnProperty('sex')  // false
将数组转为本地字符串
var arr = ['aa','bb','cc']; // ["aa","bb","cc"]
localStorage.arr = arr //["aa","bb","cc"]
localStorage.arr.toLocaleString(); // "aa,bb,cc"
将JSON存储到localStorage里
var students = {
xiaomin: {
    name: "xiaoming",
    grade: 1
},
teemo: {
    name: "teemo",
    grade: 3
}
}
students = JSON.stringify(students);  //将JSON转为字符串存到变量里
console.log(students);
localStorage.setItem("students",students);//将变量存到localStorage里
var newStudents = localStorage.getItem("students");
newStudents = JSON.parse(students); //转为JSON
console.log(newStudents); // 打印出原先对象
设置localStorage的过期时间
<script type="text/javascript">
//封装过期控制代码
function set(key,value){
    var curTime = new Date().getTime();
    localStorage.setItem(key,JSON.stringify({data:value,time:curTime}));
}
function get(key,exp){
    var data = localStorage.getItem(key);
    var dataObj = JSON.parse(data);
    if (new Date().getTime() - dataObj.time>exp) {
        console.log('信息已过期');
        //alert("信息已过期")
    }else{
        //console.log("data="+dataObj.data);
        //console.log(JSON.parse(dataObj.data));
        var dataObjDatatoJson = JSON.parse(dataObj.data)
        return dataObjDatatoJson;
    }
}
</script>

sessionStorage

sessionStorage
将数据保存在session对象中,所谓session是指用户在浏览某个网站时,从进入网站到浏览器关闭所经过的这段时间会话,也就是用户浏览这个网站所花费的时间就是session的生命周期。session对象可以用来保存在这段时间内所要求保存的任何数据。

localStoragesessionStorage区别

  • localStoragesessionStorage一样都是用来存储客户端临时信息的对象。

  • 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。

  • localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。

  • sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。

  • 不同浏览器无法共享localStoragesessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标 签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

  • 同源的判断规则:

http://www.test.com

https://www.test.com (不同源,因为协议不同)

http://my.test.com (不同源,因为主机名不同)

http://www.test.com:8080 (不同源,因为端口不同)

  • localStoragesessionStorage使用时使用相同的API

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”
localStorage.getItem("key");//获取名称为“key”的值

枚举localStorage的方法:
for(var i=0;i<localStorage.length;i++){
 var name = localStorage.key(i);
 var value = localStorage.getItem(name);
}

删除localStorage中存储信息的方法:
localStorage.removeItem("key");//删除名称为“key”的信息。
localStorage.clear();//清空localStorage中所有信息
示例: 滚动时保存滚动位置
var scrollTop=document.body.scrollTop
sessionStorage.setItem("offsetTop", scrollTop);//保存滚动位置
document.body.scrollTop= sessionStorage.getItem("offsetTop")

cookie

1cookie的作用:
我们在浏览器中,经常涉及到数据的交换,比如你登录邮箱,登录一个页面。我们经常会在此时设置30天内记住我,或者自动登录选项。那么它们是怎么记录信息的呢,答案就是今天的主角cookie了,Cookie是由HTTP服务器设置的,保存在浏览器中,但HTTP协议是一种无状态协议,在数据交换完毕后,服务器端和客户端的链接就会关闭,每次交换数据都需要建立新的链接。就像我们去超市买东西,没有积分卡的情况下,我们买完东西之后,超市没有我们的任何消费信息,但我们办了积分卡之后,超市就有了我们的消费信息。cookie就像是积分卡,可以保存积分,商品就是我们的信息,超市的系统就像服务器后台,http协议就是交易的过程。
2
、机制的区别:
session
机制采用的是在服务器端保持状态的方案,而cookie机制则是在客户端保持状态的方案,cookie又叫会话跟踪机制。打开一次浏览器到关闭浏览器算是一次会话。说到这里,讲下HTTP协议,前面提到,HTTP协议是一种无状态协议,在数据交换完毕后,服务器端和客户端的链接就会关闭,每次交换数据都需要建立新的链接。此时,服务器无法从链接上跟踪会话。cookie可以跟踪会话,弥补HTTP无状态协议的不足。

3cookie的分类:
cookie
分为会话cookie和持久cookie,会话cookie是指在不设定它的生命周期expires时的状态,前面说了,浏览器的开启到关闭就是一次会话,当关闭浏览器时,会话cookie就会跟随浏览器而销毁。当关闭一个页面时,不影响会话cookie的销毁。会话cookie就像我们没有办理积分卡时,单一的买卖过程,离开之后,信息则销毁。
持久cookie则是设定了它的生命周期expires,此时,cookie像商品一样,有个保质期,关闭浏览器之后,它不会销毁,直到设定的过期时间。对于持久cookie,可以在同一个浏览器中传递数据,比如,你在打开一个淘宝页面登陆后,你在点开一个商品页面,依然是登录状态,即便你关闭了浏览器,再次开启浏览器,依然会是登录状态。这就是因为cookie自动将数据传送到服务器端,在反馈回来的结果。持久cookie就像是我们办理了一张积分卡,即便离开,信息一直保留,直到时间到期,信息销毁。

离线缓存之Application Cache

1、应用场景
离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制,但它们并不可靠,也不一定总能起到预期的作用。html5 使用ApplicationCache 接口解决了由离线带来的部分难题。前提是你需要访问的web页面至少被在线访问过一次。

2、使用缓存接口可为您的应用带来以下三个优势:

  • 离线浏览用户可在离线时浏览您的完整网站

  • 速度缓存资源为本地资源,因此加载速度较快。

  • 服务器负载更少浏览器只会从发生了更改的服务器下载资源。

3、离线本地存储和传统的浏览器缓存有什么不同呢?
离线存储为整个web提供服务,浏览器缓存只缓存单个页面;
离线存储可以指定需要缓存的文件和哪些文件只能在线浏览,浏览器缓存无法指定;
离线存储可以动态通知用户进行更新。

4、如何实现
实现:
http://blog.csdn.net/fwwdn/article/details/8082433
机制:
http://www.cnblogs.com/yexiaochai/p/4271834.html
更新:
http://www.oschina.net/question/28_44911?sort=time

websql

http://blog.csdn.net/wjb820728252/article/details/71246522?locationNum=6&fps=1

indexDB

http://blog.csdn.net/wjb820728252/article/details/71246522?locationNum=6&fps=1

大公司里怎样开发和部署前端代码解决强缓存问题?

参考地址:http://www.zhihu.com/question/20790576
概括一下:大公司的静态资源优化方案,基本上要实现这么几个东西:

  1. 配置超长时间的本地缓存 ——节省带宽,提高性能

  2. 采用内容摘要作为缓存更新依据 ——精确的缓存控制

  3. 静态资源CDN部署 ——优化网络请求

  4. 资源发布路径实现非覆盖式发布 ——平滑升级

这篇文章提到的大公司里怎样开发和部署前端代码的几个解决方案的进阶关系:

问题1对于大公司来说,那些变态的访问量和性能指标,将会让前端一点也不好玩
答案1强制浏览器使用本地缓存(cache-control/expires200from cache),不要和服务器通信。好了,请求方面的优化已经达到变态级别,

问题2问题来了:你都不让浏览器发资源请求了,这缓存咋更新?
答案2通过更新页面中引用的资源路径,让浏览器主动放弃缓存,加载新资源类似于:

<script src="${context_path}/js/imgSlide.js?v=1.0.1" type="text/javascript"></script>

下次上线,把链接地址改成新的版本,就更新资源了,那么新问题来了

问题3页面引用了3css,而某次上线只改了其中的a.css,如果所有链接都更新版本,就会导致b.cssc.css的缓存也失效,那岂不是又有浪费了?
答案3:要解决这种问题,必须让url的修改与文件内容关联,也就是说,只有文件内容变化,才会导致相应url的变更,从而实现文件级别的精确缓存控制。这回再有文件修改,就只更新那个文件对应的url了,想到这里貌似很完美了。你觉得这就够了么?

问题4当我要更新静态资源的时候,同时也会更新html中的引用,如果同时改了页面结构和样式,也更新了静态资源对应的url地址,现在要发布代码上线,那么咱们是先上线页面,还是先上线静态资源?
先部署谁都不成!都会导致部署过程中发生页面错乱的问题。
答案4:解决它也好办,就是实现 非覆盖式发布。用文件的摘要信息来对资源文件进行重命名,把摘要信息放到资源文件发布路径中,这样,内容有修改的资源就变成了一个新的文件发布到线上,不会覆盖已有的资源文件。上线过程中,先全量部署静态资源,再灰度部署页面,整个问题就比较完美的解决了


浏览器渲染过程

1.用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;

2.浏览器开始载入html代码,发现标签内有一个标签引用外部css文件;

3.浏览器又发出css文件的请求,服务器返回这个css文件;

4.浏览器继续载入html中部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;

5.浏览器在代码中发现一个!img标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;

6.服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;

7.浏览器发现了一个包含一行javascript代码的


分享给朋友:

相关文章

Vue2.x进阶知识

Vue2.x进阶知识

1.自定义指令—directive指令用法官方文档: https://cn.vuejs.org/v2/guide/custom-directive.html Vue.directive("...

在nuxt中使用localStorage

在nuxt中使用localStorage

摘至: https://zhuanlan.zhihu.com/p/82481387使用 localStorage 进行缓存,操作比 cookie 更简单,且存储空间更大,用 vue.js 使...

5种常见网页自动跳转方法

5种常见网页自动跳转方法

利用HTML标记(META中的REFRESH属性)用HTML标记,就是用META的REFRESH标记,举例如下:<meta http-equiv=refresh content="10...

Vue2.x基础知识

Vue2.x基础知识

1.vue绑定值与字符串拼接四种方法 A  :title="`字符串${变量}`"    B  :titl...

ECMAScript 6之let、const和块级作用域

ECMAScript 6之let、const和块级作用域

参考资料:let 和 const 命令1、letlet 允许创建块级作用域,ES6 推荐在函数中使用 let 定义变量,而非 var:let 只能声明一次, var 可以声明多次:var a...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

分享:

支付宝

微信