LivePool

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

【打造家庭云】1-背景和前言
In 资源工具 on 2014年01月05日 by view: 16,279
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缓存等问题。