====索引=====

【Web缓存机制系列】1 – Web缓存的作用与类型

【Web缓存机制系列】2 – Web浏览器的缓存机制 

【Web缓存机制系列】3 – 如何构建可缓存站点

【Web缓存机制系列】4 – HTML5时代的Web缓存机制

【Web缓存机制系列】5 – Web App时代的缓存机制新思路

【Web缓存机制系列】6 – 进击的Hybrid App，量身定做缓存机制

============

Web App的概念逐渐被业界认可，各大互联网公司也纷纷推出Web App开发大赛，积极引入到他们的开放平台，比较著名类似facebook农场，qzone偷菜之类的。Web开发逐渐从Web Page的进入到Web App的时代，想详细了解的话，可以看下超叔在D2上分享的分享《开放时代：从Web Page到Web APP》视频、Slide。

Web App常见架构

以WebQQ例，WebQQ这个站点的所有内容都是一个页面里面呈现的，我们看到的类似windows操作系统的框架，是它的顶级容器和框架，由AlloyOS的内核负责统筹和管理，然后其他模块，比如壁纸设置，消息中心，App Store都是以模块的形式，并用iframe的方式嵌入到顶级容器中。具观察，现在越来越多的Web应用都倾向于使用这个的架构，这样做好处是很明显的，比如顶级框架可以维持一个不变的javascript上下文便于管理；关闭模块的iframe后，内存可以更好的释放；利用iframe的安全机制最大限度的保证内核的安全和稳定等等。

这种Web的架构，其实也给我们Web前端提供了从代码逻辑层面上给Web应用实现缓存提供了可能。

====索引=====

【Web缓存机制系列】1 – Web缓存的作用与类型

【Web缓存机制系列】2 – Web浏览器的缓存机制 

【Web缓存机制系列】3 – 如何构建可缓存站点

【Web缓存机制系列】4 – HTML5时代的Web缓存机制

【Web缓存机制系列】5 – Web App时代的缓存机制新思路

【Web缓存机制系列】6 – 进击的Hybrid App，量身定做缓存机制

============

随着现代浏览器的推动，Flash放弃对移动端的支持，HTML5无疑成为当前Web前端炙手可热的话题。各大游戏开发商、App开发商纷纷投入人力进行研究和技术储备。相信不久的将来，HTML5会迎来一个快速发展和普及的春天。那么，HTML5这个新一代的标准，又给我们带来哪些缓存机制呢？

====索引=====

【Web缓存机制系列】1 – Web缓存的作用与类型

【Web缓存机制系列】2 – Web浏览器的缓存机制 

【Web缓存机制系列】3 – 如何构建可缓存站点

【Web缓存机制系列】4 – HTML5时代的Web缓存机制

【Web缓存机制系列】5 – Web App时代的缓存机制新思路

【Web缓存机制系列】6 – 进击的Hybrid App，量身定做缓存机制

============

前面了解了Web缓存的运行机制极其重要性之后，我们可以从以下这些方面去努力改善我们的站点，保证缓存被最有效的利用，达到最佳的性能。

同一个资源保证URL的稳定性

URL是浏览器缓存机制的基础，所以如果一个资源需要在多个地方被引用，尽量保证URL是固定的。同时，比较推荐使用公共类库，比如Google Ajax Library等，有利于最大限度使用缓存

给Css、js、图片等资源增加HTTP缓存头，并强制入口Html不被缓存

对于不经常修改的静态资源，比如Css，js，图片等，可以设置一个较长的过期的时间，或者至少加上Last-Modified/Etag，而对于html页面这种入口文件，不建议设置缓存。这样既能保证在静态资源不变了情况下，可以不重发请求或直接通过304避免重复下载，又能保证在资源有更新的，只要通过给资源增加时间戳或者更换路径，就能让用户访问最新的资源

====索引=====

【Web缓存机制系列】1 – Web缓存的作用与类型

【Web缓存机制系列】2 – Web浏览器的缓存机制 

【Web缓存机制系列】3 – 如何构建可缓存站点

【Web缓存机制系列】4 – HTML5时代的Web缓存机制

【Web缓存机制系列】5 – Web App时代的缓存机制新思路

