xml地图|网站地图|网站标签 [设为首页] [加入收藏]
浏览器端,HTML5和Unity开发网页游戏的现实
分类:web前端

客户端(浏览器端)数据存储技术概览

2017/03/09 · 基础技术 · 2 评论 · 存储

原文出处: dwqs   

在客户端(浏览器端)存储数据有诸多益处,最主要的一点是能快速访问(网页)数据。(以往)在客户端有五种数据存储方法,而目前就只有四种常用方法了(其中一种被废弃了):

  • Cookies
  • Local Storage
  • Session Storage
  • IndexedDB
  • WebSQL (被废弃)

浏览器缓存知识小结及应用

2016/01/18 · HTML5 · 2 评论 · 浏览器, 缓存

原文出处: 流云诸葛   

浏览器缓存,也就是客户端缓存,既是网页性能优化里面静态资源相关优化的一大利器,也是无数web开发人员在工作过程不可避免的一大问题,所以在产品开发的时候我们总是想办法避免缓存产生,而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理,是开发web应用的基础,本文着眼于此,学习浏览器缓存的相关知识,总结缓存避免和缓存管理的方法,结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助。

用Flash、HTML5和Unity开发网页游戏的现实

2011/11/11 · HTML5 · 来源: 9RIA     · HTML5

今天对于全球的Flash开发者来说是黑暗的一天,因为Adobe宣布将不再对移动设备上的浏览器进行Flash技术支持。在这之前,Adobe刚刚宣布了公司范围内的大幅度裁员。尽管这似乎并不是什么严重的问题,但是这却又使“Flash hate wagon”开始转动。

首先,我只关心基于网页的游戏开发。因此,这篇文章只关注这个主题。这并不是一篇关于Flash和HTML5的争论文章, 也不是教你如何在移动设备上搭建应用程序。所以,这篇文章纯粹的是关注当今开发web game的现实。

我比较了Flash,HTML5,Unity,因为他们是当今唯一可行的web game开发平台。我列了10个主题来比较他们:

  • 开发流程 – 用它来开发一个游戏有多容易?
  • 平台稳定性 – 当你开始和结束开发游戏这段时间内,它会发生改变吗?
  • 向后兼容性 – 用它开发的游戏10年后还能运行吗?
  • 移动性 – 移动设备的支持
  • 打包与分发 – 如何流通
  • 安全性 – 代码和知识产权保护
  • 货币化 – 如何运营赚钱
  • Facebook – 社交游戏的角度
  • 多少人会玩你的游戏
  • 3D支持 – Stage3D vs. WebGL vs. Unity

 

上述的方面我认为是所有游戏开发者在评估一个新的开发平台时都应该注意的。我希望这些建议对新老Flash开发者来说都会有所帮助。

澳门新葡亰手机版,1.开发流程

Flash:用Flash来开发游戏非常简单。因为关于它有无数的书籍,网站,教程,框架,视频和源代码。对于开发工具来说,Flex route是免费的,Flash IDE需要付费。Flash拥有通用且强大的矢量渲染功能,这意味这你创建的动画的文件格式会非常小。它全面支持音频和大多数的Adobe应用程序,例如在Flash IDE中嵌入Illustrator 和 Photoshop。而且Flash还有大量的内置功能。

HTML5:编辑器例如JetBrains 的Astella会使编程变的不那么痛苦。有一些优秀的调试工具使浏览器调试也非常简单。有许多关于HTML5游戏开发的书籍,网站,在线资源和示例程序。开发HTML5游戏的工具是免费,但是也有商业的工具,例如GameMaker HTML5 和Game Salad。如果你想让程序效率更高,并且你不怎么关注底层运行机制,你可以使用特定的的库类似ImpactJS。

Unity:有一个优秀的可视化编辑器,并且可以嵌入主流的3D应用程序中。基础版本是免费供家庭使用的。也可以在公司里使用,每年需要交纳不到100K $ 的费用。专业版本带有各种插件,价格在1500$上下。一旦你有了Unity,大量的教程和资源也随之提供,所以学习并不是问题。

 

