基于JSON、JavaScript、HTML5和前端存储技术的均衡运算框架

曹 宇， 陈海峰

（1.上海城市管理职业技术学院人文与信息技术学院，上海 200438;2.华东师范大学，上海 200062）

基于JSON、JavaScript、HTML5和前端存储技术的均衡运算框架

曹 宇， 陈海峰

（1.上海城市管理职业技术学院人文与信息技术学院，上海 200438;2.华东师范大学，上海 200062）

Web应用框架的合理性是决定网站能否正常运营的重要因素之一。文章分析了影响网站运行的两个主要性能开销:页面动态生成和数据库访问操作。针对传统技术处理的局限，提出了一个低成本、由服务器和浏览器均衡运算的技术框架。实验表明，使用本框架开发的Web应用，比之传统框架，其应用性能有了大幅提升。

性能开销;均衡运算框架;前端存储

0 引言

从Web应用技术角度看，动态网页的生成过程，会消耗大量的服务器资源;频繁的数据库并发操作，也会造成对服务器资源的极大消耗［1］;在极端情况下，会导致服务器端负荷急剧上升，甚至崩溃死机，客户端的浏览器则会表现为假死或等待超时，极大影响了网站的可用性［2］。目前大多数应用开发者多会考虑采用服务器集群方案解决以上性能问题，但成本过于昂贵。本文构思了一个均衡运算的B/S技术框架，让浏览器分担服务器的页面生成开销和部分存储开销。实验证明，这种方案可以在不增加硬件成本的情况下，解决性能开销问题。

1 影响网站性能的两个因素

随着网络基础环境的不断改善和提高，各级政府和各类企事业单位都建立了形式多样的网站。网页的响应时间是网站建设质量的关键指标，直接影响着用户的体验。若想节省硬件资源投入，又想达到网站性能优化的目的，就需要深入研究网页生成原理，探索出影响网页响应速度的关键因素［3］。

1.1 页面动态生成

在网站框架设计中，考虑到页面访问量与网站性能呈反向关系，随着单位时间内访问量的增加，网页响应会变慢，当并发访问达到一定上限时，容易出现访问滞缓的问题。若想提高网站性能，提升单位时间内可承受的网页访问量，必须考虑到动态网页的生成过程。常规情况下，不管是何种主流技术(如ASP.NET、JEE、PHP等)，动态页面的生成过程都可视为运行程序生成html页面的过程，该过程会在服务器端消耗CPU和内存资源。单位时间内请求数量增大，动态页面生成所耗资源必然上升，从而引起性能上的下降。据统计，Web应用中20%～50%的数据是短时间内不会发生变化的，但编程中又不得不将它们以动态内容处理输出［4］。此时，采用页面缓存技术和片段缓存技术来解决是比较合适的方式［1］。页面缓存技术用来减低访问动态页面的几率;片段缓存技术则将一些重复取用数据(如菜单和其他布局元素)缓存到本地内存，在各页面中复用。需指出:缓存技术主要针对不常更新的网页，对那些内容实时性要求高的网页就不合适了。

1.2 数据库访问操作

影响网站性能的另一个比较明显的因素是对数据库的频繁访问，数据库并发访问操作太多时，可导致数据库连接过多，从而产生大量的访问竞争。页面表现为响应变慢甚至超时无响应。显然，提高页面响应速度，除了寻求优化数据存取的计算方式，还应尽量减少服务器资源的开销［5］。数据缓存依然是目前主要的技术解决手段，其技术原理是将长期不变数据(静态Cache)或一部分数据(动态Cache)缓存在用户到后端服务器路径上的某个位置处［6］。每次访问数据的时候，都会先检测相应数据的缓存是否存在，如果存在则可直接返回缓存数据，如果不存在就连接数据库，得到数据，显示页面并同时生成缓存数据。因为数据缓存技术减少了访问数据库的几率，相应访问效能就会得以提升［7］。但问题同样存在，对那些内容实时性要求高、需要频繁更新的页面，该技术不适合处理。

2 均衡运算框架构思

2.1 均衡运算框架的基本思路

