====索引=====

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

TAT.melody 从Audio标签看webkit内存上涨的问题
In HTML5 on 2012年02月28日 by view: 1,992
0

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

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

TAT.岑安 关于base64编码的原理及实现
In JavaScript,Web开发 on 2012年02月09日 by view: 2,257
1

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

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

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

 一、些许前提

最近在制作一个Web应用, 其中用到了HTML5的离线应用功能(offline application), 离线应用的概念就不再阐述, 可以查看这两篇文章:

http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/

http://www.mhtml5.com/2011/02/583.html

这里主要讨论它的更新问题. 首先浏览器是有两部分cache的, browser cache 和app cache, browser cache就是常说的浏览器缓存, app cache是离线应用的缓存.

TAT.melody css捕捉器的实现
In Web开发,作品 on 2011年12月09日 by view: 3,534
2

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

下面说说技术部分:

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

TAT.melody ie6 position fixed
In CSS3,Web开发 on 2011年11月21日 by view: 1,906
0