LivePool

LivePool 是一个基于 NodeJS,类似 Fiddler 能够支持抓包和本地替换的 Web 开发调试工具,是 Tencent AlloyTeam 在开发实践过程总结出的一套的便捷的 WorkFlow 以及调试方案。

【打造家庭云】1-背景和前言
In 资源工具 on 2014年01月05日 by view: 16,313
10

 背景

笔记本换成 macbook air 之后,发现 128g 的硬盘确实是有点捉襟见肘,加上终端设备越来越多,发觉在移动硬盘、平板、手机、kindle、智能机顶盒等之间共享和同步数据是件蛮恶心的事情。于是开始在想,如果在家里的内部网络构建一个数据中心,能够方便各终端共享和互联,那应该会很便捷。经过一番 google,发觉目前这块已经有蛮多讨论和实践,萌生了写一个系列,总结并结合自己折腾经历做一些备忘,一起讨论。

====索引=====

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

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

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

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

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

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

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

前言

前面的文章分别简述了 Web 缓存、相关机制、以及 html5 和 Web App 时代我们可以选择的缓存思路。转眼过了很长时间,这期间移动互联网成为大家讨论和学习的焦点,部门也有很多同学陆续接触 Mobile Native App 和 Mobile Web App 的开发。同时,还有部分同学专注 QQ 内嵌 Webkit + Client 这种 Hybrid App 模式的开发,继续推动 QQ 客户端 Web 化的进程。

引用张图,简单粗俗的解释下 Native App、Web App 和 Hybrid App

摘要

        Live Reload 是一个旨在提高 web 前端开发者开发效率的 chrome 扩展。当你在心爱的编辑器中更新页面资源(html,js,css)的时候,Chrome 浏览器会自动获取最新的文件并重新载入,避免开发过程需要频繁按 F5 页面的烦恼。特别适合在双屏环境下进行 web 前端开发,不必在编辑器和浏览器之间不停的切换,大大提升开发体验。

====索引=====

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