目前，对于巨量的数据库开销和页面开销，除了对软硬件升级外，一些大型网站通过增加Web服务器、应用服务器、数据库服务器进行硬件集群化处理，将数据处理请求分配给集群中的某台服务器进行处理。即通过增加服务器数量来分担运算，从而达到性能改善的目的，但此方式成本显然太高，非普通用户所能承受［8-9］。若从代码级别上，构思一个更为经济的应用框架，将服务器端的部分页面开销和部分存储开销转移到客户端上处理，应该是不错的选择。在进行理论思考和部分项目实践后，整理出如下的均衡运算框架基本思路。

2.1.1 网页生成处理

(1)服务器端。将页面动态生成开销进行弱化，即将页面生成所需数据生成JSON字符串，并输出到客户端浏览器。

(2)客户端。由JavaScript解析JSON数据，实现页面的真正动态生成过程。即将最消耗运算能力的一部份工作分散到浏览器去完成。

本框架上一次页面生成过程可重新描述为:①浏览器向服务器发送请求;② 服务器读取浏览器请求;③服务器调用业务逻辑生成页面显示所需数据，包装为JSON格式;④ 服务器将JSON格式连同未渲染的html页发回浏览器;⑤ 浏览器获得 JSON数据，用JavaScript去组织html页面，并显示。

此外，实际开发中在客户端结合AJAX技术，还可省下部分html回发开销。

2.1.2 数据存储

考虑将部分数据存放在服务器端数据库中，部分则可利用前端存储技术分储在每个客户端上［10］。这样数据库存储和处理也由浏览器方进行了分担，合理的使用客户端，可以节省到系统资源，并有效地提高整体系统的运行效率［11］。一般而言，重要的业务数据应该存放服务器端上，且多以关系型数据库方式存放;与用户个性化相关数据就可存放在客户端浏览器处，一般以轻量级的方式保存。

本框架下，当服务器数据库压力大时，可考虑一部分数据先保存到客户端，有必要时再同步到服务器端。

2.2 均衡运算框架技术

(1)JavaScript对象表示法 (JavaScript Object Notation，JSON)。是基于 JavaScript(Standard ECMA-262 3rd Edition-December 1999)的一个子集，定义着存储和交换文本信息的语法。JSON采用完全独立于语言的文本格式，基础结构仅有两种，即对象和数组［12］。

对象以键值对结构表述，例如{"name":"Adams"，"sex":"M"}。具体语法参见图1。

图1 “对象”语法图

数组以元素在"［］"中括起来的结构表述，如［"C"，"C++"，...］。具体语法参见图2。

图2 “数组”语法图

经过对象、数组两种结构就可组合成复杂的数据结构，如{"emps":［{"name":"Adams"，"sex":"M"}，{"name":"Bob"，"sex":"M"}］}。

本框架中，页面显示所需的数据在服务器端以JSON格式产生，并将JSON格式数据回传给客户端。

(2)JavaScript。属于 Web语言，被设计为向HTML页面增加交互性，目前是HTML5的默认脚本语言，为所有现代浏览器接受。JavaScript具备多种功能，如HTML输出、事件处理、改变 HTML内容和样式、验证用户输入等［13］。作为业界成熟语言，其具体语法不再此处累述。

本框架中，JavaScript用于将服务器回传的JSON格式数据显示出来。如JSON格式数据emp={"name":"Bill Gates"，"age":56}，用 JavaScript将其显示在 id值为 name的 html元素中:document.getElementById("name").innerHTML=emp.name。

(3)HTML5前端存储。传统C/S应用可将一部分数据存储在前端(客户端)，来分担部分存储运算压力和网络传输压力。B/S应用也可借鉴其概念，即把信息存储到客户的浏览器端，并在以后需要的时候进行获取。目前，浏览器可采用技术有 Cookie、Flash SharedObject、Google Gears 和 IE User Data［14］。其中Cookie可普遍使用于各类浏览器中，但局限性明显，一是容量的限制，多数浏览器把它限制在4K之内，二是用户从安全考虑，有时会禁用Cookie;剩下几种技术都与浏览器类型和插件相关，使用限制性更大，而不宜采用。而HTML5的本地存储技术(local storage)似乎就是为解决这一问题而设计的，它支持每个网站5MB的本地存储，一般应用显然已经足够。此外，各家主流浏览器(IE8.0+、Chrome4.0+、Safari4.0+、Firefox3.0+、Opera10.5+、iphone2.0+、Android2.0+)在不同程度上都已支持HTML5本地存储［15］。

