腾讯应用商店前端框架设计与实现及性能优化

ClassifiedIndex：TP311U.D.C.:621.3DissertationfortheMaster‟sDegreeinTHEDESIGNANDIMPLEMENTATIONOFFRONT-ENDFRAMEWORKANDPERFORMANCEOPTIMIZATIONFORQPLUSAPPSTOREOFTENCENT Zhichao EngineerGuoxiangAssociateSupervisor: SeniorEngineerYuqinZhangAcademicDegreeAppliedfor：MasterofEngineering SoftwareEngineering SchoolofDateof June,Degree-Conferring-Institution：HarbinInstituteof随着开放平台的兴起，基于开放平台的应用越来越多。Q+应用商店正是Q+开放平台应用的载体和，提供了丰富的应用管理、推荐和聚合的功能。用户可以对自己的应用进行管理，也可以从诸多分类应用中挑选适合自己的应用。Q+充分使用了QQ强大的关系链数据，好友的动态消息推送和应用都具有典型的社交网络特征，针对不同用户的个性化推荐也是Q+应用商店突出的一点。Q+应用商店采用客户端与eb相结合的工作模式，充分利用了客户端和eb各自的优势，客户端可以更好的调用操作系统的接口，而eb则适于快速迭发和信息展示。两者相结合，为应用商店和开放平台的快速发展提供了有力的支持，而且避免了客户端升级不易以及eb与操作系统交互弱的弊端。本文以eb前端应用、eb与客户端通信以及应用商店数据为研究对象，研究适合客户端eb结合的这一类程序的工作框架。旨在设计一套良好的方案，处理数据通信、系统框架类库封装以及性能优化。一个系统的框架设计决定了其可用性、稳定性和可扩展性。应用商店的前台逻辑处理量比较大，对不同层次的内容需要进行分别处理。通过功能模块划分、底层API函数的抽象、以面向对象的思想对JS语言功能实现封装以及模块化等工作设计实现了一个良好的前端框架。使用MVC的思想进行eb前端开发设计，解决富客户端程序开发中JS代码组织混乱的问题。以ahoo优化策略作为eb开发指导，数据处理策略作为数据处理核心，确保在基础层次和框架层次上系统有着优秀的性能。最后，对性能数据进行统计分析，发现潜在的问题。以HTML5新技术的研究作为基础，在系统的实现和重构过程中大量使用新技术，进行性能优化实践。应用商店的框架设计和性能优化方案，对于同类型工作模式的系统有着较强的适用性，为它们的开发、设计和优化提供了指导方案。：应用商店；Web 前端；HTML5；性能优Withtherapiddevelopmentofopentform,therearemoreandmoreapplicationsbasedonit.QplusAppStoreisthecarriersandentranceforapplicationsbuiltonQplusopentform,itprovidesapplicationmanagement, mendationandaggregation.UsersmanagetheirownapplicationsandchoosefromtheAppStorewhatevertheylike.TheAppStorealsotakesadvantagesoftheuserrelationshipdatafromQQ.Feedsandapplicationswillshareandsendthroughtherelationshipchain,fullwiththefeaturesofsocialnetwork. mendationisalsoanimportantpartofQplusAppstore.Itusesacombinationof andwebtowork,makingfulluseoftheirownadvantages.The canmakebetterin ctivewiththeoperationsystemandthewebissuitableforrapidi tivedevelopmentandinformationdisy.ThecombinationofbothgivesastrongsupporttothedevelopmentofQplusopentform,avoidtheweakdrawbackswhichmeansthe can'tbeupgradedeasilyandthewebcan'thavemuchcommunicationwiththeoperationsystem.Inthispaper,wechooseWebfront-endapplication,communicationbetween andwebanddataofAppStoreforstudy,targetforasuitableframeworkforthesetypeofworkwhichcombines andweb,aimstodesignagoodsolutiontohandledatacommunications,front-endframeworklibrarydesignandperformanceoptimization.Theframeworkofasystemdeterminesitsavailability,reliabilityandscalability.ThereiscomplicatedlogicprocessingtodobytheAppStoreweb,sodifferentlevelsofcontentneedstobedealtwithsepara y.Bydivisionofthemodule, ofbaseAPIandobject-orientedprocessofJS,designawellworkedfront-end confusingproblemsintheorganizationandimplementationofJScode.YahoooptimizationstrategyanddataprocessingstrategysupportsagoodperformanceatthebaselevelforQplusAppstore.Finally,weidentifypotentialproblemsbyysistheperformancedata.NewtechnologyofHTML5isthemaintooltodooptimizationforoursystem.AppStore‟sframeworkdesignandperformanceoptimizationsolutionswillworkwellforthesametypeofsystemontheirdevelopment,designandoptimization.:Appstore,Front-endofWeb,HTML5,Performance摘 第1章绪 课题来源及研究意 与课题相关的国内外研究综 开放平台和应用商 Webkit浏览器引 Web前端性能优 主要工作内 第2章应用商店需求与关键技术分 Q+应用商店运行框 应用商店的工作模 运行框 需求分 Q+应用商店前端总体需 目 关键技术分 XHR2.0的CORS方 HTML5提供的性能统 JS与CSS处理的比 本章小 第3章应用商店前端框架设 Q+应用商店前端概 应用商店前端框架设 JS框架设 数据处理策 自动化运营方案设 本章小 第4章应用商店前端框架和性能优化的实 前端框架的实