2.平台稳定性

Flash:Flash是跨平台的,它不在乎你用的操作系统和浏览器是什么,不管你是破旧的IE或是最新的Chrome。只要你使用的平台上有Flash Player,对于体验来说都是一样的。Adobe每年都会发布一个新版本和许多现有版本的更新。

HTML5:HTML5一直处于变动中。基于此有2个副作用:第一,即便你什么都没有做,你的游戏仍然有潜在的崩溃可能。这是因为之前你已经升级或使用其他浏览器了。第二,你必须考虑多平台。在Chrome上可以运行只是第一步,你还必须处理IE,Firefox,Safari和各种操作系统。由此带来的维护成本也不能低估。另外,最大的技术挑战包括音频支持以及不一致的画布渲染速度等。

Unity: Unity的web player拥有和Flash一样的优势。Unity的插件也是跨平台的。Unity本身也会定期的发布新功能。

 

3.向后兼容性

Flash:10年前,用AS1制作的游戏仍旧可以在现在的Flash Player11上运行。向后兼容性十分出色。

HTML5:对于HTML5来说,比较向后兼容性有点不公平,因为它还在发展中。这意味着,如果它不符合W3C标准,就会被废弃。

Unity:Unity并不支持以前的插件,最开始我开期待它会像Flash一样,但似乎并不是这样。

 

4.移动性

Flash:直到今天前,我可以说,除了iOS平台,Flash插件对于移动平台的支持是伟大的。 但是Adobe官方宣布已经不再对移动设备上的Flash Player插件继续支持了,你可以认为它已经完全死了。当然你可以通过AIR来创建移动应用程序,但是这些不属于web game的范畴,所以我们不在此进行深入讨论。Stage3D对于移动的支持并不成熟,随着许多硬件厂商的合并,以及逐渐老化的AVM,对于Adobe的开发者来说是一场艰难的战争。种种迹象表明,在重建过程中,Adobe已经把Oliver Goldman从AIR团队中调到云项目。Oliver在AIR中是核心人物,至于结果怎样,只能仁者见仁了。

HTML5:HTML5对于移动的支持力度越来越强,iOS5上已经看到了性能的明显提升。当移动浏览器开始介入这些新特性,例如触摸事件和加速度的支持,我对于HTML5的前景逐渐看好。当然,你必须处理不同的屏幕分辨率和画面比例,但是这个问题不是只有HTML5有。

Unity:Unity并不支持移动浏览器上的插件。考虑到Unity的强项在于原生移动应用程序的编译,我能理解原因。

 

5.打包与分发

Flash:Flash的游戏最终都压缩成一个SWF文件。SWF文件可以简单地通过带有HTTP服务的网站进行传输。或者,它可以锁定到一个具体的URL上。Flash游戏的门户网站完全基于SWF文件的流动方式。SWF文件传播地越广,你挣的钱就越多。

HTML5:对于HTML5的游戏来说,没有跨平台或者统一的打包方式。那些最大的游戏门户网站都不允许开发者上传游戏。我认为是因为涉及到安全问题,它们不允许在站点上运行外来的JS程序。这就意味着传播HTML5游戏的唯一方式就是通过URL共享到一个目的站点,或者通过iFrame来嵌入。最终,是由开发者或赞助商来为给他们的游戏提供上传站点的主机费用买单。Flash传播游戏的方式是从站点来取出SWF文件,然后hosting这些SWF文件。这听起来不那么臭名招住,因为这的确是Flash挣钱的方式。门户网站可以使用带有沙箱参数设置的iFrame,但是这样做会阻止HTML5游戏需要使用的特性,例如本地存储和表单。

Unity:Unity和Flash类似,因为它也会最终创建出一个单一文件,然后上传到游戏门户网站,例如Kongregate。

 

6.安全性

Flash:SWF并不完美,但至少它能打包你所有的资源和代码到一个单一的文件,这就需要对它本身的技术很了解或者第三方的软件才能破解它。市场上有很多SWF保护服务和代码混淆软件,基本上可以防止随意的黑客和盗贼。

