騰訊應(yīng)用商店前端框架設(shè)計(jì)與實(shí)現(xiàn)及性能優(yōu)化

ClassifiedIndex：TP311U.D.C.:621.3DissertationfortheMaster?sDegreeinTHEDESIGNANDIMPLEMENTATIONOFFRONT-ENDFRAMEWORKANDPERFORMANCEOPTIMIZATIONFORQPLUSAPPSTOREOFTENCENT Zhichao EngineerGuoxiangAssociateSupervisor: SeniorEngineerYuqinZhangAcademicDegreeAppliedfor：MasterofEngineering SoftwareEngineering SchoolofDateof June,Degree-Conferring-Institution：HarbinInstituteof隨著開(kāi)放平臺(tái)的興起，基于開(kāi)放平臺(tái)的應(yīng)用越來(lái)越多。Q+應(yīng)用商店正是Q+開(kāi)放平臺(tái)應(yīng)用的載體和，提供了豐富的應(yīng)用管理、推薦和聚合的功能。用戶可以對(duì)自己的應(yīng)用進(jìn)行管理，也可以從諸多分類應(yīng)用中挑選適合自己的應(yīng)用。Q+充分使用了QQ強(qiáng)大的關(guān)系鏈數(shù)據(jù)，好友的動(dòng)態(tài)消息推送和應(yīng)用都具有典型的社交網(wǎng)絡(luò)特征，針對(duì)不同用戶的個(gè)性化推薦也是Q+應(yīng)用商店突出的一點(diǎn)。Q+應(yīng)用商店采用客戶端與eb相結(jié)合的工作模式，充分利用了客戶端和eb各自的優(yōu)勢(shì)，客戶端可以更好的調(diào)用操作系統(tǒng)的接口，而eb則適于快速迭發(fā)和信息展示。兩者相結(jié)合，為應(yīng)用商店和開(kāi)放平臺(tái)的快速發(fā)展提供了有力的支持，而且避免了客戶端升級(jí)不易以及eb與操作系統(tǒng)交互弱的弊端。本文以eb前端應(yīng)用、eb與客戶端通信以及應(yīng)用商店數(shù)據(jù)為研究對(duì)象，研究適合客戶端eb結(jié)合的這一類程序的工作框架。旨在設(shè)計(jì)一套良好的方案，處理數(shù)據(jù)通信、系統(tǒng)框架類庫(kù)封裝以及性能優(yōu)化。一個(gè)系統(tǒng)的框架設(shè)計(jì)決定了其可用性、穩(wěn)定性和可擴(kuò)展性。應(yīng)用商店的前臺(tái)邏輯處理量比較大，對(duì)不同層次的內(nèi)容需要進(jìn)行分別處理。通過(guò)功能模塊劃分、底層API函數(shù)的抽象、以面向?qū)ο蟮乃枷雽?duì)JS語(yǔ)言功能實(shí)現(xiàn)封裝以及模塊化等工作設(shè)計(jì)實(shí)現(xiàn)了一個(gè)良好的前端框架。使用MVC的思想進(jìn)行eb前端開(kāi)發(fā)設(shè)計(jì)，解決富客戶端程序開(kāi)發(fā)中JS代碼組織混亂的問(wèn)題。以ahoo優(yōu)化策略作為eb開(kāi)發(fā)指導(dǎo)，數(shù)據(jù)處理策略作為數(shù)據(jù)處理核心，確保在基礎(chǔ)層次和框架層次上系統(tǒng)有著優(yōu)秀的性能。最后，對(duì)性能數(shù)據(jù)進(jìn)行統(tǒng)計(jì)分析，發(fā)現(xiàn)潛在的問(wèn)題。以HTML5新技術(shù)的研究作為基礎(chǔ)，在系統(tǒng)的實(shí)現(xiàn)和重構(gòu)過(guò)程中大量使用新技術(shù)，進(jìn)行性能優(yōu)化實(shí)踐。應(yīng)用商店的框架設(shè)計(jì)和性能優(yōu)化方案，對(duì)于同類型工作模式的系統(tǒng)有著較強(qiáng)的適用性，為它們的開(kāi)發(fā)、設(shè)計(jì)和優(yōu)化提供了指導(dǎo)方案。：應(yīng)用商店；Web 前端；HTML5；性能優(yōu)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章緒 課題來(lái)源及研究意 與課題相關(guān)的國(guó)內(nèi)外研究綜 開(kāi)放平臺(tái)和應(yīng)用商 Webkit瀏覽器引 Web前端性能優(yōu) 主要工作內(nèi) 第2章應(yīng)用商店需求與關(guān)鍵技術(shù)分 Q+應(yīng)用商店運(yùn)行框 應(yīng)用商店的工作模 運(yùn)行框 需求分 Q+應(yīng)用商店前端總體需 目 關(guān)鍵技術(shù)分 XHR2.0的CORS方 HTML5提供的性能統(tǒng) JS與CSS處理的比 本章小 第3章應(yīng)用商店前端框架設(shè) Q+應(yīng)用商店前端概 應(yīng)用商店前端框架設(shè) JS框架設(shè) 數(shù)據(jù)處理策 自動(dòng)化運(yùn)營(yíng)方案設(shè) 本章小 第4章應(yīng)用商店前端框架和性能優(yōu)化的實(shí) 前端框架的實(shí)