1章绪论本课题来源于腾讯科技（）的Q+项目，主要研究Q+应用商店前端框架以及性能优Q+应用商店(即Q+Appstore)是Q+平台上应用的一个重要，较之Q+桌面提供了更加丰富的应用管理、推荐和聚合的功能。用户可以对自己已有的应用进行管理，也可以从诸多分类应用中挑选适合自己的应用。Q+充分使用了QQ强大的关系链数据，好友的动态消息推送和应用都具有典型的社交网络特征，针对不同用户进行个性化应用推荐也是Q+应用商店突出的一点。Q+开放平台属于腾讯三大开放平台之一，它们分别是社交、和Q+。通过应用接入和QQ互联可以使应用充分利用QQ以及其它开放平台的优势。开放平台提供应用平台、推送通知、同一账号、多关系链、通信传输、状态共享和应用分析等诸多服务，推动了整个行业的更快发展。苹果开创了应用商店模式，进行分成，激发了开发者的积极性，为公司和开发者带来了双赢[1]。应用商店的模式值得众多开放平台的学习，Q+应用商店的推出，为国内开发者提供了一个更为熟悉、广阔的空间。Q+应用商店运行在Q+客户端之上，是基于HTML5开发的Web应用，同时通过客户端的扩展可以充分的使用客户端提供的功能。这种客户端与Web相结合的工作模式越来越受欢迎。即能利用客户端与操作系统交互的能力，又能通过Web快速的迭发更新，具有较低的跨平台移植难度[2]。本文研究在这种工作模式下前端开发的框架，能够为Q+应用商店的运行提供稳定高效的基础。通过定制性能优化策略，提高用户的体验。近些年，互联网获得了迅速的发展。简单的导航和搜索功能并不能满足需求了，现在的互联网需要通过开放来获得发展3，开放平台具有较强的代表性。开放平台的提供商将自己的计算能力、通信能力和能力等做成服务和接口，通过开放平台提供给开发者进行使用。开放平台之上运行的都是基于这个平台的应用，因为它们的底层基础一致。这种网络服务模式被称作开放平台4。在这种模式下，开放平台提供者通过提供服务和第实现双赢，不仅提高了用户对平台的粘性，而且通过利益分摊，达使自身和第都获得了发展。平台的开放化能够汇聚的资源，平台企业在保持自己优势的同时也让这种优势更加放大。另一方面，开放平台也提供了全新的 、商业模式与海量客户源，为第提供了良好的发展空间，第开发者可以基于该平台创建应用，满足用户个性化的需求，用户、开发者和开放平台都可以从中获利[5]。开放平台具有可靠性和安全性，可以帮开发者节约成本。应用容易部署，并且有着专业的技术支持[6,7]。随着脸谱网推行的开放平台逐渐盛行，全球各大互联网公司陆续推出自己的开放，开放平台的发展前景良好。开放平台有以下两种[8,9]：应用型：开放平台开发者对其进行功能扩展。这种类型的开放平台基于一种基础应用模式，如脸谱网、谷歌应用商店、苹果应用商店等。ChromeWebStore应用商店如图11所示。1-1ChromeChrome应用商店为Chrome浏览器用户提供服务，所有的应用均是由开发者创建的Chrome插件应用。在应用商店中，应用如同商品一样进行，因此开发者可以获取收入。应用商店为开放平台上的应用提供了管理，是使用者发现应用的。同时可以根据用户喜好，进行个性化的应用推荐[10]。服务型：这种类型的开放平台并没有基础应用模式，它将自己的计算能力、通信能力和能力等做成服务和接口，通过开放平台提供给开发者进行使用。这样开发者就可以不用关注底层实现，投入的精力在业务逻辑上。开放平台提供的服务能让应用实现快速开发和部署[11]。例如谷歌应用引擎、亚马逊简单服务等。开放平台为互联网的发展提供了强大动力，而应运而生的应用商店则为其构造了良好的生态环境和合理有效的收益链。WebkitWebkit是一款开源的浏览器引，被十分广泛的使用着。例如Safar、Chrome及 和Android上的浏览器，都以Webkit作为。它有着良好的网络兼容性、标准符合性、稳定性、安全性、便携性和易用性。Webkit是一个开源项目，它的代码容易理解和修改。它反映了浏览器本质的需求，速度、稳定性和兼容性[12,13。Webkit浏览器引擎包含网页和脚本两个引擎，分别是WebCore和JavaScriptCore，它们对应着KHTML和KJSKJS[14]。Webkit可以作为Web内容的解析引擎，使用标准的技术处理如HTML、CSS、Javascript和DOM的内容。同时Webkit内核可以嵌入到其它应用程序中，作为一个通用的显示与交互引擎[15,16]。通过浏览器来完成用户和应用程序之间的交互，可以很大的降低程序的开发和一直难度。现代浏览器提供了扩展机制来加载本地代码，这种方式为强化浏览器的应用程序支持提供了方法[17,18]。WebKit的目的是为了符合Web标准，除了提高对新标准的支持，还确保在引擎中执行严格测试，保证标准符合要求。遇到问题之后，挂起及时处理，使得它的代码始终保持高度的稳定性。WebKit对HTML5中的新特性进行了支持，包括CSS3特性和数据通信等。这些特性还没有被所有浏览器支持，WebKit在性能和标准上的出色表现推动了标准和新技术的快速发展。采用新标准的系统具有更好的安全性、扩展性和易性[19]。WebKit项目旨在解决各种需求，它的良好框架设计让其应用广泛[20]。它的使用场景包括桌面、移动、嵌入式和其它各种平台，提供了友好的嵌入API。bKt的跨平台、高性能和稳定成了众多需要进行b解析的程序的首选[21]。HTML5为Web带来了飞速的发展，和以前版本相比，HTML5不仅仅用来进行内容展示，它使得Web成为了一个成平台。它为基于Web的音频、和动画等制定了标准，并且有越来越多的资源投入到了标准的制定过程中。HTML5让Web拥有了的可能，开发者可以构建丰富的Web应用，为用户提供良好的体验和交互。随着标准的推行，基于浏览器的HTML5技术能够真正实现跨平台和跨终端，并且没有太多的兼容性问题。这样的发展前景吸引了众多IT企业投入资源到HTML5的发展普及中，包括标准的制定推行以及HM5生态系统的发展[22]HM5中加入了很多新的概念2324，包括HTML中新的和通信技术等。新的中具有代表性的有 >、<audio>和<canvas>等。通过 >，我们可以引入元素<audio>可以引入音频文件，不需要额外的插件，就可以在网页中多媒体。<canvas>让Web本身拥有了图形绘制能力，不借助Flash，Web开发人员就可以进行动画和游戏的开发，程序将运行于支持HM5的浏览器中[25]。 规范是一个技术草案集，处于不断的更新中。它涵盖了很多种浏览器技术，有本地客户端、转变、、转换和CSS3样式等[26]。标准中的本地化使WEB更适于支持离线应用[27]，同时提升网络覆盖薄弱区域的体验，提高了用户体验、平衡网络负载，促使流量发生在较好的网络环境中。HTML5不仅丰富了Web页面的标识和渲染能力，最重要的是它使客户端具备了创造能力，并完善了服务器客户端交互通信能力，而基于Web的实时通信也在标准制定中；同时HTML5新增的离线应用及缓存技术使Web脱离了在线交互的限制，使其拥有了桌面程序所有的表达和应用能力[28]。Web现在的社会处于一个信息化的时代，人们越来越多的通过网络来获取信息，信息量不断的在增长，网络的规模也越来越大。新兴的社交网络如交友、以及移动端设备的普及，网络成为了重要的 [29]。但是与网络的快速发展相比，国内的网络通信质量还远远跟不上。根据2011年底的DCCI互联网数据中心发布的《中国宽带用户》结果，中国互联网用户超过半数上网网速达不到标定速度。这使得网络上的数据通信显得捉襟见肋，对于通信数据的大小要求很高。与此同时，eb的用户量越来越大，在同等服务器条件下，用户的体验和eb的性能优化成正比。显然在国内eb前端优化的重视程度不如后台优化或者客户端的优化，但是我们应该要发现eb前端优化能够给我们带来的好处。可以通过较少的资源消耗提高的易用性和性能优化。降低服务器和网络通信的压力，因此eb前端的性能优化也逐渐成为研究的热点[30,31,32]。不少公司对Web前端的优化并且贡献良多，例如和Yahoo两家互联网的巨头公司。公司开发了一款名为PageSpeed的页面性能分析工具，它以时间消耗作为性能的主要关注点。一个页面的时间消耗可以分为多个阶段，包括DNS解析查询、建立连接、数据文件资源传输、文件解析、执行以及页面的渲染[33]。Yahoo公司同样开发了一款优秀的性能分析工具，级YSlow，以浏览器插件的方式运行。能够分析页面中各种资源的时间消耗，包括JS文件、CSS文件和资源文件等[34]。这些资源的消耗占据着总消耗时间的80%左右，有着极大的优化实践意义[35]。Yahoo公司根据现有的协议和优化实践成果提出了一些优化建议，是业界十分认可的通用优化指导规则Web前端的优化建议可以归纳为3数据请求每个数据请求都会消耗网络通信，因此要尽量减少HTTP请求的个数。我们可以充分利用文件在浏览器端的缓存来重复使用资源文件，也可以将多个小文件合并成一个文件用来减少请求。另外，我们要减少不必要的请求，例如页面的跳转。数据通信通信的数据包括浏览器发往服务器的数据以及服务器的响应数据发往服务器的数据都会携带本下的所以要尽量减少数据的大小。服务器的响应数据如果文件类型允许则使用gzip进行压缩，减少传输量。为了更快的网速，可以使用CDN(内容分发网络)进行静态文件的传送。在一些应用场景下，可以使用延迟加载的策略将数据通信延后，在需要的时候再进行必要的数据通信。浏览器对页面的处理浏览器的处理在很大程度上影响着前端的性能。一方面，为了更好的用户体验，可以将CSS文件放到顶部，JS文件放到底部这样页面能够渐进式的呈现，不会因为JS的解析执行而阻塞页面必要的渲染。同时在减少DOM的（缓存DOM处理结果、减少iframe的个数、不使用CSS表达式和不适用滤镜都能大大提高页面的渲染效率，提高页面的帧率，降低系统资源的消耗。Web前端优化的建议和页面性能分析工具都能很好的Web前端的性能优化工作。本课题研究的主要内容是基于Q+平台的应用商店前端。它是用户与应用商店关联的重要一环，在开发模块功能的同时，从以下几个方面对其进行了研究，如图1-2所示。1-2课题研究内容AppstoreWeb端的运行环境应用商店前台可以被认为是依赖于客户端的WebApplication，如何与客户端进行有效稳定的通信，是整个系统工作的基础。另外，基于Webkit内核的客户端程序为我们提供了良好的Web标准支持。在系统的开发中合理的使用HTML5新特性，将会极大的提高系统性能和展示效果。AppstoreWeb端的整体框架 一个系统的框架设计决定了其可用性、稳定性和可扩展性。应用商店的前台逻辑处理量比较大，我们需要对不同层次的内容进行处理，功能模块划分和底层API函数的抽象。需要以面向对象的思想着手JS语言功能的实现封装，通过模块化减少逻辑的依赖耦合。同时，不同模块之间的异步通信及状态同步也是逻辑处理中较为重要的一环。AppstoreWeb端的数据处理策略应用商店前台与服务器端的通信主要以CGI数据为主，数据文件为辅。如何有效的管理数据请求、分析、使用和存储对于降低服务器端压力，提高系统性能有着重要的意义。功能开发及自动化运营在开发新功能的同时，尝试对已有模块进行优化重构，而不影响现有系统的运行，即渐进式的系统性能优化。自动化运营策略将页面中可配置化内容统一管理，方便的添加、删除和自定义，使用时间戳和配置规则作为数据检验的有效。性能优化一个运行良好的系统必少不了优化，我们主要从Web前端的优化入手，提高应用商店的性能。Yahoo的优化策略可以作为常规的参考，的是结合应用商店本身的特点进行性能优化。例如HTML5的新特性本地数据存储、CSS等，以及根据需求制定的延迟加载策略。本的写作部分主要分为以下几个部分：1章是绪论，介绍了课题的来源及研究意义，对于课题相关的国内外研究进行综述，包括开放平台、应用商店、Webkit引擎、HTML5和Web前端性能优化等内容。第2章阐述了应用商店的运行框架，完成对前端的需求分析。并且给出对使用的关键技术的分析，包括通信方案的比较和性能数据的统计，是前端性能优化的基础。3章进Web前端框架设计，主JS框架设计、数据处理策略和自动化运营方案设计等内容。第4章是实现部分。通过流程图、类图和时序图以及文字说明的方式，分别阐述了前端框架和性能优化的实现。5章是测试内容。首先是测试流程和环境的介绍，然后是系统的功能测试。通过性能测试数据的分析对优化方案进行检验。最后给出应用商店用户数据的统计结果。最后是结论，对的研究成果进行了总结。同时对应用商店前端开发框架和性能优化的改进点进行表述。2本节将从AppstoreWeb端的总体需求进行分析，探讨系统所要完成的功能。在客户端运行框架的基础上，分别就系统框架、数据处理策略、自动化运营和系统的性能优化等方面进行研究，得到总体的设计研究方案。Q+Q+Appstore是依托于Q+客户端运行的，它的有Q+桌面，QQ面板应用商店，QQ面板选项卡。不同都提供了客户端API的支持，为了对Q+AppstoreWeb端总体框架有更好的理解，首先需要清楚Q+Appstore的工作模式。应用商店采用客户端和Web的混合工作模式，由前端负责完成主要的逻辑计算过程，如图2-1所示。2-1Q+Appstore工作模式客户端与操作系统有更强的交互，Web更快开发，适用于信息展示和用户轻交互的场景，满足快速迭代和升级的需求。客户端基于Webkit内核进行改造优化，提供更适宜与Web交互的API。两者相结合，即可解决客户端升级的问题，又可提升Web与操作系统的交互能力。相比纯客户端或者纯Web的实现方式，有了更好的适用场景和跨平台能力。前端负责完成主要的逻辑计算，服务器端提供数据，这样可以大大的降低服务器端的压力，充分利用客户端的计算能力。并且，这样服务器可以专职于基础数据的提供，清晰的区分CGI服务器和静态文件服务器，数据形式有非常好的通用性，不局限于特定的项目需求。运行框客户端API的支持主要来源于基于webkit内核的客户端程序。Q+因此具有了优秀的Web展现能力，运行其中的Appstore属于Web应用，但是它与客户端的交互很多不是直接进行的，在客户端和Appstore中间封装了一层VM。VM中间层对于客户端API进行了更好的封装，提供了更加稳定的回调、错误管理和性能分析能力。运行框架如图2-2所示。2-2Q+Appstore运行框架Webkit内核的客户端有着非常好的Web标准支持，基于此构建的Appstore可以最小化的考虑兼容性问题，提高了开发效率，降低成本。并且可以使用的CSS3效果代替降低网络传输数据量以及美工人员的开Q+应用商店前端主要负责Q+平台应用的展示，和管理。当然也包括运营策略中的应用推荐，社交网络关系链中的信息、应用。应用商店的前端总体结构如图2-3所示。Q+Q+Appstore（面向用户（面向用户（自动化运营 封2-3Q+Appstore前端总体结构我的应用和消息中心这是与用户密切相关的。在我的应用模块，用户可以对自己的应用进行管理，建立桌面快捷方式。消息中心包含着好友的动态信息，信息，以及系统的推送消息。以我的应用为例，它的工作流程如图2-4所示。根据用户的不同请求，将定位到不同的页面。应用数据的获取不一样，展示的结果也不一样，可以按照使用时间，应用所属分类排序。好友在用模块展示好友应用的使用情况。在我的应用页面，用户可以对我的应用进行管理，删除或者发送桌面快捷方式。精选、榜和活动基于用户使用量和分类产生榜，是用户获取优质应用的不错。精选页则对一段时间内的热门应用或者适用于会员的应用进行推荐。活动是由公司或第组织的应用活动，具有较强的时效性。游戏、、音乐等类目应用商店对所有的应用进行了分类，进行了统一展示，其中的应用有着自己的介绍，用户评分，类别，用户依此可以快速的找到自己所需要的应用。数字和提醒能让用户很快注意到自己可能感的信息，具有很强的用户引导性。热门推荐和会员推荐能让用户更方便的发现适合自己的应用，与好友在用不同的是，这两种推荐更加普遍使用。自动化运营模块需要对其进行提供有效的支持适合产品人员进行配置，数据有效性检验的规则可以多样化的配置。始始用束2-4我的应用模块工作流程性能优化是应用商店前台开发过程中非常重要的一部分。良好的性能决定流畅的用户体验。当前状况下，部分用户受限于系统配置和网络条件并未获得良好的体验。即使在正常情况下，如果能对性能进行提高，减少对系统配置的依赖，降低网络数据传输量，降低服务器端的处理压力，都是非常有意义的工作。通过对需求进行分析，应用商店的前端框架功能模块如图2-5所示。为了满足用户功能需求、运营需求和性能优化需求，前端框架分为基础功能模块和组件模块。其中基础功能模块包括功能类库模块和工具包模块，为用于功能的开发提供底层操作API的支持；组件模块包括自动化运营模块、测速上报模块和数据上报模块，为运营需求提供功能实现，以及性能优化需的数据支撑。应用商店的前端框架通过这些功能模块的划分，满足不同的需求，为系统的开发、扩展、运营和优化打下坚实的基础。用户功能用户功能需运营性能组件数据上报模测速上报模自动化运营工具包模功能类库模2-5应用商店前端框架功能模块图在功能需求之外，应用商店还有一些非功能要求应用商店在实际运行过程中，提供正常功能的同时需要具备较优的性能。主要体现端内存占用、页面帧率、网络数据处理和时间消耗等几个方面。应用商店前端在运行过程中内存占用在10M以内，以较低的内存占用率保证运行流畅；页面渲染帧率在出现动画之类的高级效果时能够有30帧之上，获取较好的页面效果；网络数据通信的时间消耗时间控制在1S以内（一般运行环境下的单条CGI，功能模块加载时间在3S以内。使用者因此可以获得比较好的用户体目熟悉应用商店的运行框架，充分利用客户端提供的特性进行系统功能的开发和优化，提供优秀的应用管理平台和开放平台应用。深入AppstoreWeb端的底层框架，完善补充功能，对部分代码进行重构，使其具有更广泛的应用场景。根据需求完成功能模块的开发，满足不同用户个性化数据展示的需求，同时系统提供自动化运营策略的支持。应用商店前端的性能优化，减少对网络状况的依赖，提高用户的使用体验。在用户网络状况差的情况下依然能正常使用，在用户网络状况一般的情况下获得比较好的体验。系统重点在Web前端的开发和优化，前端的MVCJS模块化十分的重要，要求对底层框架有较深的理解和研究。其中MVC可以借鉴一些优秀的MVC框架，目的是做到模型、视图和控制的分开。使得系统的开发流畅，维护效率高。通过使用命名空间，以模块化和包的概念管理各个功能组件，合理的组织不对全局对象造成影响[36,37]。系统开发过程中涉及到的数据处理使用有效的数据处理策略，分层次的处理，即最大化用户体验和数据使用率。数据的合理使用要结合具体的需求，网络通信传输的数据需要合理的压缩和缓存，包括程序中使用到的计算数据，例如网络通信请求结果等。在自动化运营的需求中，需要结合产品需求的特点，支持自定义的配置方案，实现规则多样化。并且市场的不同的所产生的影响也要考虑入内，消除差异化，做到统一处理。性能的优化需要对系统有比较深入的理解。优化从基本的Web优化开始到结合客户端特性，充分使用HTML5标准中的新特性。为了更深入的理解优化的原理指定方案，对于浏览器的工作也要进行一定的研究。系统功能模块开发需要经过测试，预发布之后在正式环境中进行运行。要求产品、开发、测试和运维人员的共同协作。数据收集和分析需要上报到服务器端，通过服务器端的数据统计，我们可以获得想要的时间运行数据之后进行针对性的优化。研究工作的几个阶段都需要组织技术人员对所进行的优化进行评审和评测，前者确保优化操作不会对现有系统的运行造成很大的影响，后者是对优化操作是否有效的评判。在需求开发过程中，重构和优化主要这样几个方面的问题(1)应用商店的开发，部分模块之间的依赖程度较高，需要对其进行修改。(2)优化方案有部分涉及到对现有代码的重构和逻辑的修改，同时优化需要经过市场运行的检验。如何最小化修改对现有系统的影响是设计实施优化方案时一个重要的参考点；(3)性能数据的统计，包括加载时间，CPU占用率，GPU使用情况，WEB资源使用率。目前性能评估的主要的来源在于加载时间，由数据统计上报负责。在之后的工作中，我们需要更加精细和多样化的数据。数据的统计和分析是优化的基础。应用商店内部的统计各项性能数据，加载时间和资源使用率可以助数据统计模块和抓包工具（或者浏览器工具）实现，我们要做的是更加细致化的采样时间段。CPU和GPU等系统性能数据的获取需要做的研究以及客户端必要的支持。根据不同的优化策略可以得到不同的优化方案，需要有个优先级的排序。以产品需求，服务器端压力为基础择合适的方式进行处理部分优化涉及到新的HTML5标准在这方面可以做的探索实践，在实际优化的过程中，必须施以足量的测试，才能加以应用。现有的一些技术方案对解决一些技术问题存在弊端，Ajax跨域是其中一项。跨域问题的主要产生场景是由于很多大型Web站点，采用动静分离的资源部署方式，往往前端HTML页面和需要交互的Web接入端动态资源使用不同的，便于运营。通过Iframe的方式需要对Iframe的创建付出较大的代价，而且如果很多那么需要的文件就，对性能影响较大。JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。XHR2.0的CORS方案，是HTML5标准提供的新的跨域解决方法，由客户端和服务器端共同协作完成。XHR2.0CORS方跨域资源共享(Cross-OriginResourceSharingCORSHTML5中新的数据请求方式。使用时仍然基于XMLHttpRequestJSONP，这种方案更优。CORS在高级浏览器上支持性良旧的浏览器如IE6，IE7等则不支持。另外，这种方案需要服务器端的支持。浏览器器在进行跨域请求时，会检测服务器响应头部的Access-Control-Allow-Origin字段，如果当前字段在允许范围内，那么就可以进行Ajax请求。CORS有以下特点：数据移植性JSONP在应用中使用已经非常广泛，但是我们还是因为旧有JSONP方式的关系，需要把用以触发JSONP调用的_callback()外套剔除，剩下的纯JSON结构，可以更灵活的用在场景，不局限于浏览器JS引擎。数据可控性XHR一直都可以在请求的时候定制化很多个性的HTTPrequest头信息，不需要增加自己希望的额外信息到querystring。例如：现有的静态资源服务器端按需合并，因为没有使用XHR（目前是JSONP，只能把希望在Web服务器上按需合并的文件的文件列表在URLquerystring上用某种我们自创的协议列出来，看上去比较迷惑。XHR2.0标准，给到数据控制行为可以在数据发起前，加载中、加载后进行多种时间点的判断，甚至可以给到用户准确的加载时间，更好的控制和数据状态帮助我们更精确的实现系统柔性可用。甚至可以控制数据是否需要中断请求，以及告诉后端什么时候发200304响应。多样化的数据提交方式XHR是未来的一个趋势，可以统一web业务上所有的请求方式，使web业务对网络的方案一致化，POST有专门的对象统一处理，文件和二进制流也可以直接发送。HTML5HTML5提供了细致的性能能力，从本地缓存，到DNS解释时间；从TCP连接建立花费，到浏览器首页渲染的时间[38,39]。都可以非常精准地提供业务的方式。其中顶级空间下的Performance对象，为我们提供了一个页面从请求发起到建立连接、相应内容接收完毕、渲染完成等等各个阶段时间点获取的统一接口。我们可以根据时间戳来计算各个阶段的消耗时间，提供的接口详细信息如图2-6所示。各个阶段分别表示文档卸载、重定向、应用缓存处理、DNS查询、链接建立、文档请求、响应、文档处理和处理结束。其中，各个节点对应着浏览器处理文档的时间点。例如LookupStart返回用户对当前文档所属域进行DNS查询开始的时间，LookupEnd返回用户对结束对当前文档所属域进行DNS查询的时间。2-6Performance中的时间统计信息同时，未来的时间点也将会更高精度毫秒的时间戳。目前，这一系列的数据已经在公司很多业务都开始进量，给运营同学提供有意义的数值参考，更加及时，精准得发现我们的业务在不同地区，不同运营商中的业务数据。JSCSSCSS3为页面元素提供了更加丰富的表现形式，不仅包括元素的阴影，圆角，背景，Transform变化，也提供了强大的动态效果。Webkit页面渲染过程[40]如图2-7所示。在Webkit内核的浏览器中，一个HTML页面会被解析成一棵DOM树(DOMTree)以及渲染节点树（RenderTree），同时GPU是在另外一个线程上处理的，负责节点的页面渲染工作，这也就和以前的浏览器渲染单线程带来了一个非常好的优化。CSS3的动画会将元素节点的属性变化计算交给GPU完成，减少JS对CPU的占用。浏览器的渲染频率是一个稳定的值（60fps，因此使用CSS3动画可以获得更加平滑的效果。GPU处理渲染和合成，其实会让web页面渲染得到更加合理的分配，GPU在处理动画及上有非常强的优势，同时也可以减少以往在CPU中处理整个页面带来的内存消耗问题。当然，我们并不能把渲染都交给GPU，GPU虽然在图像和动画处理上有先天的优势，但也有很多不足，比如文字处理和合成、页面树的合成，CPU还是会比GPU更加擅长。WebkitGPU加速层在这些方面会提供较好的效果：Canvas2D或者3D，布局合成（LayoutCompositing），CSS3线性过渡动画（transitions），CSS32D或3D形变，WebGL和。应用程序中可以通过Performance和ISD来获取时间性能的数据，CPU的效率我们可以通过客户端JS模拟和Chrome提供的工具两种方式完成。在客户端JS中，浏览器没有提供获取CPU的接口，但是我们有办法模拟出CPU的曲线。通过浏览器的setTimeout和setInterval两个函数，可以来做延迟处理，但由于浏览器的引擎单线程性，这两个接口都是一个非常不稳定的存在。如果在浏览器CPU资源消耗过高，并且JSAPI处理时间过长，前端的定时器都是无法准确在我们期望的时间点上进行执行的，很多时候都是会延迟，而这个延迟可以被我们利用做成一个差值比例。通过这个比例，我们可以绘制出和当前CPU比较吻合的曲线。另外Chrome提供的开发者工具中包括Timeline一项，可以用来记录一个页面时间段内的处理，绘制帧率，内存占用等数据。主线程

2-7Webkit页面渲染过本章首先介绍了应用商店运行框架和总体的需求，并且对关键技术进行了探讨研究，为系统框架的设计开发以及性能优化提供了基础。3本章介绍应用商店前端框架设计。首先对工作进行了层级划分，然后介绍前端框架设计的详细内容，包括整体框架，JSAPI框架，数据处理策略，自动化运营等。Q+Q应用商店的工作内容有四个大的层级，包括基础功能类库，系统组件，应用级组件和面向用户的应用商店子功能。工作一览如图3-1所示：动荐动荐3-1Appstore的工作层次图基础功能类库基础功能类库包括功能类库和工具包，提供了JS开发所需要的接口和方法。命名空间和面向对象的模式是大型Web应用的基础。另外有DOM元素的操作，的与分发。这里的不局限于页面中DOM元素的操作响应，可以在自定义的对象上触发和，使用观察者模式进行组件内的消息通信。HTTP交互提供基本的Ajax操作，封装了从创建，发送，到接收返回消息的一系列函数。底层的兼容性操作对使用者透明。对于的操作提供简便的方法，同时封装HTML5中LocalStorage的操作方法。系统组件作为Appstore运行的基石，系统组件封装了在不同的功能模块中都会用的一些公用功能，有客户端API组件，UI组件和应用展示组件。这些组件基于基础功能类库和VM提供的API。客户端API组件提供与客户端通信，调用客户端组件的通用方法。是对vm的操作进一步封装简化，可以使应用程序最大化使用本地程序的功能，方便的与客户端进行交互。UI组件主要有Hint提示，Tips弹窗，Confirm确认框和数据展示分页。应用展示组件提供对一个应用进行展示，打开等一系列操作的接口。系统组件的实现封装了结构，样式以及响应操作。应用程序可以方便的调用这些组件，并且保证了在各个模块中的一致性。应用级组件应用级组件负责应用商店的业务功能，着手于运营管理和运营数据统计。主要有自动化运营、测速上报和数据上报。其中自动化运营可以划分为小红点数字提醒、新管理、热门推荐和会员应用推荐等。它们负责数据的获取，界面信息展示，本地更新以及对用户操作的响应。测速上报表示页面在不同时间点处理时间的统计上报，主要由ISD模块负责，同Performance统计数据提供了更精细的时间统计、系统资源消耗数据。数据上报的通Web端数据上报和客户端数据上报两种，前者具有灵活方便可性强的优点，后者的效率更高。数据上报负责业务数据的统计，根据功能划分，分别在大T，，SMART等数据管理系统中。应用商店子功能应用商店的子功能有我的应用，精选页，榜，视频，活动等模块，是应用商店直接与用户交互的地方。Q+AppstoreWeb端属于典型的富客户端程序。服务器端主要负责数据的处理和CGI，展现及功能逻辑由前台JS来控制。Web端的代码量会比较大，模块较多，所以需要进行良好的框架设计。Q+AppstoreWeb端的主体框架如图3-2所示。Web端运行所依赖的底层库主要由JX框架提供，JX是模块化的非侵入式Web前端框架，特别适合构建和组织大规模、工业级的WebApp，具有良好的浏览器兼容性。提供了命名空间，模块化，DOM操作，系统封装，UI特效，Ajax请求，设计模式等强大的功能。3-2Q+Appstore前端主体框架JX这个基础框架之上提供更加适合于Q+AppstoreWeb端运行的JSAPI封装，包括错误处理，常用工具，及不同模块的通用操作。应用到JS框架及功能封装为整个系统运行提供了完善的操作API支持。AppstoreWeb端展现的包括基本页面和功能模块页面。其中基本页面设计使用静态页面，页面中的数据处理主要由服务器端完成。包括基本数据、版本信息、热点数据获取，之后进行解析通过模版生成html页面，返回给客户端的请求。功能模块页面通过iframe进行嵌入，每个模块的处理从CGI或者数据文件获取数据，注入到HTML模版中，主要的模块有我的应用，精选页，影视中心，搜索页等。通过模块的JS回调处理，对基本页面和模块进行状态同步操作。这样的渐进式的处理有助于提高用户体验。JS框架设支撑前台运行的JS框架API需要提供完善的功主要包括Web基本功能、基本组件、业务功能和系统功能等几个部分，提供的API如图3-3所示。安 管3-3Q+AppstoreJSWeb基本功能Web基本功能提供了一个基本的JS开发库所具有的功能。命名空间和面向对象的模式是大型Web应用的基础。另外有DOM元素的操作，的与分发。这里的不局限于页面中DOM元素的操作响应，可以在自定义的对象上触发和，使用观察者模式进行组件内的消息通信。HTTP交互提供基本的Ajax操作，封装了从创建，发送，到接收返回消息的一系列函数。底层的兼容性操作对使用者透明。对于的操作提供简便的方法，同时封装HTML5中LocalStorage的读写方法。基本组件在不同的功能模块中都会有一些公用的界面组件，这些组件由底层的API提供，主要有Hint提示，Tips弹窗，Confirm确认框和数据展示分页。组件的实现封装了结构，样式以及响应操作。应用程序可以方便的调用这些组件，并且保证了在各个模块中的一致性。业务功能业务功能主要有自动化运营和性能两个部分。其中自动化运营可以划分为小红点数字提醒、新管理和热门推荐及会员应用三类。它们负责数据的获取，界面信息展示，本地更新以及对用户操作的响应。性能有时间数据的统计上报，由ISD模块负责。Performance性能监控由更精细的时间统计、系统资源消耗组成。系统功能系统功能部分与业务需求特点密切相关。搜索，提供用户搜索建议和基本的搜索接口。高级HTTP操作是对web功能的一种提升。由于业务涉及到的数据可能分布在多个下，Ajax请求跨域是一个严重的问题。所以提供了通过文件进行Ajax请求数据的方法，对于部分的CGI使用JSONP的方式解决跨域问题。url操作多为参数的获取和编，提供API接口进行参数获并且根据需求特点进行编（VM相适应。在操作的基础上，提供对uin的方法，uin通过可以获取用户qq号信息，在当前域的中。客户端交互是对vm的操作进一步封装简化，提供了对应用程序的查询方法，查询应用信息，是否安装等。可以通过API打开、卸载指定的应用，或者发送操作的快捷方式到桌面。通过这部分的API，可以使应用程序最大化使用本地程序的功能，方便的与客户端进行交互。Appstore是一个基于客户Web应用，同时涉及到较多的数据交互处理，考虑到网络通信代价的昂贵，采用以下的数据处理策略。数据处理主要包括3个层次，分别是静态页面生成、CGI个性化数据拉取以及页面的动态数据：服务器端的处理拉取基本数据，服务器端的数据请求和处理比环境差异较大的客户端要稳定，并且速度较快，最终与客户端的交互只是较少的数据通信，这也是这种方式主要的优点。通过基本页面模版的编译生成静态页面。减少了eb端的数据请求消耗和页面渲染时间。这样页面优先展示给用户，提供了渐进式的渲染体验。在数据策略处理的第二步，由客户端发起的CGI的数据进行过滤，分析，然后应用到模版中，最后展示给用户。请求的数据根据功能特性部分可以进行缓存，内存和本地都是可选的方案，数据请求之前优先检验缓存中的数据是否可用。不同的功能模块负责着不同的数据请求处理，这种解决方案也保证了在一些模块数据失效时不影响其他功能模块的工作。动态数据的设计也是为了提高系统的性能，思想就是按需加载。在页面初始加载中，只请求渲染处理适量的用户数据。这样不仅降低数据传输量，页面渲染效率也会提高。针对于大部分的用户的使用习惯，动态数据策略中比较常用的是数据缓存和分屏策略。数据缓存主要以本地缓存和离线为主，同时对数据进行复用，减少数据请求次数和页面DOM渲染量，问题是每次数据请求量会略大。分屏策略是指只加载满足当前视口的的数据，当数据不满足时候渲染需求的时候，再去请求数据。动态数据策略有很多种不同的方法，各有优点，AppstoreWeb端会对它们进行综合使用，最大化页面性能和用户体在运营业务需求中，产品人员需要页面的部分内容可配置化，或者由用户活动数据推动，包括页面的Bannr区、数字提醒和应用推荐等等。部分应用场景需要对用户的使用行为进行记录，由于服务器端的运行压力等原因，并未提供操作，需要客户端使用本地策略。为了提供对自动化运营功能的支持，Appstoreeb端需要提供一套完善的自动化运营方案。方案的基本框架如图2-7所示。自动化运营方案的在于对Appstore数据的处理。数据主要来源于产品人员在管理的配置，以及用户的活动数据。Web端通过CGI请求或者JS数据文件获取信息。经过筛选和解析的步骤，数据转变成模块可用的有效自动化运营中需要对用户部分的操作数据进行，临时由内存Cache提供，长时间的由HTML5中的LocalStorage本地支持。通过记录的时间戳来校验数据是否过期。自动化运营的功能模块，在JSAPI封装层完善的支持，通过模块化，可以在各个子模块中方便的使用。模块工作时，从服务器端获取的数据和本地记录的运行数据共同作用影响页面渲染，提供正确的运营效果。这样通过管理配置的数据可以快速的反应到Appstore的Web端中。

3-4Q+Appstore自动化运营方案本章主要介绍前台框架的设计，基于开发的角度考虑了底层的API类库，应用程序工作流程，以及数据的处理。同时，为了产品的运营，设计了自动化运营部分进行管理。4本章将介绍前端框架和性能优化的实现。前端框架包括静态页面编译处理、基础框架、系统组件和应用级组件等，优化包括数据分析、技术研究和优化方案的提出。数据处理策略的第一步是对静态页面进行编译，输出页面的主要静态内容。这部分内容的有效时间较长，可以利用服务器端的计算能力以及稳定的网络环境为前端快速生成静态初始页面。生成的页面可以通过CDN部署，客户端的请求不需要经过服务器的逻辑处理，CDN网络与客户端的通信更加快速。每次编译生成的页面文件会通过更改时间戳的方式更新对其它资源文件如JS文件，CSS文件的，这保证了客户端请求的内容都是发布的。静态页面编译示意图如图4-1所示。4-1静态页面编译示意图编译机先从代码SVN服务器上获取的代码，然后从管理数据源拉取数据，然后进行静态页面的编译。编译结果页面最终会被发布到CDN的各个节点上，这样页面就能充分的利用CDN的优势了。静态页面编译处理如图4-2所示。构建构建构构建结4-2静态页面编译处理流程图新首页拉取时开数据解析服务器端进行静态页面编译的是PHP，首先获取应用商店主数据源JS文新首页拉取时开数据解析更新首页拉取的时间戳，处理首页的静态页面模板，填充系统的版本号。根据获取到的数据依次构建banner区你banner区，热门，精品，上线的主列表区在自动化运营中要使用到的数据过静态s文件得到的，静态编译处理的这一步将会生成hot_newJS文件。在生成今日活动内容之后，将会对内容进行压缩，去除空白和注释，输出最终的页面。功能类库的结构Web端运行所依赖的底层库主要由JX类库提供，JX是模块化的非侵入式Web前端开发类库，特别适合构建和组织大规模、工业级的WebApp，具有良好的浏览器兼容性。提供了命名空间，模块化，DOM操作，系统封装，UI特效，Ajax请求，设计模式等强大的功能。在JX这个基础类库之上提供更加适合于Q+AppstoreWeb端运行的JSAPI封装，主要设计为错误处理，常用工具，及不同模块的通用操作。应用到的JS框架及功能封装为整个系统运行提供了完善的操作API支持。 4-3功能文件结构图Jx中的不同模块由单独的JS文件负责，我们引入了Jx中的基本功能，涵盖命名空间，JS操作扩展，DOM选择，JSON处理，HTTPAJAX请求等。Combine.bat批处理文件将这些单独的文件合并成一个文件JX.js，发布时在服务器端执行压缩处理。结合JX提供的功能，使用Tools和Common封装Appstore中常用的操作函数和数据操作。工具包的实现Tools工具包是功能类库中工具类集合，涵盖了功能繁杂的JS操作接口通信方法，它的类图如图4-4所示。其中SearchClass，Isd，MyAppTips，ImgTransport将在系统组件和应用级组件中做介绍。这里主要描述其它的工具类：(2)CONST：应用商店中常量定义集合，CGI_URL代表appstore的cgi请求根路径，用于CGI的拼接操作。CGI__URL，使用页面进行通信时页面的路径；Util：提供对URL中的Hashsearch字段的操作；AppHash：app应用的id对应分类名称，其中一级分类写在list.html页面上，包括数据上报。字段appTypeMap包含了数据库中所有分类的对应关系，扩展parent表明分类的从属关系，当父类id是-1是表示该类目是顶级分类appypeOld2New是应用信息改变之后做的适配。剩余字段ADD，HAD，UPDATE，ADING，UPDATING指应用的安装状态；T：封装了一些简单实用的函数。getUin可以从 中获取用户的UIN信息，从而可以获取用户的账号信息。get 和set 提供了对的的赋值操作，以键值对的方式。loadScript动态的加载一个文件并执行，使用时可以传入自定义的回调函数在文件加载完成时执行。StringCut是字符串的切割函数，将一个字符串限制在指定长度内，超过用“…”代替，为了防止字符转义带来的问题，所有的字符串会先进行一次反转义，将常见的转义字符如„&‟，„<‟，„>‟等恢复成原意。getQuery用于获取url中的rqust参数，由于url中存在pushparam这样的经过特殊编码操作的客户端跳转参数，所以需要使用VM提供的策略，对pushparam的info字段进行转义。getDateFromStamp方法提供从时间戳获取时间的方法，结果为拼接而成的字符串，拼接字符是„-‟。T中提供的另外一些重要方法是关于Ajax操作。在Appstore的部署方案中，页面、 和数据之间的通信经常需要跨域。所以使用服务器端部署页面执行通信请求解决跨域问题的方法，也就是Send提供的功能。Ajax函数在JX的ajax通信的基础之上增加了缓存的处理，如果一个通信结果需要缓存时设置相关的参数即可，这样可以最大程度的减少网络通信信息。4-4工具包类图Appstore.Tools：命名空间Appstore下的Tools类提供了一些与业务有关联的操作接口。重写了浏览器的onerror函数，当捕获到错误时，执行数据上报。Log是appstore开发调试时的日志记录接口，用于页面信息的打印。getCdnNum根据appid获取对应的cdnhost。getJsCdn获取JS的CDN路径。getAppUrl获取应用的路径。GetAppImg获取应用的Logo。getAppThumb获取应用的缩略图。GetAvatar获取用户的个人头像，getGradeView获取评分显示视图。系统组件是Appstore的基本功能模块的封装，包括UI组件，客户端封装组件和应用展示组件。UI组件UI组件提供了常用的界面交互元素，有搜索框，Tips弹窗，Confirm框和分页组件等。保证统一的风格样式和便捷的使用方法。组件的类图如图4-5所示。Pagination分页组件。应用商店中的很多功能类目都会涉及到应用的展示，数目过多时，需要进行分页。分页组件提供了对分页操作的封装，包括界面的交互元素，前一页，后一页，前N页，后N页，指定页的跳转，使用时需要提供自定义的回调函数callback处理指定页码的跳转；Tip操作结果提示框。用户进行一些操作之后，系统需要给出反馈信息，在一定时间之后。Tips封装了这样的功能，在使用时需要传入要显示的信息和信息的类型（警告或者非警告，默认为非警告）不同的类型对应着不同的样式，Tips屏幕居中显示，默认显示时长1s；MyAppTips我的应用新手引导提示。用户在第一次使用应用商店时，会有浮层显示新手引导信息，由若干引导图和引导文字组成，提供下一步和关闭的方法。用户查看过新手引导信息与否通过本地oSorge记录，对于已经查看过的用户将不再显示。Confirm用户确认框。用户执行的一些操作需要进行用户的确认，例如删除我的应用里的应用。使用时，需要传入确认框的标题和信息内容。确认框居中显示，背景有浮层。它的关闭按钮，确认按钮和取消按钮响应用户点击，默认关闭确认框，调用时可以自定义处理函数，在不同的应用场景下做合适的处理。 搜索框。提供了应用商店中统一的搜索，提供 默认显示信息，处理，搜索智能提示，以及搜索跳转处理4-5UI组件类图Appstore负责唤起搜索框进行初始化，设定页面交互元素，填充默认的搜索。绑定搜索框获得焦点，失去焦点，按键输入，鼠标点击等处理。当用户输入搜索时，将调用searchHint函数处理按键。首先对按键进行解析，如果是上下位移键，那么选定当前的提示填充到输入框中，否则构建新的请求向SOSO请求智能提示列表，新的请求500ms等待发送时间，这段时间如果更新搜索关键字则可以取消这次请求，通过这样的方式减少不必要的通信。请求成功的回调函数onSuccess执行时，会调用createHint来创建提示下拉列表。用户确定搜索词执行搜索时，搜索框组件会将搜索关键词进行处理，将搜索参数拼接到制定的URL中，同时请求转发到搜索处理页面。它的工作时序图如图4-6Appstore用::输入搜输入按请求智onSuccess回确定搜索4-6搜索框工作时序图客户端API在Q+Appstore中可以通过vm提供的API来调用客户端的一些接口，但对于一些常用的API调用如对APP的操作使用函数封装下更加方便些。这正是客户端API封装组件提供的功能。Appmanager是对应用操作的集合，通过回调函数响应客户端执行之后的事件。提供的功能有：getAppList：获取应用商店中的应用列表集合，应用信息包括应用的和版本号；(2)installApp：安装一个应用，接收参数option，option中指定应用的ID；(3)runApp：打开一个应用，接收参数option，option中指定应用的ID；(4)uninstallApp：卸载一个应用，接收参数option，option中指定应用的uninstallAppList：批量卸载应用；queryAppList：获取用户已经安装应用的列表；getAppStatus：获取应用的安装状态，返回结果为AppHash.UPDATE，AppHash.HAD，AppHash.ADDING，AppHash.ADD，分别代表需要更新，已经添加，安装中，未添加。updateApp：更新指定的应用；客户端API封装组件的类图如图4-7所示：4-7客户端API封装组件类图System封装系统级的客户端接口调用。提供的功能有： alCenter：打开用户的个人中心；(2)runApp：打开应用；shareApp：应用，可以将应用到，空间或者是 好友addDeskApp：添加应用桌面图标；getVersionQ+的版本号和QQ版本号（如果安装isDeskApp：查询一个应用是否已经发送了桌面快捷方式；setWallpaper：设置一张为桌面壁纸应用级组件负责应用商店的业务功能，着手于运营管理和运营数据统计。已经完成了系统自动化运营，数据上报和测速上报，下面的章节将对功能作详细的介绍。系统自动化运营自动化运营方案的在于对Appstore数据的处理。数据主要来源于产品人员在管理的配置，以及用户的活动数据。Web端通过CGI请求或者JS数据文件获取信息。经过筛选和解析的步骤，数据转变成模块可用的有效数据。自动化运营组件的类图如图4-8所示。图4-8系统自动化运营组件类图自动化运营中需要对用户部分的操作数据进行，临时由内存Cache提供，长时间的由html5标准中的LocalStorage支持。通过记录的时间戳来校验数据是否过期。自动化运营的功能模块，在JSAPI封装层完善的支持，通过模块化，可以在各个子模块中方便的使用。模块工作时，从服务器端获取的数据和本地记录的运行数据共同作用影响页面渲染，提供正确的运营效果。这样通过管理配置的数据可以快速的反应到Appstore的端中。自动化运营中的数字提醒，新，热门推荐分别由类RedCount，NewIconManager和Hot ager负责。RedCount的数据来自服务器端的JS文件，加载成功之后执行请求中的回调函数，本地中记录着之前请求的数据，是否过期通过时间戳来判断。NewIconManager的数据来自JS文件中的CONFIG对象所配置的数据，其中的版本号用来与本地中的数据进行校验。Hot ager通过appstoreRedCount中的请求数据，数据依然通过本地中记录的时间戳判断进行校验。数字提醒又称小红点，当Appstore中的栏目有更新时会通过小红点数字的方式提醒用户。更新内容包括新的应用上架，新的影视类容，产品侧的应用推荐等等，提醒策略能让用户第一时间定位到有更新的内容。小红点数字推荐的时序图如图4-9所示。:::醒数回调数字提醒数据解析qredcount构建数字提醒信更新数字提醒的本4-9数字提醒时序图RedCount的初始化函数由appstore负责调用，在执行初始化时，首先向服务器端的CGI请求数字提醒资源JS文件，请求URL为“ht pt.onSucessURL通过get方式传递的参数callback表示请求数据通过JSONP的方式，返回的数据封装在由callback指定的回调函数中，整体在一个JS脚本文件中。请求成功之后会执行在URL中指定的回调函数onSuccess。RedCount通过函数readFlags本地中的数字提醒记录，本地操作模块将qredcount字段解析为数字提醒数据返回。请求到的数据和本地的记录数据进行时间戳的校验，如果本地记录过期，则说明请求的该项数据是重新配置的，那么构建数字提醒信息，同时更新数字提醒的记录到本地存当Appstore有新的栏目上线或者栏目经历了大的改动升级，那么该栏目将显示新，显示与否主要取决于CONFIG数据的配置。新控制器的工作逻辑为：当用户点击带有„新‟的导航条目时，„新‟ ；本地导航条目的分类ID，时间戳，版本号；每次页面载入时，检查本地，如果版本一致，并且有时间戳则不显示新，否则显示；可以手动配置要显示新的导航项(分类ID映射进入默认项目需要隐藏新，写在对应页面JS中，调用添加记录的方法addRecord(cla 新管理器工作时序图如图4-10所示新的配置数据并不需要额外请求，只要直接 文件中CONFIG对象即可。配置的规则如图4-11要显示新的项目，需要将其类目ID填写在CONFIG的newicons的key字段中，值可以默认为空，若将对应的值设置为true，那么表示该项新在用户点击查看时，但将在每次重新加载时再次显示。Version字段为新标签配置数据的版本号，根据这个版本号验证本地数据是否过期。每次配置新数据时要同步更新配置的版本号。Appstore负责调用NewIconManager的init方法，初始化函数中获取CONFIG对象的配置数据作为服务器端的更新，通过readRecord方法调用本地组件来解析newicon字段，得到本地的配置数据localConfig。配置数据通过版本号校验来判断是否过期，如果本地记录已经过期，那么根据CONFIG重新构建新信息，同时更新本 的 记录数据图4-10新管理器工作时序图4-11新配置数热门时序图如图4-12所示Appstore负责调用Hotager的init方法，它又调用HotNew的init方法。在HotNew的初始化函数中，通过getRedCount函数获取热门推荐的数目，之后根据推荐数目和应用是否为会员应用来为应用构建热门推荐信息。处理之后的应用列表返回给Hot ager，它使用readRecord方法调用本地组件解析hotnew字段，获取本地的热门数据记录。使用时间戳校验判断本地记录是否过期，如果过期，那么在appstore.list构建应用显示列表调用formatOption方法时会为应用构建热门推荐标签信息，返回处理结果给图4-12热门配置数热门推荐应用的计算过程如图4-13所示。HotNew首先获取首页热门应用列表list，用于显示在首页热门