【Web缓存机制系列】6 – 进击的Hybrid App，量身定做缓存机制

============

Web缓存的工作原理

所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务（假设有副本可用的情况下，未被销毁回收或者未被删除修改）。这些规则有的在协议中有定义（如HTTP协议1.0和1.1），有的则是由缓存的管理员设置（如DBA、浏览器的用户、代理服务器管理员或者应用开发者）。

浏览器端的缓存规则

对于浏览器端的缓存来讲，这些规则是在HTTP协议头和HTML页面的Meta标签中定义的。他们分别从新鲜度和校验值两个维度来规定浏览器是否可以直接使用缓存中的副本，还是需要去源服务器获取更新的版本。

====索引=====

【Web缓存机制系列】1 – Web缓存的作用与类型

【Web缓存机制系列】2 – Web浏览器的缓存机制

【Web缓存机制系列】3 – 如何构建可缓存站点

【Web缓存机制系列】4 – HTML5时代的Web缓存机制

【Web缓存机制系列】5 – Web App时代的缓存机制新思路

【Web缓存机制系列】6 – 进击的Hybrid App，量身定做缓存机制

============

前言&摘要

这段时间的工作内容主要是为一个客户端类型的产品增加文档在线存储和文档在线预览相关特性。由于测试的同事比较细心和专业，发现了项目实现中一些效率低下的环节，比如在线预览图片没有经过压缩、重开打开同一张图片没有有效利用Web缓存等问题。而这些细节问题往往在做项目架构时，容易因为时间紧张等等因素而被忽略。虽然以前也有一些关于Web缓存的意识，但并没有很系统的了解、总结，并在项目中进行合理的运用。借此机会，整理了一些相关资料和项目的实际应用实践，做个备忘，便于在日后的项目查询和应用。

本文从Web缓存的定义、作用、分类、工作机制等方面介绍了目前常用的Web缓存及其原理，并给出如何构建有效利用Web缓存的站点。最后探讨了在HTML5和Web App、Web Game逐渐盛行的今天，现代浏览器给我们提供哪些有利于Web缓存、提高访问效率的机制，前端的代码架构又能从哪些方面进行调整，更好的利用Web缓存等问题。

通常来说，CSS非常简单。但是当浏览器厂商开始实现CSS3特性，问题开始变得有些复杂了。不难，只是有些复杂。这可能包括两个方面：首先有些心得CSS3属性(比如，transition、渐变、transform等)不是那么简单，其次我们不得不使用浏览器厂商指定扩展。

直到你最喜欢用的IDE原生支持CSS3，你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的，这里将收集能够助你学习和使用CSS3的真正有用的工具。

Internet Explorer 10 开发者指南让你提前了解下一版本的 Windows Internet Explorer 中即将推出的开发者功能，以及最新的 HTML5、JavaScript 和级联样式表级别 3 (CSS3) 功能（可供 Windows 8 Consumer Preview 中使用 JavaScript 的 Metro 风格的应用程序的开发者使用）。通过使用本指南中的文档和示例，开发者和设计者就可以做好准备使用这些新功能了。

Internet Explorer 10 当前不适用于 Windows 7。适用于 Windows 7 的最新版本是 2011 年 6 月 29 日推出的 Internet Explorer 10 Platform Preview Build 2。因此，你将注意到，本指南中提到的较新功能对于面向 Windows 7 的最新版本的 Internet Explorer 10 Platform Preview 尚不可用。有关对于 Internet Explorer Platform Preview Build 2 的更改的列表，请参阅修订历史记录。有关所有新功能的全面列表，请参阅下文。

Internet Explorer 10 在发布之后将适用于 Windows 7、Windows 8 Consumer Preview、Windows Server 2008 R2 和 Windows Server 8 Beta。

此处列出了 Internet Explorer 10 中新增的开发者功能。除了阅读本指南外，还请确保参阅发行说明了解安装信息和已知问题，以及 Internet Explorer Test Drive 网站获取新的演示和示例。你还可以通过访问 Internet Explorer 开发者中心和 MSDN 库获取有关开发者功能的详细技术信息。

