====索引=====

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

飞行射击类游戏很常用的追踪子弹，或者塔防里面固定炮台打 怪物的时候，为了保证子弹不会打空，追踪是必要的。
然而，这是极其简单的事情。
在每一帧里判断当前子弹和目标位置的距离和方向，不断修正 速度方向即可。

我们的图片大部分都是可以转换成 base64 编码的 data：image。 这个在将 canvas 保存为 img 的时候尤其有用。虽然除 ie 外，大部分现代浏览器都已经支持原生的基于 base64 的 encode 和 decode，例如 btoa 和 atob。（将 canvas 画布保存成 img 并强制改变 mimetype 进行下载，会在下一篇记录）

但是处于好奇心，还是驱使我去了解下 base64 编码的原理。以便也在不支持原生 base64 编码的 ie 下可以得以实现。

【已知】
canvas 提供了 toDataURL 的接口，可以方便的将 canvas 画布转化成 base64 编码的 image。目前支持的最好的是 png 格式，jpeg 格式的现代浏览器基本也支持，但是支持的不是很好。