====索引=====

【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 缓存等问题。

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 风格的应用程序中的工作方式相同。

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

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

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

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

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

这个工具的实现，是我长久以来的一个愿望，缘于之前看到的蓝色理想上的一个代码捕捉器。当时我下下来用了一下，没仔细研究，只觉得很难用，于是心底就有了一颗种子，希望有一天自己能开发出这样的工具。感谢伟大的谷歌，给了我一种优雅的实现方式——谷歌插件。

下面说说技术部分：

一开始用的是浏览器原生的 css rules，可是后来发现谷歌的 css rules 是经过解析的，而 ie 的不是。由于对谷歌的偏爱，所以不得不另辟蹊径。凑巧之前又看到了谷歌的另一个插件——Web Developer，可以把页面引用到的 css 文件内容都显示出来。于是，在控制台把代码复制了下来，考到了我的 js 里面。它的实现原理是用 ajax 请求把所有 css 文件内容给抓下来，这涉及到一个跨域问题。不过不用怕，我们是插件嘛，当然有特殊的权利——跨域 ajax 请求。