这个预发行版的 Internet Explorer 10 —以及使用 JavaScript— 的 Metro 风格的应用程序包含对于下列开发者功能的支持。除非特别说明，否则这些功能在 Internet Explorer 10 中和使用 JavaScript 的 Metro 风格的应用程序中的工作方式相同。

看了Tom Chatfield 在TED大会上的演讲【The Power of Virtuality】很受启发，为什么人们愿意将大量时间和金钱投入游戏，在虚拟世界中追求虚拟的宝藏和体验？答案就是：游戏中的激励机制。这也对如何让人们自发并积极地参与某种活动提供了启示，比如团队激励。

研究《魔兽世界》等网络游戏中的关卡奖励设置，从这些神经学和心理学在网络游戏中的研究中发现了七种激励方式：

1.用经验值条来度量进程。网络游戏中你会发现人物级别的经验值进度，人在不断肯定自我的过程中有更大的前进动力；
2.把任务分割成可计量的短期和长期目标。玩家可以同时进行这些任务，并且和个人的获利挂钩，这是一个保持人们持续参与的常用方式；
3.奖励成就，不惩罚失败。一个个小的奖励能最大化地满足人们的成就感和自尊心；
4.得到及时的回馈。在网络游戏中当你完成一个任务、学习到一种新的技能时，你能马上去施展这项技能，这种反馈让人们更加确信奖励；
5.未知的吸引力。不确定因素，或者叫惊喜，会给人超强的吸引力，比如极品装备的魅力就在此；
6.合作，集体的归属感。人都是怕落单的，因为认识社会化的生命体，只有在组织中，人才会更有存在感，所以这种团队合作中，彼此的帮助、彼此的肯定都促使成员更有归属感；
7.充分的自由度。游戏玩家拥有更多的自由度，可以满足玩家对自由的向往，并在做事情的时候会感觉到这是他自由的选择，而非无奈之选，因此更可以爆发更大的力量。

通过观察游戏和玩家行为，我们可以学习到如何提高个人和集体对某项活动或项目的参与度，将这些经验应用于游戏之外，将会产生神奇的影响。在他所著的《Fun Inc.》一书中，他认为，由于玩家在游戏的虚拟世界中的探索体验，以及精心设计的虚拟奖励机制给与玩家的满足感，已经可以成为解决现实问题的参考。理解了网络游戏中的激励机制中所包含的心理学理论，不仅能更好地了解玩家，并能进而改善现实世界中的问题。

这段时间做一个关于widget的项目，忙了一两个月了。在临发布的时候突然出现一个问题，一个音乐widget的内存不断上涨，且不会回落，最终导致这个widget只能下架。
因为我在ie9没发现内存上涨的问题，所以我觉得这是webkit内存管理的问题。所以一直没去看他，等待客户端的同事去解决。直到有一天，客户端同事说了一个方法，说防止src频繁切换，建议延迟1s去设置audio标签的src。开始我想这不是web的原因，所以给予断然拒绝，另外也是怕维护麻烦。但是，我还是进行了尝试。没想到效果出奇的明显，内存基本不会上涨了。
从这件事，我意识到了，凡事不能说绝对。因为它包括了太多情况，涵盖了很长的一段时间，而且使你不能有回旋的余地。
下面说说解决的方法。因为我们想要的是src不频繁切换，所以单单做延迟是不会有任何结果的。关键是要使一首歌保持1s以上才会去设置它的src。这句话我说来简简单单，但是要真正理解是需要很深入的思考的。代码我会在最后面给出来，大家可以自己试着写写，然后对照一下。
通过客户端同事的进一步研究发现，发现对Dom对象的某个属性就行频繁操作就会导致上涨。这里还有个比较明显的属性就是buffered，大家可以通过设置一个频率为20ms的定时器去读取这个属性，就可以进行测试了。
以此类推，是否对于img标签也有类似的情况呢。这个有待各位同仁进行验证。
相关代码:

好久没有更新blog了。今天终于有了心再写一篇。算是对自己工作和生活的一种回顾吧。

11年底和12年初的时候自己都没有写什么总结性质的博文，或者之类的东西。但是心里确是有稍微对过去的时间做一点结算工作的。