Web App常见架构

以WebQQ例,WebQQ这个站点的所有内容都是一个页面里面呈现的,我们看到的类似windows操作系统的框架,是它的顶级容器和框架,由AlloyOS的内核负责统筹和管理,然后其他模块,比如壁纸设置,消息中心,App Store都是以模块的形式,并用iframe的方式嵌入到顶级容器中。具观察,现在越来越多的Web应用都倾向于使用这个的架构,这样做好处是很明显的,比如顶级框架可以维持一个不变的javascript上下文便于管理;关闭模块的iframe后,内存可以更好的释放;利用iframe的安全机制最大限度的保证内核的安全和稳定等等。

这种Web的架构,其实也给我们Web前端提供了从代码逻辑层面上给Web应用实现缓存提供了可能。

缓存Ajax请求

由于顶级框架页面是不会由于调整刷新而导致javascript上下文丢失,所以底层或各个模块所需要的Ajax请求,都是可以通过顶级框架统一请求后,并以信息服务的形式对外提供Api调用。对于一些实时性要求不是很强的请求来说,可以由顶级框架做统一缓存,定期更新。这种做法可以不影响用户体验的前提下,明显减少请求数,降低网络流量,并间接减轻了服务器的压力。

通过Javascript实现内存缓存

跟缓存Ajax请求的结果类似,程序运行过程中的其他数据,其实也可以采用类似的方式在顶级容器的Javascript上下文中缓存。

Web App发展新方向:Web-Client模式

随着Web App的进一步发展,貌似浏览器已经无法阻挡Web应用探索更前端,更本地化Native App的用户体验。比如目前的Qplus豆瓣荚等应用,都采用Client、Web相结合的开发模式。这样做即可以利用Web开发迭代更新快、UI开发成本低等特点,有可以利用客户端的能力为Web实现很多无法实现的功能。以Qplus为例,Qplus不但内嵌了Webkit内核,还未Webkit上定制了很多便利的接口,比如跨Web-Client的拖曳、多线程下载等。在这种发展新模式下,Web缓存又能有什么考虑的发张方向呢?

客户端提供缓存读写能力

我们知道,HTML5的localstorage仅仅只能支持5m的存储。我们可以按localstorage的设计思路,让客户端为Web定制更大,更灵活的本地存储功能。到时,Web缓存能做的事情就会更多。

Web App时代的缓存机制新思路的更多相关文章

  1. 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

    本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...

  2. 使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录

    使用 jQuery Mobile 与 HTML5 开发 Web App 系列文章目录 时间:2012年9月20日 分类:JavaScript 标签:HTML5‚ jQuery Mobile‚ Web ...

  3. Web app制作细节:web app互动制作技巧

    Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的制作, ...

  4. H5 缓存机制浅析 移动端 Web 加载性能优化

    腾讯Bugly特约作者:贺辉超 1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5 引入的离线存储, ...

  5. web app 禁用手机浏览器缓存方法

    开发过web app的同学,特别是前端人员,都碰到这烦人的事情,JS或CSS代码改变,可手机浏览器怎么刷新都不更新,手机浏览器的缓存特别恶劣. 所以今天贴个方法解决这问题.记得,本地调试的时候贴上,上 ...

  6. 进击的Hybrid App,量身定做缓存机制

    引用张图,简单粗俗的解释下 Native App.Web App 和 Hybrid App Navtie App: 使用平台系统提供的原生语言来编写的 App,如果Android用java,ios用o ...

  7. Web前端的缓存机制(那些以代价换来的效率)

    对于Web前端而言,cache可以说是无处不在,通常是2个环节之间,就会引入一个cache做为提升整体效率的角色.例如A和B两者之间的数据交换,为了提升整体的效率,引入角色C,而C被用于当做热点数据的 ...

  8. Web浏览器的缓存机制

    Web缓存的工作原理 所有的缓存都是基于一套规则来帮助他们决定什么时候使用缓存中的副本提供服务(假设有副本可用的情况下,未被销毁回收或者未被删除修改).这些规则有的在协议中有定义(如HTTP协议1.0 ...

  9. wemall app商城源码Android之ListView异步加载网络图片(优化缓存机制)

    wemall-mobile是基于WeMall的android app商城,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可定制修改.本文分享wemall app商城源码Android之L ...

随机推荐

  1. 计算机开放电子书汇总(包括二十多本python相关的图书教程)

    计算机开放电子书汇总(包括二十多本python相关的图书教程) https://github.com/it-ebooks/it-ebooks-archive 这个汇总包含了各种计算机相关的开放图书和文 ...

  2. 微信不支持Object.assign

    微信不支持Object.assign,让我Vue怎么用QAQ... 解决方法: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Refe ...

  3. DevExpress中的ASPxTreeView 递归显示checknodes并获得选中值

    aspx代码 <dx:ASPxTreeView ID="ASPxTreeView1" runat="server"> </dx:ASPxTre ...

  4. python pickle 和 shelve模块

    pickle和shelve模块都可以把python对象存储到文件中,下面来看看它们的用法吧 1.pickle 写: 以写方式打开一个文件描述符,调用pickle.dump把对象写进去 dn = {'b ...

  5. J1签证办理全过程

    从3月底开始申请,整理J1的材料,一直到现在VISA的status变成了issued,中间被check了20多天,终于快要可以去silicon valley了. 废话不多说,J1签证很easy,不要有 ...

  6. SqlServer 列的增加和删除

    有些时候我们需要删除或增加数据库中有数据中表的列.总结一下列的删除和增加. 1. 删除列 当表中存在数据时,删除列后,数据也会被删除. sql语句: alter table 表名 drop colum ...

  7. zz linux 下查看局域网内所有存活主机和MAC进址

    用namp对局域网扫描一遍,然后查看arp缓存表就可以知道局域内ip-mac的对应了namp比较强大也可以直接扫描mac地址和端口 进行ping扫描,打印出对扫描做出响应的主机: nmap -sP 1 ...

  8. WCF 基础

    ServiceModel 配置元素 Binding 配置元素: 客户端Web.config: <?xml version="1.0" encoding="utf-8 ...

  9. ASP.NET MVC Model元数据

    ASP.NET MVC Model元数据(三) 前言 在上篇中我们大概的讲解了Model元数据的生成过程,并没有对Model元数据本身和详细的生成过程有所描述,本篇将会对详细的生成过程进行讲解,并且会 ...

  10. react native 子组件向父组件传值

    父组件:   引入子组件:import CheckBox from  '../checkbox';   父子之间交互通信,接受子组件的值 fn(val){this.setState({roleType ...