HTML5: JS代码可以混淆,但是不能被未加密的客户端加密。在内存中运行时,代码很容易被修改。图形和音频内容极容易被盗,可以通过Chrome或者Firefox的对象检查器,甚至通过浏览器的缓存文件夹。有人认为有一些保护HTML5资产的方式,并且认为Flash的资产一样容易被盗用。我不打算进入文件保护的辩论,我只想说,可以用来保护HTML5资产的方法都可以应用到Flash中。

Unity:和Flash类似。如果什么人有足够的决心来盗取它的资产,他会需要相当多的技术知识。

 

7.货币化

Flash:有许多很好的方式来挣钱,包括:游戏赞助,在游戏中的广告,与游戏门户网站的收入分成,广告分成,游戏中的交易,雇佣式游戏打工等等。我知道很多开发者完全不需要赞助商,只需要游戏和广告收入分成。网络中有大量为广告服务的API,只需要简单的上传你的游戏,就可以等到长期收入分成。

HTML5: 存在一些游戏中的广告服务,也可以把Google广告放在游戏中。我还没看到任何HTML5的游戏赞助市场或者收入分成交易。在游戏中的交易服务,比如Fortumo,已经存在和完善。

Unity:这里我不太懂,也许读者可以补充。

 

8.Facebook

Flash:Facebook上最流行的游戏都是用的Flash。The Sims Social每个月3600万的玩家使用的都是Flash。新的水果忍者同样使用Flash,并且会用到Flash 11的新特性。绝大部分的Zynga游戏也都使用Flash。之所以会这样,是因为Flash的受众,现有的技能(Flash开发者众多)和简单的开发流程。同时在Facebook上可以有很多方式来挣钱,因为它有大量的第三方服务和API接口。
HTML5: 我努力在Facebook上寻找最流行的纯HTML5游戏。当然肯定会有一些,因此,如果你找到了请帖链接。Zynga在2010年就收购了Dextrose,但是我还没看到什么结果。一些公司已经发布HTML5游戏到Facebook上,比如OMGPOP的Gem Rush,每日用户10人。但是Gem Rush只是用了HTML5的API,游戏本身还是Flash的!因此我的结论,目前为止,Facebook上最大的玩家群体还是使用Flash。

Unity:看上去Unity游戏在Facebook上也有一些赢利点。如UberStrike (每个月83万玩家) 和King’s Bounty(每个月2万玩家)。只要游戏内容足够吸引人,Facebook的用户也不方队安装Unity插件。

 

9.多少人会玩你的游戏

Flash:因为事实上,很多桌面用户都连接到互联网玩游戏,所以Flash的用户数量是巨大的。一个标准的Flash游戏在第一年通常有2-3百万次的访问量。好的Flash游戏当然次数更多。我们的游戏Home Sheep Home一上线就有每天1百万的访问量,在18个月内已经有1亿的访问量。这是一个惊人的数字。加上Facebook巨大的用户群,一定会有成百上千的用户在玩Flash游戏,玩家完全不是你的问题。

HTML5: 老实说,我无法找到任何相关数据,可能这个技术太新了,也没有用它做出来的好游戏。从技术上讲,可以说,潜在的用户可以有10亿,但是究竟事实上能有多少,开发者可以试试。

Unity:虽然Unity官方声明了玩家的数量,但是并没有第三方的统计。Kongregate上只有总共577000的访问量。而最好的Flash的游戏已经有2500万的访问量。事实上,排名前一百的Flash游戏没有低于250万的访问量。

 

10.3D支持