1章緒論本課題來(lái)源于騰訊科技（）的Q+項(xiàng)目，主要研究Q+應(yīng)用商店前端框架以及性能優(yōu)Q+應(yīng)用商店(即Q+Appstore)是Q+平臺(tái)上應(yīng)用的一個(gè)重要，較之Q+桌面提供了更加豐富的應(yīng)用管理、推薦和聚合的功能。用戶可以對(duì)自己已有的應(yīng)用進(jìn)行管理，也可以從諸多分類應(yīng)用中挑選適合自己的應(yīng)用。Q+充分使用了QQ強(qiáng)大的關(guān)系鏈數(shù)據(jù)，好友的動(dòng)態(tài)消息推送和應(yīng)用都具有典型的社交網(wǎng)絡(luò)特征，針對(duì)不同用戶進(jìn)行個(gè)性化應(yīng)用推薦也是Q+應(yīng)用商店突出的一點(diǎn)。Q+開(kāi)放平臺(tái)屬于騰訊三大開(kāi)放平臺(tái)之一，它們分別是社交、和Q+。通過(guò)應(yīng)用接入和QQ互聯(lián)可以使應(yīng)用充分利用QQ以及其它開(kāi)放平臺(tái)的優(yōu)勢(shì)。開(kāi)放平臺(tái)提供應(yīng)用平臺(tái)、推送通知、同一賬號(hào)、多關(guān)系鏈、通信傳輸、狀態(tài)共享和應(yīng)用分析等諸多服務(wù)，推動(dòng)了整個(gè)行業(yè)的更快發(fā)展。蘋果開(kāi)創(chuàng)了應(yīng)用商店模式，進(jìn)行分成，激發(fā)了開(kāi)發(fā)者的積極性，為公司和開(kāi)發(fā)者帶來(lái)了雙贏[1]。應(yīng)用商店的模式值得眾多開(kāi)放平臺(tái)的學(xué)習(xí)，Q+應(yīng)用商店的推出，為國(guó)內(nèi)開(kāi)發(fā)者提供了一個(gè)更為熟悉、廣闊的空間。Q+應(yīng)用商店運(yùn)行在Q+客戶端之上，是基于HTML5開(kāi)發(fā)的Web應(yīng)用，同時(shí)通過(guò)客戶端的擴(kuò)展可以充分的使用客戶端提供的功能。這種客戶端與Web相結(jié)合的工作模式越來(lái)越受歡迎。即能利用客戶端與操作系統(tǒng)交互的能力，又能通過(guò)Web快速的迭發(fā)更新，具有較低的跨平臺(tái)移植難度[2]。本文研究在這種工作模式下前端開(kāi)發(fā)的框架，能夠?yàn)镼+應(yīng)用商店的運(yùn)行提供穩(wěn)定高效的基礎(chǔ)。通過(guò)定制性能優(yōu)化策略，提高用戶的體驗(yàn)。近些年，互聯(lián)網(wǎng)獲得了迅速的發(fā)展。簡(jiǎn)單的導(dǎo)航和搜索功能并不能滿足需求了，現(xiàn)在的互聯(lián)網(wǎng)需要通過(guò)開(kāi)放來(lái)獲得發(fā)展3，開(kāi)放平臺(tái)具有較強(qiáng)的代表性。開(kāi)放平臺(tái)的提供商將自己的計(jì)算能力、通信能力和能力等做成服務(wù)和接口，通過(guò)開(kāi)放平臺(tái)提供給開(kāi)發(fā)者進(jìn)行使用。開(kāi)放平臺(tái)之上運(yùn)行的都是基于這個(gè)平臺(tái)的應(yīng)用，因?yàn)樗鼈兊牡讓踊A(chǔ)一致。這種網(wǎng)絡(luò)服務(wù)模式被稱作開(kāi)放平臺(tái)4。在這種模式下，開(kāi)放平臺(tái)提供者通過(guò)提供服務(wù)和第實(shí)現(xiàn)雙贏，不僅提高了用戶對(duì)平臺(tái)的粘性，而且通過(guò)利益分?jǐn)?，達(dá)使自身和第都獲得了發(fā)展。平臺(tái)的開(kāi)放化能夠匯聚的資源，平臺(tái)企業(yè)在保持自己優(yōu)勢(shì)的同時(shí)也讓這種優(yōu)勢(shì)更加放大。另一方面，開(kāi)放平臺(tái)也提供了全新的 、商業(yè)模式與海量客戶源，為第提供了良好的發(fā)展空間，第開(kāi)發(fā)者可以基于該平臺(tái)創(chuàng)建應(yīng)用，滿足用戶個(gè)性化的需求，用戶、開(kāi)發(fā)者和開(kāi)放平臺(tái)都可以從中獲利[5]。開(kāi)放平臺(tái)具有可靠性和安全性，可以幫開(kāi)發(fā)者節(jié)約成本。應(yīng)用容易部署，并且有著專業(yè)的技術(shù)支持[6,7]。隨著臉譜網(wǎng)推行的開(kāi)放平臺(tái)逐漸盛行，全球各大互聯(lián)網(wǎng)公司陸續(xù)推出自己的開(kāi)放，開(kāi)放平臺(tái)的發(fā)展前景良好。開(kāi)放平臺(tái)有以下兩種[8,9]：應(yīng)用型：開(kāi)放平臺(tái)開(kāi)發(fā)者對(duì)其進(jìn)行功能擴(kuò)展。這種類型的開(kāi)放平臺(tái)基于一種基礎(chǔ)應(yīng)用模式，如臉譜網(wǎng)、谷歌應(yīng)用商店、蘋果應(yīng)用商店等。ChromeWebStore應(yīng)用商店如圖11所示。1-1ChromeChrome應(yīng)用商店為Chrome瀏覽器用戶提供服務(wù)，所有的應(yīng)用均是由開(kāi)發(fā)者創(chuàng)建的Chrome插件應(yīng)用。在應(yīng)用商店中，應(yīng)用如同商品一樣進(jìn)行，因此開(kāi)發(fā)者可以獲取收入。應(yīng)用商店為開(kāi)放平臺(tái)上的應(yīng)用提供了管理，是使用者發(fā)現(xiàn)應(yīng)用的。同時(shí)可以根據(jù)用戶喜好，進(jìn)行個(gè)性化的應(yīng)用推薦[10]。服務(wù)型：這種類型的開(kāi)放平臺(tái)并沒(méi)有基礎(chǔ)應(yīng)用模式，它將自己的計(jì)算能力、通信能力和能力等做成服務(wù)和接口，通過(guò)開(kāi)放平臺(tái)提供給開(kāi)發(fā)者進(jìn)行使用。這樣開(kāi)發(fā)者就可以不用關(guān)注底層實(shí)現(xiàn)，投入的精力在業(yè)務(wù)邏輯上。開(kāi)放平臺(tái)提供的服務(wù)能讓應(yīng)用實(shí)現(xiàn)快速開(kāi)發(fā)和部署[11]。例如谷歌應(yīng)用引擎、亞馬遜簡(jiǎn)單服務(wù)等。開(kāi)放平臺(tái)為互聯(lián)網(wǎng)的發(fā)展提供了強(qiáng)大動(dòng)力，而應(yīng)運(yùn)而生的應(yīng)用商店則為其構(gòu)造了良好的生態(tài)環(huán)境和合理有效的收益鏈。WebkitWebkit是一款開(kāi)源的瀏覽器引，被十分廣泛的使用著。例如Safar、Chrome及 和Android上的瀏覽器，都以Webkit作為。它有著良好的網(wǎng)絡(luò)兼容性、標(biāo)準(zhǔn)符合性、穩(wěn)定性、安全性、便攜性和易用性。Webkit是一個(gè)開(kāi)源項(xiàng)目，它的代碼容易理解和修改。它反映了瀏覽器本質(zhì)的需求，速度、穩(wěn)定性和兼容性[12,13。Webkit瀏覽器引擎包含網(wǎng)頁(yè)和腳本兩個(gè)引擎，分別是WebCore和JavaScriptCore，它們對(duì)應(yīng)著KHTML和KJSKJS[14]。Webkit可以作為Web內(nèi)容的解析引擎，使用標(biāo)準(zhǔn)的技術(shù)處理如HTML、CSS、Javascript和DOM的內(nèi)容。同時(shí)Webkit內(nèi)核可以嵌入到其它應(yīng)用程序中，作為一個(gè)通用的顯示與交互引擎[15,16]。通過(guò)瀏覽器來(lái)完成用戶和應(yīng)用程序之間的交互，可以很大的降低程序的開(kāi)發(fā)和一直難度。現(xiàn)代瀏覽器提供了擴(kuò)展機(jī)制來(lái)加載本地代碼，這種方式為強(qiáng)化瀏覽器的應(yīng)用程序支持提供了方法[17,18]。WebKit的目的是為了符合Web標(biāo)準(zhǔn)，除了提高對(duì)新標(biāo)準(zhǔn)的支持，還確保在引擎中執(zhí)行嚴(yán)格測(cè)試，保證標(biāo)準(zhǔn)符合要求。遇到問(wèn)題之后，掛起及時(shí)處理，使得它的代碼始終保持高度的穩(wěn)定性。WebKit對(duì)HTML5中的新特性進(jìn)行了支持，包括CSS3特性和數(shù)據(jù)通信等。這些特性還沒(méi)有被所有瀏覽器支持，WebKit在性能和標(biāo)準(zhǔn)上的出色表現(xiàn)推動(dòng)了標(biāo)準(zhǔn)和新技術(shù)的快速發(fā)展。采用新標(biāo)準(zhǔn)的系統(tǒng)具有更好的安全性、擴(kuò)展性和易性[19]。WebKit項(xiàng)目旨在解決各種需求，它的良好框架設(shè)計(jì)讓其應(yīng)用廣泛[20]。它的使用場(chǎng)景包括桌面、移動(dòng)、嵌入式和其它各種平臺(tái)，提供了友好的嵌入API。bKt的跨平臺(tái)、高性能和穩(wěn)定成了眾多需要進(jìn)行b解析的程序的首選[21]。HTML5為Web帶來(lái)了飛速的發(fā)展，和以前版本相比，HTML5不僅僅用來(lái)進(jìn)行內(nèi)容展示，它使得Web成為了一個(gè)成平臺(tái)。它為基于Web的音頻、和動(dòng)畫等制定了標(biāo)準(zhǔn)，并且有越來(lái)越多的資源投入到了標(biāo)準(zhǔn)的制定過(guò)程中。HTML5讓W(xué)eb擁有了的可能，開(kāi)發(fā)者可以構(gòu)建豐富的Web應(yīng)用，為用戶提供良好的體驗(yàn)和交互。隨著標(biāo)準(zhǔn)的推行，基于瀏覽器的HTML5技術(shù)能夠真正實(shí)現(xiàn)跨平臺(tái)和跨終端，并且沒(méi)有太多的兼容性問(wèn)題。這樣的發(fā)展前景吸引了眾多IT企業(yè)投入資源到HTML5的發(fā)展普及中，包括標(biāo)準(zhǔn)的制定推行以及HM5生態(tài)系統(tǒng)的發(fā)展[22]HM5中加入了很多新的概念2324，包括HTML中新的和通信技術(shù)等。新的中具有代表性的有 >、<audio>和<canvas>等。通過(guò) >，我們可以引入元素<audio>可以引入音頻文件，不需要額外的插件，就可以在網(wǎng)頁(yè)中多媒體。<canvas>讓W(xué)eb本身?yè)碛辛藞D形繪制能力，不借助Flash，Web開(kāi)發(fā)人員就可以進(jìn)行動(dòng)畫和游戲的開(kāi)發(fā)，程序?qū)⑦\(yùn)行于支持HM5的瀏覽器中[25]。 規(guī)范是一個(gè)技術(shù)草案集，處于不斷的更新中。它涵蓋了很多種瀏覽器技術(shù)，有本地客戶端、轉(zhuǎn)變、、轉(zhuǎn)換和CSS3樣式等[26]。標(biāo)準(zhǔn)中的本地化使WEB更適于支持離線應(yīng)用[27]，同時(shí)提升網(wǎng)絡(luò)覆蓋薄弱區(qū)域的體驗(yàn)，提高了用戶體驗(yàn)、平衡網(wǎng)絡(luò)負(fù)載，促使流量發(fā)生在較好的網(wǎng)絡(luò)環(huán)境中。HTML5不僅豐富了Web頁(yè)面的標(biāo)識(shí)和渲染能力，最重要的是它使客戶端具備了創(chuàng)造能力，并完善了服務(wù)器客戶端交互通信能力，而基于Web的實(shí)時(shí)通信也在標(biāo)準(zhǔn)制定中；同時(shí)HTML5新增的離線應(yīng)用及緩存技術(shù)使Web脫離了在線交互的限制，使其擁有了桌面程序所有的表達(dá)和應(yīng)用能力[28]。Web現(xiàn)在的社會(huì)處于一個(gè)信息化的時(shí)代，人們?cè)絹?lái)越多的通過(guò)網(wǎng)絡(luò)來(lái)獲取信息，信息量不斷的在增長(zhǎng)，網(wǎng)絡(luò)的規(guī)模也越來(lái)越大。新興的社交網(wǎng)絡(luò)如交友、以及移動(dòng)端設(shè)備的普及，網(wǎng)絡(luò)成為了重要的 [29]。但是與網(wǎng)絡(luò)的快速發(fā)展相比，國(guó)內(nèi)的網(wǎng)絡(luò)通信質(zhì)量還遠(yuǎn)遠(yuǎn)跟不上。根據(jù)2011年底的DCCI互聯(lián)網(wǎng)數(shù)據(jù)中心發(fā)布的《中國(guó)寬帶用戶》結(jié)果，中國(guó)互聯(lián)網(wǎng)用戶超過(guò)半數(shù)上網(wǎng)網(wǎng)速達(dá)不到標(biāo)定速度。這使得網(wǎng)絡(luò)上的數(shù)據(jù)通信顯得捉襟見(jiàn)肋，對(duì)于通信數(shù)據(jù)的大小要求很高。與此同時(shí)，eb的用戶量越來(lái)越大，在同等服務(wù)器條件下，用戶的體驗(yàn)和eb的性能優(yōu)化成正比。顯然在國(guó)內(nèi)eb前端優(yōu)化的重視程度不如后臺(tái)優(yōu)化或者客戶端的優(yōu)化，但是我們應(yīng)該要發(fā)現(xiàn)eb前端優(yōu)化能夠給我們帶來(lái)的好處?？梢酝ㄟ^(guò)較少的資源消耗提高的易用性和性能優(yōu)化。降低服務(wù)器和網(wǎng)絡(luò)通信的壓力，因此eb前端的性能優(yōu)化也逐漸成為研究的熱點(diǎn)[30,31,32]。不少公司對(duì)Web前端的優(yōu)化并且貢獻(xiàn)良多，例如和Yahoo兩家互聯(lián)網(wǎng)的巨頭公司。公司開(kāi)發(fā)了一款名為PageSpeed的頁(yè)面性能分析工具，它以時(shí)間消耗作為性能的主要關(guān)注點(diǎn)。一個(gè)頁(yè)面的時(shí)間消耗可以分為多個(gè)階段，包括DNS解析查詢、建立連接、數(shù)據(jù)文件資源傳輸、文件解析、執(zhí)行以及頁(yè)面的渲染[33]。Yahoo公司同樣開(kāi)發(fā)了一款優(yōu)秀的性能分析工具，級(jí)YSlow，以瀏覽器插件的方式運(yùn)行。能夠分析頁(yè)面中各種資源的時(shí)間消耗，包括JS文件、CSS文件和資源文件等[34]。這些資源的消耗占據(jù)著總消耗時(shí)間的80%左右，有著極大的優(yōu)化實(shí)踐意義[35]。Yahoo公司根據(jù)現(xiàn)有的協(xié)議和優(yōu)化實(shí)踐成果提出了一些優(yōu)化建議，是業(yè)界十分認(rèn)可的通用優(yōu)化指導(dǎo)規(guī)則Web前端的優(yōu)化建議可以歸納為3數(shù)據(jù)請(qǐng)求每個(gè)數(shù)據(jù)請(qǐng)求都會(huì)消耗網(wǎng)絡(luò)通信，因此要盡量減少HTTP請(qǐng)求的個(gè)數(shù)。我們可以充分利用文件在瀏覽器端的緩存來(lái)重復(fù)使用資源文件，也可以將多個(gè)小文件合并成一個(gè)文件用來(lái)減少請(qǐng)求。另外，我們要減少不必要的請(qǐng)求，例如頁(yè)面的跳轉(zhuǎn)。數(shù)據(jù)通信通信的數(shù)據(jù)包括瀏覽器發(fā)往服務(wù)器的數(shù)據(jù)以及服務(wù)器的響應(yīng)數(shù)據(jù)發(fā)往服務(wù)器的數(shù)據(jù)都會(huì)攜帶本下的所以要盡量減少數(shù)據(jù)的大小。服務(wù)器的響應(yīng)數(shù)據(jù)如果文件類型允許則使用gzip進(jìn)行壓縮，減少傳輸量。為了更快的網(wǎng)速，可以使用CDN(內(nèi)容分發(fā)網(wǎng)絡(luò))進(jìn)行靜態(tài)文件的傳送。在一些應(yīng)用場(chǎng)景下，可以使用延遲加載的策略將數(shù)據(jù)通信延后，在需要的時(shí)候再進(jìn)行必要的數(shù)據(jù)通信。瀏覽器對(duì)頁(yè)面的處理瀏覽器的處理在很大程度上影響著前端的性能。一方面，為了更好的用戶體驗(yàn)，可以將CSS文件放到頂部，JS文件放到底部這樣頁(yè)面能夠漸進(jìn)式的呈現(xiàn)，不會(huì)因?yàn)镴S的解析執(zhí)行而阻塞頁(yè)面必要的渲染。同時(shí)在減少DOM的（緩存DOM處理結(jié)果、減少iframe的個(gè)數(shù)、不使用CSS表達(dá)式和不適用濾鏡都能大大提高頁(yè)面的渲染效率，提高頁(yè)面的幀率，降低系統(tǒng)資源的消耗。Web前端優(yōu)化的建議和頁(yè)面性能分析工具都能很好的Web前端的性能優(yōu)化工作。本課題研究的主要內(nèi)容是基于Q+平臺(tái)的應(yīng)用商店前端。它是用戶與應(yīng)用商店關(guān)聯(lián)的重要一環(huán)，在開(kāi)發(fā)模塊功能的同時(shí)，從以下幾個(gè)方面對(duì)其進(jìn)行了研究，如圖1-2所示。1-2課題研究?jī)?nèi)容AppstoreWeb端的運(yùn)行環(huán)境應(yīng)用商店前臺(tái)可以被認(rèn)為是依賴于客戶端的WebApplication，如何與客戶端進(jìn)行有效穩(wěn)定的通信，是整個(gè)系統(tǒng)工作的基礎(chǔ)。另外，基于Webkit內(nèi)核的客戶端程序?yàn)槲覀兲峁┝肆己玫腤eb標(biāo)準(zhǔn)支持。在系統(tǒng)的開(kāi)發(fā)中合理的使用HTML5新特性，將會(huì)極大的提高系統(tǒng)性能和展示效果。AppstoreWeb端的整體框架 一個(gè)系統(tǒng)的框架設(shè)計(jì)決定了其可用性、穩(wěn)定性和可擴(kuò)展性。應(yīng)用商店的前臺(tái)邏輯處理量比較大，我們需要對(duì)不同層次的內(nèi)容進(jìn)行處理，功能模塊劃分和底層API函數(shù)的抽象。需要以面向?qū)ο蟮乃枷胫諮S語(yǔ)言功能的實(shí)現(xiàn)封裝，通過(guò)模塊化減少邏輯的依賴耦合。同時(shí)，不同模塊之間的異步通信及狀態(tài)同步也是邏輯處理中較為重要的一環(huán)。AppstoreWeb端的數(shù)據(jù)處理策略應(yīng)用商店前臺(tái)與服務(wù)器端的通信主要以CGI數(shù)據(jù)為主，數(shù)據(jù)文件為輔。如何有效的管理數(shù)據(jù)請(qǐng)求、分析、使用和存儲(chǔ)對(duì)于降低服務(wù)器端壓力，提高系統(tǒng)性能有著重要的意義。功能開(kāi)發(fā)及自動(dòng)化運(yùn)營(yíng)在開(kāi)發(fā)新功能的同時(shí)，嘗試對(duì)已有模塊進(jìn)行優(yōu)化重構(gòu)，而不影響現(xiàn)有系統(tǒng)的運(yùn)行，即漸進(jìn)式的系統(tǒng)性能優(yōu)化。自動(dòng)化運(yùn)營(yíng)策略將頁(yè)面中可配置化內(nèi)容統(tǒng)一管理，方便的添加、刪除和自定義，使用時(shí)間戳和配置規(guī)則作為數(shù)據(jù)檢驗(yàn)的有效。性能優(yōu)化一個(gè)運(yùn)行良好的系統(tǒng)必少不了優(yōu)化，我們主要從Web前端的優(yōu)化入手，提高應(yīng)用商店的性能。Yahoo的優(yōu)化策略可以作為常規(guī)的參考，的是結(jié)合應(yīng)用商店本身的特點(diǎn)進(jìn)行性能優(yōu)化。例如HTML5的新特性本地?cái)?shù)據(jù)存儲(chǔ)、CSS等，以及根據(jù)需求制定的延遲加載策略。本的寫作部分主要分為以下幾個(gè)部分：1章是緒論，介紹了課題的來(lái)源及研究意義，對(duì)于課題相關(guān)的國(guó)內(nèi)外研究進(jìn)行綜述，包括開(kāi)放平臺(tái)、應(yīng)用商店、Webkit引擎、HTML5和Web前端性能優(yōu)化等內(nèi)容。第2章闡述了應(yīng)用商店的運(yùn)行框架，完成對(duì)前端的需求分析。并且給出對(duì)使用的關(guān)鍵技術(shù)的分析，包括通信方案的比較和性能數(shù)據(jù)的統(tǒng)計(jì)，是前端性能優(yōu)化的基礎(chǔ)。3章進(jìn)Web前端框架設(shè)計(jì)，主JS框架設(shè)計(jì)、數(shù)據(jù)處理策略和自動(dòng)化運(yùn)營(yíng)方案設(shè)計(jì)等內(nèi)容。第4章是實(shí)現(xiàn)部分。通過(guò)流程圖、類圖和時(shí)序圖以及文字說(shuō)明的方式，分別闡述了前端框架和性能優(yōu)化的實(shí)現(xiàn)。5章是測(cè)試內(nèi)容。首先是測(cè)試流程和環(huán)境的介紹，然后是系統(tǒng)的功能測(cè)試。通過(guò)性能測(cè)試數(shù)據(jù)的分析對(duì)優(yōu)化方案進(jìn)行檢驗(yàn)。最后給出應(yīng)用商店用戶數(shù)據(jù)的統(tǒng)計(jì)結(jié)果。最后是結(jié)論，對(duì)的研究成果進(jìn)行了總結(jié)。同時(shí)對(duì)應(yīng)用商店前端開(kāi)發(fā)框架和性能優(yōu)化的改進(jìn)點(diǎn)進(jìn)行表述。2本節(jié)將從AppstoreWeb端的總體需求進(jìn)行分析，探討系統(tǒng)所要完成的功能。在客戶端運(yùn)行框架的基礎(chǔ)上，分別就系統(tǒng)框架、數(shù)據(jù)處理策略、自動(dòng)化運(yùn)營(yíng)和系統(tǒng)的性能優(yōu)化等方面進(jìn)行研究，得到總體的設(shè)計(jì)研究方案。Q+Q+Appstore是依托于Q+客戶端運(yùn)行的，它的有Q+桌面，QQ面板應(yīng)用商店，QQ面板選項(xiàng)卡。不同都提供了客戶端API的支持，為了對(duì)Q+AppstoreWeb端總體框架有更好的理解，首先需要清楚Q+Appstore的工作模式。應(yīng)用商店采用客戶端和Web的混合工作模式，由前端負(fù)責(zé)完成主要的邏輯計(jì)算過(guò)程，如圖2-1所示。2-1Q+Appstore工作模式客戶端與操作系統(tǒng)有更強(qiáng)的交互，Web更快開(kāi)發(fā)，適用于信息展示和用戶輕交互的場(chǎng)景，滿足快速迭代和升級(jí)的需求?？蛻舳嘶赪ebkit內(nèi)核進(jìn)行改造優(yōu)化，提供更適宜與Web交互的API。兩者相結(jié)合，即可解決客戶端升級(jí)的問(wèn)題，又可提升Web與操作系統(tǒng)的交互能力。相比純客戶端或者純Web的實(shí)現(xiàn)方式，有了更好的適用場(chǎng)景和跨平臺(tái)能力。前端負(fù)責(zé)完成主要的邏輯計(jì)算，服務(wù)器端提供數(shù)據(jù)，這樣可以大大的降低服務(wù)器端的壓力，充分利用客戶端的計(jì)算能力。并且，這樣服務(wù)器可以專職于基礎(chǔ)數(shù)據(jù)的提供，清晰的區(qū)分CGI服務(wù)器和靜態(tài)文件服務(wù)器，數(shù)據(jù)形式有非常好的通用性，不局限于特定的項(xiàng)目需求。運(yùn)行框客戶端API的支持主要來(lái)源于基于webkit內(nèi)核的客戶端程序。Q+因此具有了優(yōu)秀的Web展現(xiàn)能力，運(yùn)行其中的Appstore屬于Web應(yīng)用，但是它與客戶端的交互很多不是直接進(jìn)行的，在客戶端和Appstore中間封裝了一層VM。VM中間層對(duì)于客戶端API進(jìn)行了更好的封裝，提供了更加穩(wěn)定的回調(diào)、錯(cuò)誤管理和性能分析能力。運(yùn)行框架如圖2-2所示。2-2Q+Appstore運(yùn)行框架Webkit內(nèi)核的客戶端有著非常好的Web標(biāo)準(zhǔn)支持，基于此構(gòu)建的Appstore可以最小化的考慮兼容性問(wèn)題，提高了開(kāi)發(fā)效率，降低成本。并且可以使用的CSS3效果代替降低網(wǎng)絡(luò)傳輸數(shù)據(jù)量以及美工人員的開(kāi)Q+應(yīng)用商店前端主要負(fù)責(zé)Q+平臺(tái)應(yīng)用的展示，和管理。當(dāng)然也包括運(yùn)營(yíng)策略中的應(yīng)用推薦，社交網(wǎng)絡(luò)關(guān)系鏈中的信息、應(yīng)用。應(yīng)用商店的前端總體結(jié)構(gòu)如圖2-3所示。Q+Q+Appstore（面向用戶（面向用戶（自動(dòng)化運(yùn)營(yíng) 封2-3Q+Appstore前端總體結(jié)構(gòu)我的應(yīng)用和消息中心這是與用戶密切相關(guān)的。在我的應(yīng)用模塊，用戶可以對(duì)自己的應(yīng)用進(jìn)行管理，建立桌面快捷方式。消息中心包含著好友的動(dòng)態(tài)信息，信息，以及系統(tǒng)的推送消息。以我的應(yīng)用為例，它的工作流程如圖2-4所示。根據(jù)用戶的不同請(qǐng)求，將定位到不同的頁(yè)面。應(yīng)用數(shù)據(jù)的獲取不一樣，展示的結(jié)果也不一樣，可以按照使用時(shí)間，應(yīng)用所屬分類排序。好友在用模塊展示好友應(yīng)用的使用情況。在我的應(yīng)用頁(yè)面，用戶可以對(duì)我的應(yīng)用進(jìn)行管理，刪除或者發(fā)送桌面快捷方式。精選、榜和活動(dòng)基于用戶使用量和分類產(chǎn)生榜，是用戶獲取優(yōu)質(zhì)應(yīng)用的不錯(cuò)。精選頁(yè)則對(duì)一段時(shí)間內(nèi)的熱門應(yīng)用或者適用于會(huì)員的應(yīng)用進(jìn)行推薦?；顒?dòng)是由公司或第組織的應(yīng)用活動(dòng)，具有較強(qiáng)的時(shí)效性。游戲、、音樂(lè)等類目應(yīng)用商店對(duì)所有的應(yīng)用進(jìn)行了分類，進(jìn)行了統(tǒng)一展示，其中的應(yīng)用有著自己的介紹，用戶評(píng)分，類別，用戶依此可以快速的找到自己所需要的應(yīng)用。數(shù)字和提醒能讓用戶很快注意到自己可能感的信息，具有很強(qiáng)的用戶引導(dǎo)性。熱門推薦和會(huì)員推薦能讓用戶更方便的發(fā)現(xiàn)適合自己的應(yīng)用，與好友在用不同的是，這兩種推薦更加普遍使用。自動(dòng)化運(yùn)營(yíng)模塊需要對(duì)其進(jìn)行提供有效的支持適合產(chǎn)品人員進(jìn)行配置，數(shù)據(jù)有效性檢驗(yàn)的規(guī)則可以多樣化的配置。始始用束2-4我的應(yīng)用模塊工作流程性能優(yōu)化是應(yīng)用商店前臺(tái)開(kāi)發(fā)過(guò)程中非常重要的一部分。良好的性能決定流暢的用戶體驗(yàn)。當(dāng)前狀況下，部分用戶受限于系統(tǒng)配置和網(wǎng)絡(luò)條件并未獲得良好的體驗(yàn)。即使在正常情況下，如果能對(duì)性能進(jìn)行提高，減少對(duì)系統(tǒng)配置的依賴，降低網(wǎng)絡(luò)數(shù)據(jù)傳輸量，降低服務(wù)器端的處理壓力，都是非常有意義的工作。通過(guò)對(duì)需求進(jìn)行分析，應(yīng)用商店的前端框架功能模塊如圖2-5所示。為了滿足用戶功能需求、運(yùn)營(yíng)需求和性能優(yōu)化需求，前端框架分為基礎(chǔ)功能模塊和組件模塊。其中基礎(chǔ)功能模塊包括功能類庫(kù)模塊和工具包模塊，為用于功能的開(kāi)發(fā)提供底層操作API的支持；組件模塊包括自動(dòng)化運(yùn)營(yíng)模塊、測(cè)速上報(bào)模塊和數(shù)據(jù)上報(bào)模塊，為運(yùn)營(yíng)需求提供功能實(shí)現(xiàn)，以及性能優(yōu)化需的數(shù)據(jù)支撐。應(yīng)用商店的前端框架通過(guò)這些功能模塊的劃分，滿足不同的需求，為系統(tǒng)的開(kāi)發(fā)、擴(kuò)展、運(yùn)營(yíng)和優(yōu)化打下堅(jiān)實(shí)的基礎(chǔ)。用戶功能用戶功能需運(yùn)營(yíng)性能組件數(shù)據(jù)上報(bào)模測(cè)速上報(bào)模自動(dòng)化運(yùn)營(yíng)工具包模功能類庫(kù)模2-5應(yīng)用商店前端框架功能模塊圖在功能需求之外，應(yīng)用商店還有一些非功能要求應(yīng)用商店在實(shí)際運(yùn)行過(guò)程中，提供正常功能的同時(shí)需要具備較優(yōu)的性能。主要體現(xiàn)端內(nèi)存占用、頁(yè)面幀率、網(wǎng)絡(luò)數(shù)據(jù)處理和時(shí)間消耗等幾個(gè)方面。應(yīng)用商店前端在運(yùn)行過(guò)程中內(nèi)存占用在10M以內(nèi)，以較低的內(nèi)存占用率保證運(yùn)行流暢；頁(yè)面渲染幀率在出現(xiàn)動(dòng)畫之類的高級(jí)效果時(shí)能夠有30幀之上，獲取較好的頁(yè)面效果；網(wǎng)絡(luò)數(shù)據(jù)通信的時(shí)間消耗時(shí)間控制在1S以內(nèi)（一般運(yùn)行環(huán)境下的單條CGI，功能模塊加載時(shí)間在3S以內(nèi)。使用者因此可以獲得比較好的用戶體目熟悉應(yīng)用商店的運(yùn)行框架，充分利用客戶端提供的特性進(jìn)行系統(tǒng)功能的開(kāi)發(fā)和優(yōu)化，提供優(yōu)秀的應(yīng)用管理平臺(tái)和開(kāi)放平臺(tái)應(yīng)用。深入AppstoreWeb端的底層框架，完善補(bǔ)充功能，對(duì)部分代碼進(jìn)行重構(gòu)，使其具有更廣泛的應(yīng)用場(chǎng)景。根據(jù)需求完成功能模塊的開(kāi)發(fā)，滿足不同用戶個(gè)性化數(shù)據(jù)展示的需求，同時(shí)系統(tǒng)提供自動(dòng)化運(yùn)營(yíng)策略的支持。應(yīng)用商店前端的性能優(yōu)化，減少對(duì)網(wǎng)絡(luò)狀況的依賴，提高用戶的使用體驗(yàn)。在用戶網(wǎng)絡(luò)狀況差的情況下依然能正常使用，在用戶網(wǎng)絡(luò)狀況一般的情況下獲得比較好的體驗(yàn)。系統(tǒng)重點(diǎn)在Web前端的開(kāi)發(fā)和優(yōu)化，前端的MVCJS模塊化十分的重要，要求對(duì)底層框架有較深的理解和研究。其中MVC可以借鑒一些優(yōu)秀的MVC框架，目的是做到模型、視圖和控制的分開(kāi)。使得系統(tǒng)的開(kāi)發(fā)流暢，維護(hù)效率高。通過(guò)使用命名空間，以模塊化和包的概念管理各個(gè)功能組件，合理的組織不對(duì)全局對(duì)象造成影響[36,37]。系統(tǒng)開(kāi)發(fā)過(guò)程中涉及到的數(shù)據(jù)處理使用有效的數(shù)據(jù)處理策略，分層次的處理，即最大化用戶體驗(yàn)和數(shù)據(jù)使用率。數(shù)據(jù)的合理使用要結(jié)合具體的需求，網(wǎng)絡(luò)通信傳輸?shù)臄?shù)據(jù)需要合理的壓縮和緩存，包括程序中使用到的計(jì)算數(shù)據(jù)，例如網(wǎng)絡(luò)通信請(qǐng)求結(jié)果等。在自動(dòng)化運(yùn)營(yíng)的需求中，需要結(jié)合產(chǎn)品需求的特點(diǎn)，支持自定義的配置方案，實(shí)現(xiàn)規(guī)則多樣化。并且市場(chǎng)的不同的所產(chǎn)生的影響也要考慮入內(nèi)，消除差異化，做到統(tǒng)一處理。性能的優(yōu)化需要對(duì)系統(tǒng)有比較深入的理解。優(yōu)化從基本的Web優(yōu)化開(kāi)始到結(jié)合客戶端特性，充分使用HTML5標(biāo)準(zhǔn)中的新特性。為了更深入的理解優(yōu)化的原理指定方案，對(duì)于瀏覽器的工作也要進(jìn)行一定的研究。系統(tǒng)功能模塊開(kāi)發(fā)需要經(jīng)過(guò)測(cè)試，預(yù)發(fā)布之后在正式環(huán)境中進(jìn)行運(yùn)行。要求產(chǎn)品、開(kāi)發(fā)、測(cè)試和運(yùn)維人員的共同協(xié)作。數(shù)據(jù)收集和分析需要上報(bào)到服務(wù)器端，通過(guò)服務(wù)器端的數(shù)據(jù)統(tǒng)計(jì)，我們可以獲得想要的時(shí)間運(yùn)行數(shù)據(jù)之后進(jìn)行針對(duì)性的優(yōu)化。研究工作的幾個(gè)階段都需要組織技術(shù)人員對(duì)所進(jìn)行的優(yōu)化進(jìn)行評(píng)審和評(píng)測(cè)，前者確保優(yōu)化操作不會(huì)對(duì)現(xiàn)有系統(tǒng)的運(yùn)行造成很大的影響，后者是對(duì)優(yōu)化操作是否有效的評(píng)判。在需求開(kāi)發(fā)過(guò)程中，重構(gòu)和優(yōu)化主要這樣幾個(gè)方面的問(wèn)題(1)應(yīng)用商店的開(kāi)發(fā)，部分模塊之間的依賴程度較高，需要對(duì)其進(jìn)行修改。(2)優(yōu)化方案有部分涉及到對(duì)現(xiàn)有代碼的重構(gòu)和邏輯的修改，同時(shí)優(yōu)化需要經(jīng)過(guò)市場(chǎng)運(yùn)行的檢驗(yàn)。如何最小化修改對(duì)現(xiàn)有系統(tǒng)的影響是設(shè)計(jì)實(shí)施優(yōu)化方案時(shí)一個(gè)重要的參考點(diǎn)；(3)性能數(shù)據(jù)的統(tǒng)計(jì)，包括加載時(shí)間，CPU占用率，GPU使用情況，WEB資源使用率。目前性能評(píng)估的主要的來(lái)源在于加載時(shí)間，由數(shù)據(jù)統(tǒng)計(jì)上報(bào)負(fù)責(zé)。在之后的工作中，我們需要更加精細(xì)和多樣化的數(shù)據(jù)。數(shù)據(jù)的統(tǒng)計(jì)和分析是優(yōu)化的基礎(chǔ)。應(yīng)用商店內(nèi)部的統(tǒng)計(jì)各項(xiàng)性能數(shù)據(jù)，加載時(shí)間和資源使用率可以助數(shù)據(jù)統(tǒng)計(jì)模塊和抓包工具（或者瀏覽器工具）實(shí)現(xiàn)，我們要做的是更加細(xì)致化的采樣時(shí)間段。CPU和GPU等系統(tǒng)性能數(shù)據(jù)的獲取需要做的研究以及客戶端必要的支持。根據(jù)不同的優(yōu)化策略可以得到不同的優(yōu)化方案，需要有個(gè)優(yōu)先級(jí)的排序。以產(chǎn)品需求，服務(wù)器端壓力為基礎(chǔ)擇合適的方式進(jìn)行處理部分優(yōu)化涉及到新的HTML5標(biāo)準(zhǔn)在這方面可以做的探索實(shí)踐，在實(shí)際優(yōu)化的過(guò)程中，必須施以足量的測(cè)試，才能加以應(yīng)用?，F(xiàn)有的一些技術(shù)方案對(duì)解決一些技術(shù)問(wèn)題存在弊端，Ajax跨域是其中一項(xiàng)?？缬騿?wèn)題的主要產(chǎn)生場(chǎng)景是由于很多大型Web站點(diǎn)，采用動(dòng)靜分離的資源部署方式，往往前端HTML頁(yè)面和需要交互的Web接入端動(dòng)態(tài)資源使用不同的，便于運(yùn)營(yíng)。通過(guò)Iframe的方式需要對(duì)Iframe的創(chuàng)建付出較大的代價(jià)，而且如果很多那么需要的文件就，對(duì)性能影響較大。JSONP只能實(shí)現(xiàn)GET請(qǐng)求，而CORS支持所有類型的HTTP請(qǐng)求。XHR2.0的CORS方案，是HTML5標(biāo)準(zhǔn)提供的新的跨域解決方法，由客戶端和服務(wù)器端共同協(xié)作完成。XHR2.0CORS方跨域資源共享(Cross-OriginResourceSharingCORSHTML5中新的數(shù)據(jù)請(qǐng)求方式。使用時(shí)仍然基于XMLHttpRequestJSONP，這種方案更優(yōu)。CORS在高級(jí)瀏覽器上支持性良舊的瀏覽器如IE6，IE7等則不支持。另外，這種方案需要服務(wù)器端的支持。瀏覽器器在進(jìn)行跨域請(qǐng)求時(shí)，會(huì)檢測(cè)服務(wù)器響應(yīng)頭部的Access-Control-Allow-Origin字段，如果當(dāng)前字段在允許范圍內(nèi)，那么就可以進(jìn)行Ajax請(qǐng)求。CORS有以下特點(diǎn)：數(shù)據(jù)移植性JSONP在應(yīng)用中使用已經(jīng)非常廣泛，但是我們還是因?yàn)榕f有JSONP方式的關(guān)系，需要把用以觸發(fā)JSONP調(diào)用的_callback()外套剔除，剩下的純JSON結(jié)構(gòu)，可以更靈活的用在場(chǎng)景，不局限于瀏覽器JS引擎。數(shù)據(jù)可控性XHR一直都可以在請(qǐng)求的時(shí)候定制化很多個(gè)性的HTTPrequest頭信息，不需要增加自己希望的額外信息到querystring。例如：現(xiàn)有的靜態(tài)資源服務(wù)器端按需合并，因?yàn)闆](méi)有使用XHR（目前是JSONP，只能把希望在Web服務(wù)器上按需合并的文件的文件列表在URLquerystring上用某種我們自創(chuàng)的協(xié)議列出來(lái)，看上去比較迷惑。XHR2.0標(biāo)準(zhǔn)，給到數(shù)據(jù)控制行為可以在數(shù)據(jù)發(fā)起前，加載中、加載后進(jìn)行多種時(shí)間點(diǎn)的判斷，甚至可以給到用戶準(zhǔn)確的加載時(shí)間，更好的控制和數(shù)據(jù)狀態(tài)幫助我們更精確的實(shí)現(xiàn)系統(tǒng)柔性可用。甚至可以控制數(shù)據(jù)是否需要中斷請(qǐng)求，以及告訴后端什么時(shí)候發(fā)200304響應(yīng)。多樣化的數(shù)據(jù)提交方式XHR是未來(lái)的一個(gè)趨勢(shì)，可以統(tǒng)一web業(yè)務(wù)上所有的請(qǐng)求方式，使web業(yè)務(wù)對(duì)網(wǎng)絡(luò)的方案一致化，POST有專門的對(duì)象統(tǒng)一處理，文件和二進(jìn)制流也可以直接發(fā)送。HTML5HTML5提供了細(xì)致的性能能力，從本地緩存，到DNS解釋時(shí)間；從TCP連接建立花費(fèi)，到瀏覽器首頁(yè)渲染的時(shí)間[38,39]。都可以非常精準(zhǔn)地提供業(yè)務(wù)的方式。其中頂級(jí)空間下的Performance對(duì)象，為我們提供了一個(gè)頁(yè)面從請(qǐng)求發(fā)起到建立連接、相應(yīng)內(nèi)容接收完畢、渲染完成等等各個(gè)階段時(shí)間點(diǎn)獲取的統(tǒng)一接口。我們可以根據(jù)時(shí)間戳來(lái)計(jì)算各個(gè)階段的消耗時(shí)間，提供的接口詳細(xì)信息如圖2-6所示。各個(gè)階段分別表示文檔卸載、重定向、應(yīng)用緩存處理、DNS查詢、鏈接建立、文檔請(qǐng)求、響應(yīng)、文檔處理和處理結(jié)束。其中，各個(gè)節(jié)點(diǎn)對(duì)應(yīng)著瀏覽器處理文檔的時(shí)間點(diǎn)。例如LookupStart返回用戶對(duì)當(dāng)前文檔所屬域進(jìn)行DNS查詢開(kāi)始的時(shí)間，LookupEnd返回用戶對(duì)結(jié)束對(duì)當(dāng)前文檔所屬域進(jìn)行DNS查詢的時(shí)間。2-6Performance中的時(shí)間統(tǒng)計(jì)信息同時(shí)，未來(lái)的時(shí)間點(diǎn)也將會(huì)更高精度毫秒的時(shí)間戳。目前，這一系列的數(shù)據(jù)已經(jīng)在公司很多業(yè)務(wù)都開(kāi)始進(jìn)量，給運(yùn)營(yíng)同學(xué)提供有意義的數(shù)值參考，更加及時(shí)，精準(zhǔn)得發(fā)現(xiàn)我們的業(yè)務(wù)在不同地區(qū)，不同運(yùn)營(yíng)商中的業(yè)務(wù)數(shù)據(jù)。JSCSSCSS3為頁(yè)面元素提供了更加豐富的表現(xiàn)形式，不僅包括元素的陰影，圓角，背景，Transform變化，也提供了強(qiáng)大的動(dòng)態(tài)效果。Webkit頁(yè)面渲染過(guò)程[40]如圖2-7所示。在Webkit內(nèi)核的瀏覽器中，一個(gè)HTML頁(yè)面會(huì)被解析成一棵DOM樹(shù)(DOMTree)以及渲染節(jié)點(diǎn)樹(shù)（RenderTree），同時(shí)GPU是在另外一個(gè)線程上處理的，負(fù)責(zé)節(jié)點(diǎn)的頁(yè)面渲染工作，這也就和以前的瀏覽器渲染單線程帶來(lái)了一個(gè)非常好的優(yōu)化。CSS3的動(dòng)畫會(huì)將元素節(jié)點(diǎn)的屬性變化計(jì)算交給GPU完成，減少JS對(duì)CPU的占用。瀏覽器的渲染頻率是一個(gè)穩(wěn)定的值（60fps，因此使用CSS3動(dòng)畫可以獲得更加平滑的效果。GPU處理渲染和合成，其實(shí)會(huì)讓web頁(yè)面渲染得到更加合理的分配，GPU在處理動(dòng)畫及上有非常強(qiáng)的優(yōu)勢(shì)，同時(shí)也可以減少以往在CPU中處理整個(gè)頁(yè)面帶來(lái)的內(nèi)存消耗問(wèn)題。當(dāng)然，我們并不能把渲染都交給GPU，GPU雖然在圖像和動(dòng)畫處理上有先天的優(yōu)勢(shì)，但也有很多不足，比如文字處理和合成、頁(yè)面樹(shù)的合成，CPU還是會(huì)比GPU更加擅長(zhǎng)。WebkitGPU加速層在這些方面會(huì)提供較好的效果：Canvas2D或者3D，布局合成（LayoutCompositing），CSS3線性過(guò)渡動(dòng)畫（transitions），CSS32D或3D形變，WebGL和。應(yīng)用程序中可以通過(guò)Performance和ISD來(lái)獲取時(shí)間性能的數(shù)據(jù)，CPU的效率我們可以通過(guò)客戶端JS模擬和Chrome提供的工具兩種方式完成。在客戶端JS中，瀏覽器沒(méi)有提供獲取CPU的接口，但是我們有辦法模擬出CPU的曲線。通過(guò)瀏覽器的setTimeout和setInterval兩個(gè)函數(shù)，可以來(lái)做延遲處理，但由于瀏覽器的引擎單線程性，這兩個(gè)接口都是一個(gè)非常不穩(wěn)定的存在。如果在瀏覽器CPU資源消耗過(guò)高，并且JSAPI處理時(shí)間過(guò)長(zhǎng)，前端的定時(shí)器都是無(wú)法準(zhǔn)確在我們期望的時(shí)間點(diǎn)上進(jìn)行執(zhí)行的，很多時(shí)候都是會(huì)延遲，而這個(gè)延遲可以被我們利用做成一個(gè)差值比例。通過(guò)這個(gè)比例，我們可以繪制出和當(dāng)前CPU比較吻合的曲線。另外Chrome提供的開(kāi)發(fā)者工具中包括Timeline一項(xiàng)，可以用來(lái)記錄一個(gè)頁(yè)面時(shí)間段內(nèi)的處理，繪制幀率，內(nèi)存占用等數(shù)據(jù)。主線程

