====索引=====

【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 年初的时候自己都没有写什么总结性质的博文，或者之类的东西。但是心里确是有稍微对过去的时间做一点结算工作的。