Flash:Flash Play 11引入了Stage3D,它本质上是OpenGL ES 2.0。Adobe已经做了一个标准化的工作来实现它,但是也有一大堆注意事项。首先,游戏需要用wmode=direct来嵌入。而大多数的游戏门户网站还不支持,所以如果你的游戏放到一个不支持它的门户上,它根本不会运行3D硬件。其次,不支持GPU的黑名单很令人丧气。任何2009年前的驱动程序无法工作;最常见的英特尔GMAS(板载图形芯片)也无法工作。而在2007年,90%的个人电脑都用了因特尔GMAS,这是个真正的大问题。当然Adobe必须要划一条线,但是Flash的吸引力在于它无所谓运行在什么样的硬件上。如果你用了Stage3D,实际上你已经把巨大的潜在玩家抛弃了。所以必须非常小心的选择这条路,确保你能尽快的回收资本。

HTML5: 在这里我们谈WebGL。它和Stage3D在技术层面上有很多相似点,但是在很多关键领域有缺陷:不能全屏,没有鼠标捕获(Flash Player11.2支持),没有多重渲染目标,没有instanced drawing等等。在Autodesk的博客上有一片很好的文章说了这些问题。当然这些只是短期内的技术难点,并且最终将可以被克服。WebGL最大的问题在于Microsoft目前的立场是不支持它。Microsoft不是WebGL工作组的成员,而且不支持WebGL的任何格式。由于IE浏览器仍然有很大的占有率,所以这个不容忽视。

Unity:Unity当然支持3D。在有限的测试中,Unity结果完美。当然你需要安装Unity的浏览器插件。但是如果你知道你的游戏玩家足够,那么Unity仍然是目前最好的3D游戏解决方案。Unity宣称将支持导出Unity游戏成Flash格式,而且不会有Stage3D带来的GPU黑名单问题。我真想把钱给Unity,让他们能够在不远的将来能够把Unity游戏导出成WebGL格式。

澳门新葡亰手机版 1

Cookies

Cookies 是一种在文档内存储字符串数据最典型的方式。一般而言,cookies 会由服务端发送给客户端,客户端存储下来,然后在随后让请求中再发回给服务端。这可以用于诸如管理用户会话,追踪用户信息等事情。

此外,客户端也用使用 cookies 存储数据。因而,cookies 常被用于存储一些通用的数据,如用户的首选项设置。

1. 浏览器缓存基本认识

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

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

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

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

Cookies 的 基本CRUD 操作

通过下面的语法,我们可以创建,读取,更新和删除 cookies:

JavaScript

// Create document.cookie = "user_name=Ire Aderinokun"; document.cookie = "user_age=25;max-age=31536000;secure"; // Read (All) console.log( document.cookie ); // Update document.cookie = "user_age=24;max-age=31536000;secure"; // Delete document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";

1
2
3
4
5
6
7
8
9
10
11
12
// Create
document.cookie = "user_name=Ire Aderinokun";  
document.cookie = "user_age=25;max-age=31536000;secure";
 
// Read (All)
console.log( document.cookie );
 
// Update
document.cookie = "user_age=24;max-age=31536000;secure";
 
// Delete
document.cookie = "user_name=Ire Aderinokun;expires=Thu, 01 Jan 1970 00:00:01 GMT";

2. 强缓存的原理

当浏览器对某个资源的请求命中了强缓存时,返回的http状态为200,在chrome的开发者工具的network里面size会显示为from cache,比如京东的首页里就有很多静态资源配置了强缓存,用chrome打开几次,再用f12查看network,可以看到有不少请求就是从缓存中加载的:

澳门新葡亰手机版 2

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

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

1)浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Expires的header,如:

澳门新葡亰手机版 3

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

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

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

Expires是较老的强缓存管理header,由于它是服务器返回的一个绝对时间,在服务器时间与客户端时间相差较大时,缓存管理容易出现问题,比如随意修改下客户端时间,就能影响缓存命中的结果。所以在http1.1的时候,提出了一个新的header,就是Cache-Control,这是一个相对时间,在配置缓存的时候,以秒为单位,用数值表示,如:Cache-Control:max-age=315360000,它的缓存原理是:

1)浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Cache-Control的header,如:

澳门新葡亰手机版 4

2)浏览器在接收到这个资源后,会把这个资源连同所有response header一起缓存下来;

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

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

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

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

澳门新葡亰手机版 5