2-7Webkit頁(yè)面渲染過(guò)本章首先介紹了應(yīng)用商店運(yùn)行框架和總體的需求，并且對(duì)關(guān)鍵技術(shù)進(jìn)行了探討研究，為系統(tǒng)框架的設(shè)計(jì)開(kāi)發(fā)以及性能優(yōu)化提供了基礎(chǔ)。3本章介紹應(yīng)用商店前端框架設(shè)計(jì)。首先對(duì)工作進(jìn)行了層級(jí)劃分，然后介紹前端框架設(shè)計(jì)的詳細(xì)內(nèi)容，包括整體框架，JSAPI框架，數(shù)據(jù)處理策略，自動(dòng)化運(yùn)營(yíng)等。Q+Q應(yīng)用商店的工作內(nèi)容有四個(gè)大的層級(jí)，包括基礎(chǔ)功能類庫(kù)，系統(tǒng)組件，應(yīng)用級(jí)組件和面向用戶的應(yīng)用商店子功能。工作一覽如圖3-1所示：動(dòng)薦動(dòng)薦3-1Appstore的工作層次圖基礎(chǔ)功能類庫(kù)基礎(chǔ)功能類庫(kù)包括功能類庫(kù)和工具包，提供了JS開(kāi)發(fā)所需要的接口和方法。命名空間和面向?qū)ο蟮哪Ｊ绞谴笮蚖eb應(yīng)用的基礎(chǔ)。另外有DOM元素的操作，的與分發(fā)。這里的不局限于頁(yè)面中DOM元素的操作響應(yīng)，可以在自定義的對(duì)象上觸發(fā)和，使用觀察者模式進(jìn)行組件內(nèi)的消息通信。HTTP交互提供基本的Ajax操作，封裝了從創(chuàng)建，發(fā)送，到接收返回消息的一系列函數(shù)。底層的兼容性操作對(duì)使用者透明。對(duì)于的操作提供簡(jiǎn)便的方法，同時(shí)封裝HTML5中LocalStorage的操作方法。系統(tǒng)組件作為Appstore運(yùn)行的基石，系統(tǒng)組件封裝了在不同的功能模塊中都會(huì)用的一些公用功能，有客戶端API組件，UI組件和應(yīng)用展示組件。這些組件基于基礎(chǔ)功能類庫(kù)和VM提供的API。客戶端API組件提供與客戶端通信，調(diào)用客戶端組件的通用方法。是對(duì)vm的操作進(jìn)一步封裝簡(jiǎn)化，可以使應(yīng)用程序最大化使用本地程序的功能，方便的與客戶端進(jìn)行交互。UI組件主要有Hint提示，Tips彈窗，Confirm確認(rèn)框和數(shù)據(jù)展示分頁(yè)。應(yīng)用展示組件提供對(duì)一個(gè)應(yīng)用進(jìn)行展示，打開(kāi)等一系列操作的接口。系統(tǒng)組件的實(shí)現(xiàn)封裝了結(jié)構(gòu)，樣式以及響應(yīng)操作。應(yīng)用程序可以方便的調(diào)用這些組件，并且保證了在各個(gè)模塊中的一致性。應(yīng)用級(jí)組件應(yīng)用級(jí)組件負(fù)責(zé)應(yīng)用商店的業(yè)務(wù)功能，著手于運(yùn)營(yíng)管理和運(yùn)營(yíng)數(shù)據(jù)統(tǒng)計(jì)。主要有自動(dòng)化運(yùn)營(yíng)、測(cè)速上報(bào)和數(shù)據(jù)上報(bào)。其中自動(dòng)化運(yùn)營(yíng)可以劃分為小紅點(diǎn)數(shù)字提醒、新管理、熱門推薦和會(huì)員應(yīng)用推薦等。它們負(fù)責(zé)數(shù)據(jù)的獲取，界面信息展示，本地更新以及對(duì)用戶操作的響應(yīng)。測(cè)速上報(bào)表示頁(yè)面在不同時(shí)間點(diǎn)處理時(shí)間的統(tǒng)計(jì)上報(bào)，主要由ISD模塊負(fù)責(zé)，同Performance統(tǒng)計(jì)數(shù)據(jù)提供了更精細(xì)的時(shí)間統(tǒng)計(jì)、系統(tǒng)資源消耗數(shù)據(jù)。數(shù)據(jù)上報(bào)的通Web端數(shù)據(jù)上報(bào)和客戶端數(shù)據(jù)上報(bào)兩種，前者具有靈活方便可性強(qiáng)的優(yōu)點(diǎn)，后者的效率更高。數(shù)據(jù)上報(bào)負(fù)責(zé)業(yè)務(wù)數(shù)據(jù)的統(tǒng)計(jì)，根據(jù)功能劃分，分別在大T，，SMART等數(shù)據(jù)管理系統(tǒng)中。應(yīng)用商店子功能應(yīng)用商店的子功能有我的應(yīng)用，精選頁(yè)，榜，視頻，活動(dòng)等模塊，是應(yīng)用商店直接與用戶交互的地方。Q+AppstoreWeb端屬于典型的富客戶端程序。服務(wù)器端主要負(fù)責(zé)數(shù)據(jù)的處理和CGI，展現(xiàn)及功能邏輯由前臺(tái)JS來(lái)控制。Web端的代碼量會(huì)比較大，模塊較多，所以需要進(jìn)行良好的框架設(shè)計(jì)。Q+AppstoreWeb端的主體框架如圖3-2所示。Web端運(yùn)行所依賴的底層庫(kù)主要由JX框架提供，JX是模塊化的非侵入式Web前端框架，特別適合構(gòu)建和組織大規(guī)模、工業(yè)級(jí)的WebApp，具有良好的瀏覽器兼容性。提供了命名空間，模塊化，DOM操作，系統(tǒng)封裝，UI特效，Ajax請(qǐng)求，設(shè)計(jì)模式等強(qiáng)大的功能。3-2Q+Appstore前端主體框架JX這個(gè)基礎(chǔ)框架之上提供更加適合于Q+AppstoreWeb端運(yùn)行的JSAPI封裝，包括錯(cuò)誤處理，常用工具，及不同模塊的通用操作。應(yīng)用到JS框架及功能封裝為整個(gè)系統(tǒng)運(yùn)行提供了完善的操作API支持。AppstoreWeb端展現(xiàn)的包括基本頁(yè)面和功能模塊頁(yè)面。其中基本頁(yè)面設(shè)計(jì)使用靜態(tài)頁(yè)面，頁(yè)面中的數(shù)據(jù)處理主要由服務(wù)器端完成。包括基本數(shù)據(jù)、版本信息、熱點(diǎn)數(shù)據(jù)獲取，之后進(jìn)行解析通過(guò)模版生成html頁(yè)面，返回給客戶端的請(qǐng)求。功能模塊頁(yè)面通過(guò)iframe進(jìn)行嵌入，每個(gè)模塊的處理從CGI或者數(shù)據(jù)文件獲取數(shù)據(jù)，注入到HTML模版中，主要的模塊有我的應(yīng)用，精選頁(yè)，影視中心，搜索頁(yè)等。通過(guò)模塊的JS回調(diào)處理，對(duì)基本頁(yè)面和模塊進(jìn)行狀態(tài)同步操作。這樣的漸進(jìn)式的處理有助于提高用戶體驗(yàn)。JS框架設(shè)支撐前臺(tái)運(yùn)行的JS框架API需要提供完善的功主要包括Web基本功能、基本組件、業(yè)務(wù)功能和系統(tǒng)功能等幾個(gè)部分，提供的API如圖3-3所示。安 管3-3Q+AppstoreJSWeb基本功能Web基本功能提供了一個(gè)基本的JS開(kāi)發(fā)庫(kù)所具有的功能。命名空間和面向?qū)ο蟮哪Ｊ绞谴笮蚖eb應(yīng)用的基礎(chǔ)。另外有DOM元素的操作，的與分發(fā)。這里的不局限于頁(yè)面中DOM元素的操作響應(yīng)，可以在自定義的對(duì)象上觸發(fā)和，使用觀察者模式進(jìn)行組件內(nèi)的消息通信。HTTP交互提供基本的Ajax操作，封裝了從創(chuàng)建，發(fā)送，到接收返回消息的一系列函數(shù)。底層的兼容性操作對(duì)使用者透明。對(duì)于的操作提供簡(jiǎn)便的方法，同時(shí)封裝HTML5中LocalStorage的讀寫方法。基本組件在不同的功能模塊中都會(huì)有一些公用的界面組件，這些組件由底層的API提供，主要有Hint提示，Tips彈窗，Confirm確認(rèn)框和數(shù)據(jù)展示分頁(yè)。組件的實(shí)現(xiàn)封裝了結(jié)構(gòu)，樣式以及響應(yīng)操作。應(yīng)用程序可以方便的調(diào)用這些組件，并且保證了在各個(gè)模塊中的一致性。業(yè)務(wù)功能業(yè)務(wù)功能主要有自動(dòng)化運(yùn)營(yíng)和性能兩個(gè)部分。其中自動(dòng)化運(yùn)營(yíng)可以劃分為小紅點(diǎn)數(shù)字提醒、新管理和熱門推薦及會(huì)員應(yīng)用三類。它們負(fù)責(zé)數(shù)據(jù)的獲取，界面信息展示，本地更新以及對(duì)用戶操作的響應(yīng)。性能有時(shí)間數(shù)據(jù)的統(tǒng)計(jì)上報(bào)，由ISD模塊負(fù)責(zé)。Performance性能監(jiān)控由更精細(xì)的時(shí)間統(tǒng)計(jì)、系統(tǒng)資源消耗組成。系統(tǒng)功能系統(tǒng)功能部分與業(yè)務(wù)需求特點(diǎn)密切相關(guān)。搜索，提供用戶搜索建議和基本的搜索接口。高級(jí)HTTP操作是對(duì)web功能的一種提升。由于業(yè)務(wù)涉及到的數(shù)據(jù)可能分布在多個(gè)下，Ajax請(qǐng)求跨域是一個(gè)嚴(yán)重的問(wèn)題。所以提供了通過(guò)文件進(jìn)行Ajax請(qǐng)求數(shù)據(jù)的方法，對(duì)于部分的CGI使用JSONP的方式解決跨域問(wèn)題。url操作多為參數(shù)的獲取和編，提供API接口進(jìn)行參數(shù)獲并且根據(jù)需求特點(diǎn)進(jìn)行編（VM相適應(yīng)。在操作的基礎(chǔ)上，提供對(duì)uin的方法，uin通過(guò)可以獲取用戶qq號(hào)信息，在當(dāng)前域的中。客戶端交互是對(duì)vm的操作進(jìn)一步封裝簡(jiǎn)化，提供了對(duì)應(yīng)用程序的查詢方法，查詢應(yīng)用信息，是否安裝等?？梢酝ㄟ^(guò)API打開(kāi)、卸載指定的應(yīng)用，或者發(fā)送操作的快捷方式到桌面。通過(guò)這部分的API，可以使應(yīng)用程序最大化使用本地程序的功能，方便的與客戶端進(jìn)行交互。Appstore是一個(gè)基于客戶Web應(yīng)用，同時(shí)涉及到較多的數(shù)據(jù)交互處理，考慮到網(wǎng)絡(luò)通信代價(jià)的昂貴，采用以下的數(shù)據(jù)處理策略。數(shù)據(jù)處理主要包括3個(gè)層次，分別是靜態(tài)頁(yè)面生成、CGI個(gè)性化數(shù)據(jù)拉取以及頁(yè)面的動(dòng)態(tài)數(shù)據(jù)：服務(wù)器端的處理拉取基本數(shù)據(jù)，服務(wù)器端的數(shù)據(jù)請(qǐng)求和處理比環(huán)境差異較大的客戶端要穩(wěn)定，并且速度較快，最終與客戶端的交互只是較少的數(shù)據(jù)通信，這也是這種方式主要的優(yōu)點(diǎn)。通過(guò)基本頁(yè)面模版的編譯生成靜態(tài)頁(yè)面。減少了eb端的數(shù)據(jù)請(qǐng)求消耗和頁(yè)面渲染時(shí)間。這樣頁(yè)面優(yōu)先展示給用戶，提供了漸進(jìn)式的渲染體驗(yàn)。在數(shù)據(jù)策略處理的第二步，由客戶端發(fā)起的CGI的數(shù)據(jù)進(jìn)行過(guò)濾，分析，然后應(yīng)用到模版中，最后展示給用戶。請(qǐng)求的數(shù)據(jù)根據(jù)功能特性部分可以進(jìn)行緩存，內(nèi)存和本地都是可選的方案，數(shù)據(jù)請(qǐng)求之前優(yōu)先檢驗(yàn)緩存中的數(shù)據(jù)是否可用。不同的功能模塊負(fù)責(zé)著不同的數(shù)據(jù)請(qǐng)求處理，這種解決方案也保證了在一些模塊數(shù)據(jù)失效時(shí)不影響其他功能模塊的工作。動(dòng)態(tài)數(shù)據(jù)的設(shè)計(jì)也是為了提高系統(tǒng)的性能，思想就是按需加載。在頁(yè)面初始加載中，只請(qǐng)求渲染處理適量的用戶數(shù)據(jù)。這樣不僅降低數(shù)據(jù)傳輸量，頁(yè)面渲染效率也會(huì)提高。針對(duì)于大部分的用戶的使用習(xí)慣，動(dòng)態(tài)數(shù)據(jù)策略中比較常用的是數(shù)據(jù)緩存和分屏策略。數(shù)據(jù)緩存主要以本地緩存和離線為主，同時(shí)對(duì)數(shù)據(jù)進(jìn)行復(fù)用，減少數(shù)據(jù)請(qǐng)求次數(shù)和頁(yè)面DOM渲染量，問(wèn)題是每次數(shù)據(jù)請(qǐng)求量會(huì)略大。分屏策略是指只加載滿足當(dāng)前視口的的數(shù)據(jù)，當(dāng)數(shù)據(jù)不滿足時(shí)候渲染需求的時(shí)候，再去請(qǐng)求數(shù)據(jù)。動(dòng)態(tài)數(shù)據(jù)策略有很多種不同的方法，各有優(yōu)點(diǎn)，AppstoreWeb端會(huì)對(duì)它們進(jìn)行綜合使用，最大化頁(yè)面性能和用戶體在運(yùn)營(yíng)業(yè)務(wù)需求中，產(chǎn)品人員需要頁(yè)面的部分內(nèi)容可配置化，或者由用戶活動(dòng)數(shù)據(jù)推動(dòng)，包括頁(yè)面的Bannr區(qū)、數(shù)字提醒和應(yīng)用推薦等等。部分應(yīng)用場(chǎng)景需要對(duì)用戶的使用行為進(jìn)行記錄，由于服務(wù)器端的運(yùn)行壓力等原因，并未提供操作，需要客戶端使用本地策略。為了提供對(duì)自動(dòng)化運(yùn)營(yíng)功能的支持，Appstoreeb端需要提供一套完善的自動(dòng)化運(yùn)營(yíng)方案。方案的基本框架如圖2-7所示。自動(dòng)化運(yùn)營(yíng)方案的在于對(duì)Appstore數(shù)據(jù)的處理。數(shù)據(jù)主要來(lái)源于產(chǎn)品人員在管理的配置，以及用戶的活動(dòng)數(shù)據(jù)。Web端通過(guò)CGI請(qǐng)求或者JS數(shù)據(jù)文件獲取信息。經(jīng)過(guò)篩選和解析的步驟，數(shù)據(jù)轉(zhuǎn)變成模塊可用的有效自動(dòng)化運(yùn)營(yíng)中需要對(duì)用戶部分的操作數(shù)據(jù)進(jìn)行，臨時(shí)由內(nèi)存Cache提供，長(zhǎng)時(shí)間的由HTML5中的LocalStorage本地支持。通過(guò)記錄的時(shí)間戳來(lái)校驗(yàn)數(shù)據(jù)是否過(guò)期。自動(dòng)化運(yùn)營(yíng)的功能模塊，在JSAPI封裝層完善的支持，通過(guò)模塊化，可以在各個(gè)子模塊中方便的使用。模塊工作時(shí)，從服務(wù)器端獲取的數(shù)據(jù)和本地記錄的運(yùn)行數(shù)據(jù)共同作用影響頁(yè)面渲染，提供正確的運(yùn)營(yíng)效果。這樣通過(guò)管理配置的數(shù)據(jù)可以快速的反應(yīng)到Appstore的Web端中。