HTML5本地存储技术有三种方式:Web Storage、离线存储和Web数据库。Web Storage以键值对结构存储基本数据，可选择放置到session或本地设备中;离线存储以文件清单方式告知浏览器来存储其指定的资源文件;Web数据库是在浏览器处用JavaScript创建出数据库，并可用SQL语法对其操作［15］。

本框架可根据应用场合的不同，来灵活选用本地存储技术方式。但鉴于目前主流浏览器对Web Storage支持的最为透彻，所以目前应用框架中建议使用Web Storage来分担存储部分应用数据。

3 均衡运算框架实例解析

以ASP.NET考试系统实例来解析框架，简洁起见，仅选择两功能实现来说明:试卷的生成和显示;试卷数据本地化保存。

3.1 试卷的生成和显示

服务器端用Entity Framework访问数据库随机抽取试卷，用 ASP.NET MVC3技术将试卷数据生成JSON字符串并输出到客户端浏览器。注意，服务器端并不用控件来生成页面输出，生成考卷的过程将在客户端通过JavaScript完成。即将最消耗运算能力的一部份工作(页面渲染)分散到客户端浏览器处了。示意代码如下:

(2)浏览器端。获取JSON格式的试卷数据，通过jQuery将数据和静态html代码包装成html标签元素，并添加到页面的DOM树之中来显示页面。示意代码如下:

3.2 试卷数据本地化保存

判断是否已有本地试卷数据存在，如若没有才向服务器发起一个AJAX请求以获取。如果本地已有相应试卷数据，则直接生成元素并添加到页面的DOM树中。因为本地数据的存在，浏览器自己用JavaScript就能渲染页面，减少了向服务器请求发送，即减少了服务器端的处理开销;另外，本地数据的存在带来了离线处理的功能。浏览器端示意代码如下:

3.3 框架实验效果

将考试系统安装在配置为酷睿i7四核处理器的PC档服务器上，用Visual Studio 2010内部测试工具模拟400用户并发访问，对该系统负载测试。在未改换框架前，面对400用户并发访问量，服务器CPU瞬间达到100%，且无下降趋势;改换均衡运算框架，同样处理400用户并发访问，服务器CPU一直稳定在40%～60%，这说明本设计框架对服务器分担运算开销作用明显。此外，在一场有200多名学生参与的现场考试中，未出现以往大量浏览器假死或长时无反应现象，避免了需分场次考试的尴尬。实践表明，使用本框架开发的Web应用，其可用性较之传统框架应用有了大幅提升。

4 结语

虽然网站性能优化可以通过增加服务器，用集群方式来提高，但成本过高。从改造Web应用的技术框架入手，将服务器高耗运算分发到客户端浏览器处理，就能在不增加硬件成本的前提下，起到明显改善网站性能的效果。使用本文基于JSON、JavaScript和前端存储技术的均衡运算框架，可减小服务器端两个主要方面的压力:①高并发访问所造成的数据库压力;②频繁访问网页而造成的页面动态生成开销压力。该框架的项目实践表明:对于性能要求较高且硬件预算不高的网站极具参考价值;此外，若和集群、缓存技术、数据库性能优化、Web组件分离等其它技术综合使用，应可发挥更大的作用。

［1］ 张建超，张连堂.网站框架演变技术研究［J］.现代计算机，2012(3):51-55.

ZHANG Jian-chao，ZHANGLian-tang.ResearchontheWebsite Architecture Evolution Technology［J］.Modem Computer，2012(3):51-55.

［2］ 于大伟，田 地.基于WEB信息系统的优化管理及架构调整［J］.长春工程学院学报(自然科学版)，2006，7(1):54-56.

YU Da-wei，TIANDi.Optimizing management and adjustment of structure about information system based on Web［J］.Journal of Changchun Institute of Technology(Natural Sciences Edition)，2006，7(1):54-56.

［3］ 宁玉文，高东怀.高校门户网站前端性能优化策略探析［J］.信息技术，2012(2):118-122.

NING Yu-wen，GAO Dong-huai.Exploration on front performance optimization strategy of college portal website［J］.Information Technology，2012(2):118-122.

［4］ 高 飞，侯瑞春，周志明.Web页面缓存技术在业务系统中的应用［J］.计算机技术与发展，2012(2):118-122.