提示:这篇译文翻译了大部分原文,英文原文后面还有有关“Adobe将会多久支持Flash播放器”和“Flash游戏开发人员该如何应对”的内容讨论。

 

赞 收藏 评论

澳门新葡亰手机版 6

Cookies 的优点

  • 能用于和服务端通信
  • 当 cookie 快要自动过期时,我们可以重新设置而不是删除

3. 强缓存的管理

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

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

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

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

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则不缓存

1
2
3
4
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则不缓存

还可以通过类似下面的java代码设置不启用强缓存:

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

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

tomcat还提供了一个ExpiresFilter专门用来配置强缓存,具体使用的方式可参考tomcat的官方文档:

nginx和apache作为专业的web服务器,都有专门的配置文件,可以配置expires和cache-control,这方面的知识,如果你对运维感兴趣的话,可以在百度上搜索“nginx 设置 expires cache-control”或“apache 设置 expires cache-control”都能找到不少相关的文章。

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

1)直接ctrl+f5,这个办法能解决页面直接引用的资源更新的问题;

2)使用浏览器的隐私模式开发;

3)如果用的是chrome,可以f12在network那里把缓存给禁掉(这是个非常有效的方法):

澳门新葡亰手机版 7

4)在开发阶段,给资源加上一个动态的参数,如css/index.css?v=0.0001,由于每次资源的修改都要更新引用的位置,同时修改参数的值,所以操作起来不是很方便,除非你是在动态页面比如jsp里开发就可以用服务器变量来解决(v=${sysRnd}),或者你能用一些前端的构建工具来处理这个参数修改的问题;

5)如果资源引用的页面,被嵌入到了一个iframe里面,可以在iframe的区域右键单击重新加载该页面,以chrome为例:

澳门新葡亰手机版 8

6)如果缓存问题出现在ajax请求中,最有效的解决办法就是ajax的请求地址追加随机数;

7)还有一种情况就是动态设置iframe的src时,有可能也会因为缓存问题,导致看不到最新的效果,这时候在要设置的src后面添加随机数也能解决问题;

8)如果你用的是grunt和gulp这种前端工具开发,通过它们的插件比如grunt-contrib-connect来启动一个静态服务器,则完全不用担心开发阶段的资源更新问题,因为在这个静态服务器下的所有资源返回的respone header中,cache-control始终被设置为不缓存:

澳门新葡亰手机版 9

Cookies 的缺点

  • 增加了文档传输的负载
  • 只能存储少量的数据
  • 只能存储字符串
  • 潜在的 安全问题
  • 自从有 Web Storage API (Local and Session Storage),cookies 就不再被推荐用于存储数据了

4. 强缓存的应用

强缓存是前端性能优化最有力的工具,没有之一,对于有大量静态资源的网页,一定要利用强缓存,提高响应速度。通常的做法是,为这些静态资源全部配置一个超时时间超长的Expires或Cache-Control,这样用户在访问网页时,只会在第一次加载时从服务器请求静态资源,其它时候只要缓存没有失效并且用户没有强制刷新的条件下都会从自己的缓存中加载,比如前面提到过的京东首页缓存的资源,它的缓存过期时间都设置到了2026年:

澳门新葡亰手机版 10

然而这种缓存配置方式会带来一个新的问题,就是发布时资源更新的问题,比如某一张图片,在用户访问第一个版本的时候已经缓存到了用户的电脑上,当网站发布新版本,替换了这个图片时,已经访问过第一个版本的用户由于缓存的设置,导致在默认的情况下不会请求服务器最新的图片资源,除非他清掉或禁用缓存或者强制刷新,否则就看不到最新的图片效果。

这个问题已经有成熟的解决方案,具体内容可阅读知乎这篇文章详细了解:

文章提到的东西都属于理论上的解决方案,不过现在已经有很多前端工具能够实际地解决这个问题,由于每个工具涉及到的内容细节都有很多,本文没有办法一一深入介绍。有兴趣的可以去了解下grunt gulp webpack fis 还有edp这几个工具,基于这几个工具都能解决这个问题,尤其是fis和edp是百度推出的前端开发平台,有现成的文档可以参考:

强缓存还有一点需要注意的是,通常都是针对静态资源使用,动态资源需要慎用,除了服务端页面可以看作动态资源外,那些引用静态资源的html也可以看作是动态资源,如果这种html也被缓存,当这些html更新之后,可能就没有机制能够通知浏览器这些html有更新,尤其是前后端分离的应用里,页面都是纯html页面,每个访问地址可能都是直接访问html页面,这些页面通常不加强缓存,以保证浏览器访问这些页面时始终请求服务器最新的资源。

浏览器支持

所有主流浏览器均支持 Cookies.

5. 协商缓存的原理

当浏览器对某个资源的请求没有命中强缓存,就会发一个请求到服务器,验证协商缓存是否命中,如果协商缓存命中,请求响应返回的http状态为304并且会显示一个Not Modified的字符串,比如你打开京东的首页,按f12打开开发者工具,再按f5刷新页面,查看network,可以看到有不少请求就是命中了协商缓存的:

澳门新葡亰手机版 11

查看单个请求的Response Header,也能看到304的状态码和Not Modified的字符串,只要看到这个就可说明这个资源是命中了协商缓存,然后从客户端缓存中加载的,而不是服务器最新的资源:

澳门新葡亰手机版 12

协商缓存是利用的是【Last-Modified,If-Modified-Since】和【ETag、If-None-Match】这两对Header来管理的。

【Last-Modified,If-Modified-Since】的控制缓存的原理是:

1)浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Last-Modified的header,这个header表示这个资源在服务器上的最后修改时间:

澳门新葡亰手机版 13

2)浏览器再次跟服务器请求这个资源时,在request的header上加上If-Modified-Since的header,这个header的值就是上一次请求时返回的Last-Modified的值:

澳门新葡亰手机版 14

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

澳门新葡亰手机版 15

4)浏览器收到304的响应后,就会从缓存中加载资源。

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

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

1)浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上ETag的header,这个header是服务器根据当前请求的资源生成的一个唯一标识,这个唯一标识是一个字符串,只要资源有变化这个串就不同,跟最后修改时间没有关系,所以能很好的补充Last-Modified的问题:

澳门新葡亰手机版 16

2)浏览器再次跟服务器请求这个资源时,在request的header上加上If-None-Match的header,这个header的值就是上一次请求时返回的ETag的值:

澳门新葡亰手机版 17

3)服务器再次收到资源请求时,根据浏览器传过来If-None-Match和然后再根据资源生成一个新的ETag,如果这两个值相同就说明资源没有变化,否则就是有变化;如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。与Last-Modified不一样的是,当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag跟之前的没有变化:

澳门新葡亰手机版 18

4)浏览器收到304的响应后,就会从缓存中加载资源。

Local Storage

Local Storage 是 Web Storage API 的一种类型,能在浏览器端存储键值对数据。Local Storage 因提供了更直观和安全的API来存储简单的数据,被视为替代 Cookies 的一种解决方案。

从技术上说,尽管 Local Storage 只能存储字符串,但是它也是可以存储字符串化的JSON数据。这就意味着,Local Storage 能比 Cookies 存储更复杂的数据。

6. 协商缓存的管理

协商缓存跟强缓存不一样,强缓存不发请求到服务器,所以有时候资源更新了浏览器还不知道,但是协商缓存会发请求到服务器,所以资源是否更新,服务器肯定知道。大部分web服务器都默认开启协商缓存,而且是同时启用【Last-Modified,If-Modified-Since】和【ETag、If-None-Match】,比如apache:

澳门新葡亰手机版 19

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

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

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

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

京东页面的资源请求,返回的repsones header就只有Last-Modified,没有ETag:

澳门新葡亰手机版 20

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

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:浏览器端,HTML5和Unity开发网页游戏的现实

上一篇:开发者须知,HTML5可成为Web移动应用的解决方案 下一篇:没有了
猜你喜欢
热门排行
精彩图文