3-4Q+Appstore自動(dòng)化運(yùn)營(yíng)方案本章主要介紹前臺(tái)框架的設(shè)計(jì)，基于開(kāi)發(fā)的角度考慮了底層的API類庫(kù)，應(yīng)用程序工作流程，以及數(shù)據(jù)的處理。同時(shí)，為了產(chǎn)品的運(yùn)營(yíng)，設(shè)計(jì)了自動(dòng)化運(yùn)營(yíng)部分進(jìn)行管理。4本章將介紹前端框架和性能優(yōu)化的實(shí)現(xiàn)。前端框架包括靜態(tài)頁(yè)面編譯處理、基礎(chǔ)框架、系統(tǒng)組件和應(yīng)用級(jí)組件等，優(yōu)化包括數(shù)據(jù)分析、技術(shù)研究和優(yōu)化方案的提出。數(shù)據(jù)處理策略的第一步是對(duì)靜態(tài)頁(yè)面進(jìn)行編譯，輸出頁(yè)面的主要靜態(tài)內(nèi)容。這部分內(nèi)容的有效時(shí)間較長(zhǎng)，可以利用服務(wù)器端的計(jì)算能力以及穩(wěn)定的網(wǎng)絡(luò)環(huán)境為前端快速生成靜態(tài)初始頁(yè)面。生成的頁(yè)面可以通過(guò)CDN部署，客戶端的請(qǐng)求不需要經(jīng)過(guò)服務(wù)器的邏輯處理，CDN網(wǎng)絡(luò)與客戶端的通信更加快速。每次編譯生成的頁(yè)面文件會(huì)通過(guò)更改時(shí)間戳的方式更新對(duì)其它資源文件如JS文件，CSS文件的，這保證了客戶端請(qǐng)求的內(nèi)容都是發(fā)布的。靜態(tài)頁(yè)面編譯示意圖如圖4-1所示。4-1靜態(tài)頁(yè)面編譯示意圖編譯機(jī)先從代碼SVN服務(wù)器上獲取的代碼，然后從管理數(shù)據(jù)源拉取數(shù)據(jù)，然后進(jìn)行靜態(tài)頁(yè)面的編譯。編譯結(jié)果頁(yè)面最終會(huì)被發(fā)布到CDN的各個(gè)節(jié)點(diǎn)上，這樣頁(yè)面就能充分的利用CDN的優(yōu)勢(shì)了。靜態(tài)頁(yè)面編譯處理如圖4-2所示。構(gòu)建構(gòu)建構(gòu)構(gòu)建結(jié)4-2靜態(tài)頁(yè)面編譯處理流程圖新首頁(yè)拉取時(shí)開(kāi)數(shù)據(jù)解析服務(wù)器端進(jìn)行靜態(tài)頁(yè)面編譯的是PHP，首先獲取應(yīng)用商店主數(shù)據(jù)源JS文新首頁(yè)拉取時(shí)開(kāi)數(shù)據(jù)解析更新首頁(yè)拉取的時(shí)間戳，處理首頁(yè)的靜態(tài)頁(yè)面模板，填充系統(tǒng)的版本號(hào)。根據(jù)獲取到的數(shù)據(jù)依次構(gòu)建banner區(qū)你banner區(qū)，熱門，精品，上線的主列表區(qū)在自動(dòng)化運(yùn)營(yíng)中要使用到的數(shù)據(jù)過(guò)靜態(tài)s文件得到的，靜態(tài)編譯處理的這一步將會(huì)生成hot_newJS文件。在生成今日活動(dòng)內(nèi)容之后，將會(huì)對(duì)內(nèi)容進(jìn)行壓縮，去除空白和注釋，輸出最終的頁(yè)面。功能類庫(kù)的結(jié)構(gòu)Web端運(yùn)行所依賴的底層庫(kù)主要由JX類庫(kù)提供，JX是模塊化的非侵入式Web前端開(kāi)發(fā)類庫(kù)，特別適合構(gòu)建和組織大規(guī)模、工業(yè)級(jí)的WebApp，具有良好的瀏覽器兼容性。提供了命名空間，模塊化，DOM操作，系統(tǒng)封裝，UI特效，Ajax請(qǐng)求，設(shè)計(jì)模式等強(qiáng)大的功能。在JX這個(gè)基礎(chǔ)類庫(kù)之上提供更加適合于Q+AppstoreWeb端運(yùn)行的JSAPI封裝，主要設(shè)計(jì)為錯(cuò)誤處理，常用工具，及不同模塊的通用操作。應(yīng)用到的JS框架及功能封裝為整個(gè)系統(tǒng)運(yùn)行提供了完善的操作API支持。 4-3功能文件結(jié)構(gòu)圖Jx中的不同模塊由單獨(dú)的JS文件負(fù)責(zé)，我們引入了Jx中的基本功能，涵蓋命名空間，JS操作擴(kuò)展，DOM選擇，JSON處理，HTTPAJAX請(qǐng)求等。Combine.bat批處理文件將這些單獨(dú)的文件合并成一個(gè)文件JX.js，發(fā)布時(shí)在服務(wù)器端執(zhí)行壓縮處理。結(jié)合JX提供的功能，使用Tools和Common封裝Appstore中常用的操作函數(shù)和數(shù)據(jù)操作。工具包的實(shí)現(xiàn)Tools工具包是功能類庫(kù)中工具類集合，涵蓋了功能繁雜的JS操作接口通信方法，它的類圖如圖4-4所示。其中SearchClass，Isd，MyAppTips，ImgTransport將在系統(tǒng)組件和應(yīng)用級(jí)組件中做介紹。這里主要描述其它的工具類：(2)CONST：應(yīng)用商店中常量定義集合，CGI_URL代表appstore的cgi請(qǐng)求根路徑，用于CGI的拼接操作。CGI__URL，使用頁(yè)面進(jìn)行通信時(shí)頁(yè)面的路徑；Util：提供對(duì)URL中的Hashsearch字段的操作；AppHash：app應(yīng)用的id對(duì)應(yīng)分類名稱，其中一級(jí)分類寫在list.html頁(yè)面上，包括數(shù)據(jù)上報(bào)。字段appTypeMap包含了數(shù)據(jù)庫(kù)中所有分類的對(duì)應(yīng)關(guān)系，擴(kuò)展parent表明分類的從屬關(guān)系，當(dāng)父類id是-1是表示該類目是頂級(jí)分類appypeOld2New是應(yīng)用信息改變之后做的適配。剩余字段ADD，HAD，UPDATE，ADING，UPDATING指應(yīng)用的安裝狀態(tài)；T：封裝了一些簡(jiǎn)單實(shí)用的函數(shù)。getUin可以從 中獲取用戶的UIN信息，從而可以獲取用戶的賬號(hào)信息。get 和set 提供了對(duì)的的賦值操作，以鍵值對(duì)的方式。loadScript動(dòng)態(tài)的加載一個(gè)文件并執(zhí)行，使用時(shí)可以傳入自定義的回調(diào)函數(shù)在文件加載完成時(shí)執(zhí)行。StringCut是字符串的切割函數(shù)，將一個(gè)字符串限制在指定長(zhǎng)度內(nèi)，超過(guò)用“…”代替，為了防止字符轉(zhuǎn)義帶來(lái)的問(wèn)題，所有的字符串會(huì)先進(jìn)行一次反轉(zhuǎn)義，將常見(jiàn)的轉(zhuǎn)義字符如?&?，?<?，?>?等恢復(fù)成原意。getQuery用于獲取url中的rqust參數(shù)，由于url中存在pushparam這樣的經(jīng)過(guò)特殊編碼操作的客戶端跳轉(zhuǎn)參數(shù)，所以需要使用VM提供的策略，對(duì)pushparam的info字段進(jìn)行轉(zhuǎn)義。getDateFromStamp方法提供從時(shí)間戳獲取時(shí)間的方法，結(jié)果為拼接而成的字符串，拼接字符是?-?。T中提供的另外一些重要方法是關(guān)于Ajax操作。在Appstore的部署方案中，頁(yè)面、 和數(shù)據(jù)之間的通信經(jīng)常需要跨域。所以使用服務(wù)器端部署頁(yè)面執(zhí)行通信請(qǐng)求解決跨域問(wèn)題的方法，也就是Send提供的功能。Ajax函數(shù)在JX的ajax通信的基礎(chǔ)之上增加了緩存的處理，如果一個(gè)通信結(jié)果需要緩存時(shí)設(shè)置相關(guān)的參數(shù)即可，這樣可以最大程度的減少網(wǎng)絡(luò)通信信息。4-4工具包類圖Appstore.Tools：命名空間Appstore下的Tools類提供了一些與業(yè)務(wù)有關(guān)聯(lián)的操作接口。重寫了瀏覽器的onerror函數(shù)，當(dāng)捕獲到錯(cuò)誤時(shí)，執(zhí)行數(shù)據(jù)上報(bào)。Log是appstore開(kāi)發(fā)調(diào)試時(shí)的日志記錄接口，用于頁(yè)面信息的打印。getCdnNum根據(jù)appid獲取對(duì)應(yīng)的cdnhost。getJsCdn獲取JS的CDN路徑。getAppUrl獲取應(yīng)用的路徑。GetAppImg獲取應(yīng)用的Logo。getAppThumb獲取應(yīng)用的縮略圖。GetAvatar獲取用戶的個(gè)人頭像，getGradeView獲取評(píng)分顯示視圖。系統(tǒng)組件是Appstore的基本功能模塊的封裝，包括UI組件，客戶端封裝組件和應(yīng)用展示組件。UI組件UI組件提供了常用的界面交互元素，有搜索框，Tips彈窗，Confirm框和分頁(yè)組件等。保證統(tǒng)一的風(fēng)格樣式和便捷的使用方法。組件的類圖如圖4-5所示。Pagination分頁(yè)組件。應(yīng)用商店中的很多功能類目都會(huì)涉及到應(yīng)用的展示，數(shù)目過(guò)多時(shí)，需要進(jìn)行分頁(yè)。分頁(yè)組件提供了對(duì)分頁(yè)操作的封裝，包括界面的交互元素，前一頁(yè)，后一頁(yè)，前N頁(yè)，后N頁(yè)，指定頁(yè)的跳轉(zhuǎn)，使用時(shí)需要提供自定義的回調(diào)函數(shù)callback處理指定頁(yè)碼的跳轉(zhuǎn)；Tip操作結(jié)果提示框。用戶進(jìn)行一些操作之后，系統(tǒng)需要給出反饋信息，在一定時(shí)間之后。Tips封裝了這樣的功能，在使用時(shí)需要傳入要顯示的信息和信息的類型（警告或者非警告，默認(rèn)為非警告）不同的類型對(duì)應(yīng)著不同的樣式，Tips屏幕居中顯示，默認(rèn)顯示時(shí)長(zhǎng)1s；MyAppTips我的應(yīng)用新手引導(dǎo)提示。用戶在第一次使用應(yīng)用商店時(shí)，會(huì)有浮層顯示新手引導(dǎo)信息，由若干引導(dǎo)圖和引導(dǎo)文字組成，提供下一步和關(guān)閉的方法。用戶查看過(guò)新手引導(dǎo)信息與否通過(guò)本地oSorge記錄，對(duì)于已經(jīng)查看過(guò)的用戶將不再顯示。Confirm用戶確認(rèn)框。用戶執(zhí)行的一些操作需要進(jìn)行用戶的確認(rèn)，例如刪除我的應(yīng)用里的應(yīng)用。使用時(shí)，需要傳入確認(rèn)框的標(biāo)題和信息內(nèi)容。確認(rèn)框居中顯示，背景有浮層。它的關(guān)閉按鈕，確認(rèn)按鈕和取消按鈕響應(yīng)用戶點(diǎn)擊，默認(rèn)關(guān)閉確認(rèn)框，調(diào)用時(shí)可以自定義處理函數(shù)，在不同的應(yīng)用場(chǎng)景下做合適的處理。 搜索框。提供了應(yīng)用商店中統(tǒng)一的搜索，提供 默認(rèn)顯示信息，處理，搜索智能提示，以及搜索跳轉(zhuǎn)處理4-5UI組件類圖Appstore負(fù)責(zé)喚起搜索框進(jìn)行初始化，設(shè)定頁(yè)面交互元素，填充默認(rèn)的搜索。綁定搜索框獲得焦點(diǎn)，失去焦點(diǎn)，按鍵輸入，鼠標(biāo)點(diǎn)擊等處理。當(dāng)用戶輸入搜索時(shí)，將調(diào)用searchHint函數(shù)處理按鍵。首先對(duì)按鍵進(jìn)行解析，如果是上下位移鍵，那么選定當(dāng)前的提示填充到輸入框中，否則構(gòu)建新的請(qǐng)求向SOSO請(qǐng)求智能提示列表，新的請(qǐng)求500ms等待發(fā)送時(shí)間，這段時(shí)間如果更新搜索關(guān)鍵字則可以取消這次請(qǐng)求，通過(guò)這樣的方式減少不必要的通信。請(qǐng)求成功的回調(diào)函數(shù)onSuccess執(zhí)行時(shí)，會(huì)調(diào)用createHint來(lái)創(chuàng)建提示下拉列表。用戶確定搜索詞執(zhí)行搜索時(shí)，搜索框組件會(huì)將搜索關(guān)鍵詞進(jìn)行處理，將搜索參數(shù)拼接到制定的URL中，同時(shí)請(qǐng)求轉(zhuǎn)發(fā)到搜索處理頁(yè)面。它的工作時(shí)序圖如圖4-6Appstore用::輸入搜輸入按請(qǐng)求智onSuccess回確定搜索4-6搜索框工作時(shí)序圖客戶端API在Q+Appstore中可以通過(guò)vm提供的API來(lái)調(diào)用客戶端的一些接口，但對(duì)于一些常用的API調(diào)用如對(duì)APP的操作使用函數(shù)封裝下更加方便些。這正是客戶端API封裝組件提供的功能。Appmanager是對(duì)應(yīng)用操作的集合，通過(guò)回調(diào)函數(shù)響應(yīng)客戶端執(zhí)行之后的事件。提供的功能有：getAppList：獲取應(yīng)用商店中的應(yīng)用列表集合，應(yīng)用信息包括應(yīng)用的和版本號(hào)；(2)installApp：安裝一個(gè)應(yīng)用，接收參數(shù)option，option中指定應(yīng)用的ID；(3)runApp：打開(kāi)一個(gè)應(yīng)用，接收參數(shù)option，option中指定應(yīng)用的ID；(4)uninstallApp：卸載一個(gè)應(yīng)用，接收參數(shù)option，option中指定應(yīng)用的uninstallAppList：批量卸載應(yīng)用；queryAppList：獲取用戶已經(jīng)安裝應(yīng)用的列表；getAppStatus：獲取應(yīng)用的安裝狀態(tài)，返回結(jié)果為AppHash.UPDATE，AppHash.HAD，AppHash.ADDING，AppHash.ADD，分別代表需要更新，已經(jīng)添加，安裝中，未添加。updateApp：更新指定的應(yīng)用；客戶端API封裝組件的類圖如圖4-7所示：4-7客戶端API封裝組件類圖System封裝系統(tǒng)級(jí)的客戶端接口調(diào)用。提供的功能有： alCenter：打開(kāi)用戶的個(gè)人中心；(2)runApp：打開(kāi)應(yīng)用；shareApp：應(yīng)用，可以將應(yīng)用到，空間或者是 好友a(bǔ)ddDeskApp：添加應(yīng)用桌面圖標(biāo)；getVersionQ+的版本號(hào)和QQ版本號(hào)（如果安裝isDeskApp：查詢一個(gè)應(yīng)用是否已經(jīng)發(fā)送了桌面快捷方式；setWallpaper：設(shè)置一張為桌面壁紙應(yīng)用級(jí)組件負(fù)責(zé)應(yīng)用商店的業(yè)務(wù)功能，著手于運(yùn)營(yíng)管理和運(yùn)營(yíng)數(shù)據(jù)統(tǒng)計(jì)。已經(jīng)完成了系統(tǒng)自動(dòng)化運(yùn)營(yíng)，數(shù)據(jù)上報(bào)和測(cè)速上報(bào)，下面的章節(jié)將對(duì)功能作詳細(xì)的介紹。系統(tǒng)自動(dòng)化運(yùn)營(yíng)自動(dòng)化運(yùn)營(yíng)方案的在于對(duì)Appstore數(shù)據(jù)的處理。數(shù)據(jù)主要來(lái)源于產(chǎn)品人員在管理的配置，以及用戶的活動(dòng)數(shù)據(jù)。Web端通過(guò)CGI請(qǐng)求或者JS數(shù)據(jù)文件獲取信息。經(jīng)過(guò)篩選和解析的步驟，數(shù)據(jù)轉(zhuǎn)變成模塊可用的有效數(shù)據(jù)。自動(dòng)化運(yùn)營(yíng)組件的類圖如圖4-8所示。圖4-8系統(tǒng)自動(dòng)化運(yùn)營(yíng)組件類圖自動(dòng)化運(yùn)營(yíng)中需要對(duì)用戶部分的操作數(shù)據(jù)進(jìn)行，臨時(shí)由內(nèi)存Cache提供，長(zhǎng)時(shí)間的由html5標(biāo)準(zhǔn)中的LocalStorage支持。通過(guò)記錄的時(shí)間戳來(lái)校驗(yàn)數(shù)據(jù)是否過(guò)期。自動(dòng)化運(yùn)營(yíng)的功能模塊，在JSAPI封裝層完善的支持，通過(guò)模塊化，可以在各個(gè)子模塊中方便的使用。模塊工作時(shí)，從服務(wù)器端獲取的數(shù)據(jù)和本地記錄的運(yùn)行數(shù)據(jù)共同作用影響頁(yè)面渲染，提供正確的運(yùn)營(yíng)效果。這樣通過(guò)管理配置的數(shù)據(jù)可以快速的反應(yīng)到Appstore的端中。自動(dòng)化運(yùn)營(yíng)中的數(shù)字提醒，新，熱門推薦分別由類RedCount，NewIconManager和Hot ager負(fù)責(zé)。RedCount的數(shù)據(jù)來(lái)自服務(wù)器端的JS文件，加載成功之后執(zhí)行請(qǐng)求中的回調(diào)函數(shù)，本地中記錄著之前請(qǐng)求的數(shù)據(jù)，是否過(guò)期通過(guò)時(shí)間戳來(lái)判斷。NewIconManager的數(shù)據(jù)來(lái)自JS文件中的CONFIG對(duì)象所配置的數(shù)據(jù)，其中的版本號(hào)用來(lái)與本地中的數(shù)據(jù)進(jìn)行校驗(yàn)。Hot ager通過(guò)appstoreRedCount中的請(qǐng)求數(shù)據(jù)，數(shù)據(jù)依然通過(guò)本地中記錄的時(shí)間戳判斷進(jìn)行校驗(yàn)。數(shù)字提醒又稱小紅點(diǎn)，當(dāng)Appstore中的欄目有更新時(shí)會(huì)通過(guò)小紅點(diǎn)數(shù)字的方式提醒用戶。更新內(nèi)容包括新的應(yīng)用上架，新的影視類容，產(chǎn)品側(cè)的應(yīng)用推薦等等，提醒策略能讓用戶第一時(shí)間定位到有更新的內(nèi)容。小紅點(diǎn)數(shù)字推薦的時(shí)序圖如圖4-9所示。:::醒數(shù)回調(diào)數(shù)字提醒數(shù)據(jù)解析qredcount構(gòu)建數(shù)字提醒信更新數(shù)字提醒的本4-9數(shù)字提醒時(shí)序圖RedCount的初始化函數(shù)由appstore負(fù)責(zé)調(diào)用，在執(zhí)行初始化時(shí)，首先向服務(wù)器端的CGI請(qǐng)求數(shù)字提醒資源JS文件，請(qǐng)求URL為“ht pt.onSucessURL通過(guò)get方式傳遞的參數(shù)callback表示請(qǐng)求數(shù)據(jù)通過(guò)JSONP的方式，返回的數(shù)據(jù)封裝在由callback指定的回調(diào)函數(shù)中，整體在一個(gè)JS腳本文件中。請(qǐng)求成功之后會(huì)執(zhí)行在URL中指定的回調(diào)函數(shù)onSuccess。RedCount通過(guò)函數(shù)readFlags本地中的數(shù)字提醒記錄，本地操作模塊將qredcount字段解析為數(shù)字提醒數(shù)據(jù)返回。請(qǐng)求到的數(shù)據(jù)和本地的記錄數(shù)據(jù)進(jìn)行時(shí)間戳的校驗(yàn)，如果本地記錄過(guò)期，則說(shuō)明請(qǐng)求的該項(xiàng)數(shù)據(jù)是重新配置的，那么構(gòu)建數(shù)字提醒信息，同時(shí)更新數(shù)字提醒的記錄到本地存當(dāng)Appstore有新的欄目上線或者欄目經(jīng)歷了大的改動(dòng)升級(jí)，那么該欄目將顯示新，顯示與否主要取決于CONFIG數(shù)據(jù)的配置。新控制器的工作邏輯為：當(dāng)用戶點(diǎn)擊帶有?新?的導(dǎo)航條目時(shí)，?新? ；本地導(dǎo)航條目的分類ID，時(shí)間戳，版本號(hào)；每次頁(yè)面載入時(shí)，檢查本地，如果版本一致，并且有時(shí)間戳則不顯示新，否則顯示；可以手動(dòng)配置要顯示新的導(dǎo)航項(xiàng)(分類ID映射進(jìn)入默認(rèn)項(xiàng)目需要隱藏新，寫在對(duì)應(yīng)頁(yè)面JS中，調(diào)用添加記錄的方法addRecord(cla 新管理器工作時(shí)序圖如圖4-10所示新的配置數(shù)據(jù)并不需要額外請(qǐng)求，只要直接 文件中CONFIG對(duì)象即可。配置的規(guī)則如圖4-11要顯示新的項(xiàng)目，需要將其類目ID填寫在CONFIG的newicons的key字段中，值可以默認(rèn)為空，若將對(duì)應(yīng)的值設(shè)置為true，那么表示該項(xiàng)新在用戶點(diǎn)擊查看時(shí)，但將在每次重新加載時(shí)再次顯示。Version字段為新標(biāo)簽配置數(shù)據(jù)的版本號(hào)，根據(jù)這個(gè)版本號(hào)驗(yàn)證本地?cái)?shù)據(jù)是否過(guò)期。每次配置新數(shù)據(jù)時(shí)要同步更新配置的版本號(hào)。Appstore負(fù)責(zé)調(diào)用NewIconManager的init方法，初始化函數(shù)中獲取CONFIG對(duì)象的配置數(shù)據(jù)作為服務(wù)器端的更新，通過(guò)readRecord方法調(diào)用本地組件來(lái)解析newicon字段，得到本地的配置數(shù)據(jù)localConfig。配置數(shù)據(jù)通過(guò)版本號(hào)校驗(yàn)來(lái)判斷是否過(guò)期，如果本地記錄已經(jīng)過(guò)期，那么根據(jù)CONFIG重新構(gòu)建新信息，同時(shí)更新本 的 記錄數(shù)據(jù)圖4-10新管理器工作時(shí)序圖4-11新配置數(shù)熱門時(shí)序圖如圖4-12所示Appstore負(fù)責(zé)調(diào)用Hotager的init方法，它又調(diào)用HotNew的init方法。在HotNew的初始化函數(shù)中，通過(guò)getRedCount函數(shù)獲取熱門推薦的數(shù)目，之后根據(jù)推薦數(shù)目和應(yīng)用是否為會(huì)員應(yīng)用來(lái)為應(yīng)用構(gòu)建熱門推薦信息。處理之后的應(yīng)用列表返回給Hot ager，它使用readRecord方法調(diào)用本地組件解析hotnew字段，獲取本地的熱門數(shù)據(jù)記錄。使用時(shí)間戳校驗(yàn)判斷本地記錄是否過(guò)期，如果過(guò)期，那么在appstore.list構(gòu)建應(yīng)用顯示列表調(diào)用formatOption方法時(shí)會(huì)為應(yīng)用構(gòu)建熱門推薦標(biāo)簽信息，返回處理結(jié)果給圖4-12熱門配置數(shù)熱門推薦應(yīng)用的計(jì)算過(guò)程如圖4-13所示。HotNew首先獲取首頁(yè)熱門應(yīng)用列表list，用于顯示在首頁(yè)熱門