GAO Fei，HOURui-chun，ZHOUZhi-ming.Application ofWeb Caching Technology in Business System［J］.Computer Technology and Development，2012(2):118-122.

［5］ 白 雪，陈广山.基于B/S结构的管理信息系统中合理分布统计运算的研究［J］.黑龙江工程学院学报(自然科学版)，2005，19(1):41-43.

BAI Xue，CHEN GUANG-shan.Statistical calculation of reasonable distribution research of MIS based on B/S architecture［J］.Journal of Heilongjiang Institute of Technology，2005，19(1):41-43.

［6］ 周晓云，覃雄派.DB Facade:一个保证数据时效性的Web数据库Cache［J］.苏州大学学报(工科版)，2008，28(2):67-72.

Zhou Xiaoyun，QinXiongpai.DB Facade:A Web Database Cache with Fresh Data［J］.Journal of Suzhou University(Engineering Science Edition)，2008，28(2):67-72.

［7］ 曹 恺，王海芹，杨永侠.提高高访问量交互式网站性能［J］.计算机工程与应用，2007，43(12):170-172.

CAO Kai，WANGHai-qin，YANG Yong-xia.Enhance highly accessed interactive Website performance［J］.Computer Engineering and Applications，2007，43(12):170-172.

［8］ 赵水宁，邵军力.多Web服务器负载均衡技术的研究［J］.电信科学，2001，17(7):6-8.

ZHAO Shui-ning，SHAO Jun-li，YANG Yong-xia.Research on Load Balancing for Multi-web Servers［J］.Telecommunications science，2001，17(7):6-8.

［9］ 吴 蔚.网络站点的负载均衡技术探索［J］.计算机时代，2004(7):5-6.

WU Wei.Research on Load Balancing technology for web site［J］.Computer Era，2004(7):5-6.

［10］ 李 娜.基于“RIA”架构下的多媒体教学平台本地存储技术研究［J］.产业与科技论坛，2012(20):74-76.

LI Na.Research on the local storage technology based on the RIA framework of multimedia teaching platform［J］.Industrial＆ Science Tribune，2012(20):74-76.

［11］ 白 雪，陈广山.基于B/S结构在线考试系统的设计与研究［J］.中国教育技术装备，2004，12:3-5.

BAI Xue，CHEN GUANG-shan.Statistical calculation of reasonable distribution research of MIS based on B/S architecture［J］.China Educational Technique ＆ Equipment，2004，12:3-5.

［12］ 张 涛，黄 强，毛磊雅.一个基于JSON的对象序列化算法［J］.计算机工程与应用，2007，43(15):98-133.

ZHANG Tao，HUANGQiang，MAO Lei-ya.Algorithm ofobject serialization based on JSON［J］.ComputerEngineering and Applications，2007，43(15):98-133.

［13］ Danny G.JavaScript宝典［M］.第4版.北京:电子工业出版社，2002.

［14］ 钱海军.基于HTML5的客户端本地MIS系统的设计与实现［J］.现代计算机，2012(15):72-74.

QIAN Hai-jun.Design and Implementation of Client MIS Based on HTML5［J］.Modem Computer，2012(15):72-74.

［15］ 李烨民.基于HTML5的前端本地化存储技术［J］.成都大学学报:自然科学版，2012，31(1):67-69.

LI Ye-min.Localized Storage Technology of Front-End Based on HTML 5［J］.Journal of Chengdu University(Natural Science)，2012，31(1):67-69.

Operation-Balancing Framework Based onJSON，JavaScrip and Front-end Storage Technology

CAO yu，CHEN Hai-feng
(Branch of Humanities and Information Technology，Shanghai Technical College of Urban Management，Shanghai 200438，China;East China Normal University，Shanghai 200062，China)

Application framework is one of the most important factors in the future that will inflenceinfluence the operation performance of websites.This paper analyzes two main influences of performance overhead website operation.，And and discusses the limitations of the related technologies.Finally，it puts forward a low cost framework which can balance operation pressure between server and browser.

performance overhead;operation-balancing frameworkb;front-end storage

TP 311.1

A

1006－7167(2014)05－0116－04

2013－07－01

曹 宇(1975－)，男，上海人，硕士，讲师，工程师，研究方向:计算机应用技术。

Tel.:13701830596;E-mail:caoyu17@163.com