摘要：用友UAP平台在本地化缓存方面，从Relation和Object层级上已经做了很多的尝试，同时也取得很好的效果，File层级由于浏览器兼容不好，采用优雅降级的方式融合到项目中，利用本地化的技术手段，大幅提升了UAP产品的响应速度。
数据显示，全球互联网用户以及智能手机用户的数量，增幅正在逐渐放缓。但是，移动数据流量却取得爆炸式的增长，其年度增幅达到了81%，且增长速度正在加快。
移动数据流量增幅逐渐攀升用户越来越依赖于移动终端提供的日常社交、获取信息、商业买卖等服务。大量的访问，提升了服务器端负载压力。移动终端常常会出现页面加载缓慢的状况，这会大大降低终端客户体验。如果将资源文件、代码逻辑文件、结构文件、样式文件缓存在终端设备上，不仅能够降低服务器压力，还能够减少网络延迟、减少网络带宽消耗、减少终端用户流量成本。
HTML5又给本地化带来更多的选择。目前前端缓存技术从技术类型分成传统本地化技术与HTML5本地化技术两类，如图2所示：
图2
传统本地化技术又细分为Cookie，Flash Sharedobject，Goole Gears和User Data。
（1）Cookie，在Web中得到广泛应用，但其局限性非常明显，容量太小，早期有些站点会因为出于安全的考虑而禁用Cookie，因为Cookie的内容会随着页面请求一并发往服务器当前Cookie已经被各大网站完全支持，在UAP各个web平台也一并支持。
（2）Flash SharedObject，其使用的是kissy的store模块来调用Flash SharedObject。Flash SharedObject的优点是容量适中，基本上解决了兼容性问题，缺点是要在页面中引入特定的swf和js文件，增加额外的HTTP请求负担，且处理繁琐。
（3）Google Gears是一个基于Firefox和IE的插件，要使用它，必须先安装相应插件，但其官方网站目前已经停止更新。
（4）UserData其是微软为IE专门在系统中开辟的一块存储空间，只支持Windows+IE的组合，IE的UserData能够存储完整的XML文档，并且会将复杂的数据类型转换为XML存储起来。通过这种方式，数据会被插入到XML数据岛（另一项只有IE中才存在的功能）中。然后整个XML数据岛再被存入UserData中。使用save和load方法可将UserData存储区数据保存在缓存中，一旦保存后，即使浏览器关闭，下一次进入该页面，数据仍然存在，对单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数没有限制，在受限站点里这两个值分别是64 KB和640KB，所以如果考虑到各种情况的话，单个文件以控制在64 KB以下为宜。由于它概念模糊、使用困难，并且只能用于Internet Explorer，所以很少有Web开发人员会使用这种存储方式，大多数的开发人员甚至完全不知道存在这种技术。
HTML5本地化技术的功能之一是本地存储数据并且允许应用程序在无网络时离线运行，有三种不同技术：WebStorage，适用于具有key/value对的基本本地存储；离线存储，利用一个manifest文件来高速缓存所有文件以便离线使用；Web数据库，适用于关系型数据库存储。
在HTML5技术标准中一个非常重要的功能就是可以在客户端本地保存数据的Webstorage功能，该功能使用key/value对来支持存储被Web应用程序访问信息和变量，具体来说，有以下2种方式。
（1）sessionStorage.session，是指用户在浏览网页的时候，从进入网页开始计算到浏览器关闭的这段生命周期内，将数据保存在session对象中，这里的session对象可以用来保存在此生命周期内的所有需要存储的数据。
（2）localStorage不同于sessionStorage，localStorage将数据保存在客户端本地的硬件设备中，通常是硬盘，即使关闭了浏览器，该数据依然存在，下次访问的时候仍然可以继续使用。
目前，Web应用程序已经变得越来越成熟了，仅通过WebStorage存储一些基本数据已经不能满足用户提升响应的需求，为了让整个应用程序在没有网络的离线状态下也能够正常工作，就必须把构成该应用的Flash、图片、CSS、HTML、JS等大量文件存放在本地存储中，此时，即便计算机没有与网络连接，也可以通过本地的资源文件来运行离线Web应用程序。
Web应用程序的本地缓存是通过页面的Manifest文件来管理的，Manifest是一个位于Web服务器上的文件，它以清单的形式展示了需要缓存和不需要缓存的文件。在Manifest文件中，第一行是CACHE MAINFEST，它将是通知浏览器，需要对资源文件列表进行缓存处理操作。
一般地，缓存处理操作如图3所示分为以下3种：
（1）CACHE该类别指定了需要被缓存到本地的资源文件，其为可选项。
（2）FALLBACK该类别每行具有俩个指定的文件，在有网络的情况下第一个资源文件被访问，在没有网络的情况下第二个资源文件被访问，其为可选项。
（3）NETWORK该类别下的文件是不会被缓存到本地，这些文件必须在有网络的情况下才能使用，其为可选项。
图3
通常，可以为每一个页面文件单独指定一个Manifest文件，也可以仅对整个应用指定一个Manifest文件。需要说明的是，在使用Manifest文件时，要对服务器进行设置，让所运行的服务器支持text/cachemanifest这个类型，不同的服务器具体的设置有所区别。
对于简单的数据存储，sessionStorage和localStorage能够很好地完成，但对琐碎的关系型数据进行处理时，其就无能为力了，此时Web数据库可以很好地解决问题。在HTML4中，数据库只能放在服务器端，客户端只能通过发送请求的方式获取到远程数据，而在HTML5中，内置了一个可以通过SQL语法来访问的数据库，其具体步骤是：
（1）通过JavaScript脚本创建访问数据库的对象，参数依次为数据库名、版本号、描述信息、数据大小。
vardb=openDatabase (’dbname’,’1.0.0’,’DB Info’,’200000’);
（2）通过SQL语法进行数据操作，需要调用transaction方法。
上述是从技术角度介绍如何使用缓存技术，下面从存储介质角度分析缓存类型，Web缓存从存储介质角度又可以分为Relation，Object，File三层，如图4所示。每层利用相应缓存技术，以提升网站响应速度，减少HTTP请求，减少后台压力。
图4
Relation：这一级保存了后台session信息，权限信息，页面中的全局状态信息，这些信息的特点是体积小，关系重要。所以在存储上要重视赛选。
Object：这个层面是后台返回的数据。数据应该满足数量大，不易变的数据。同时这个层级要对数据做刷新机制和过期时间设置，保证数据的正常更新。
File：对页面中的静态资源文件进行缓存，文件缓存是离线应用的重点操作。不仅能够提高访问效率，减少HTTP请求，还可以使页面在脱离网络的情况下继续正常使用
经过上述三级缓存，减少了HTTP请求数量，加快响应速度，减少后台的数据响应次数，网站的响应效率提升50%以上。
兼容性方面，HTML5的技术标准在IE老版本浏览器中缺乏支持，各浏览器对本地存储的支持度如表1所示。
表1 各浏览器对本地存储的支持度
Firefox，Safari，Chrome，Opera浏览器对新型前端本地化存储有相当好的兼容性处理，而IE家族相对落后，但随着Windows7及IE高版本浏览器的普及，相信在不久的将来，HTML5技术标准支持的本地化存储技术将得到更广泛的应用。
HTML工作小组于2014年10月28日正式公布HTML5作为W3C新的推荐标准，其定义为超文本标记语言（即HTML）的第五个版本。它主要用于构建一般性的web页面以及复杂的应用程序。HTML5为开放式的Web平台的建设奠定了强有力的基石。HTML5的本地化存储技术作为HTML5的主要功能，将原本必须要保存在服务器上的数据转为保存在客户端本地，从而大大提高了Web应用程序的性能，减轻了服务器端的负担，相信随着网络技术的进步，相信HTML5本地化会在Web应用中起到重要作用。
用友UAP平台在本地化缓存方面，从Relation和Object层级上已经做了很多的尝试，同时也取得很好的效果，File层级由于浏览器兼容不好，采用优雅降级的方式融合到项目中，利用本地化的技术手段，大幅提升了UAP产品的响应速度。
