InstitutionenfördatavetenskapDepartmentofComputerandInformationScience

Examensarbete

ÖkadanvändarupplevelseihybridaapplikationermedJIT-kompileringav

JavaScriptav

MartinNorberg

LIU-IDA/LITH-EX-G--15/066--SE

2015-06-01

Linköpingsuniversitet

SE-58183Linköping,SwedenLinköpingsuniversitet58183Linköping

LinköpingsuniversitetInstitutionenfördatavetenskap

Examensarbete

ÖkadanvändarupplevelseihybridaapplikationermedJIT-kompileringav

JavaScriptav

MartinNorberg

LIU-IDA/LITH-EX-G--15/066--SE

2015-06-01

Handledare:ErikBerglundExaminator:ErikBerglund

PåsvenskaDetta dokument hålls tillgängligt på Internet – eller dess framtida ersättare –under en längre tid från publiceringsdatum under förutsättning att inga extra-ordinäraomständigheteruppstår.

Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner,skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat förickekommersiellforskningochförundervisning.Överföringavupphovsrättenviden senare tidpunkt kan inte upphäva detta tillstånd. All annan användning avdokumentet kräver upphovsmannens medgivande. För att garantera äktheten,säkerheten och tillgängligheten finns det lösningar av teknisk och administrativart.

Upphovsmannensideellarätt innefattarrättattblinämndsomupphovsmaniden omfattning som god sed kräver vid användning av dokumentet på ovanbeskrivna sätt samt skyddmot att dokumentet ändras eller presenteras i sådanformellerisådantsammanhangsomärkränkandeförupphovsmannenslitteräraellerkonstnärligaanseendeelleregenart.

För ytterligare information om Linköping University Electronic Press seförlagetshemsidahttp://www.ep.liu.se/InEnglishThe publishers will keep this document online on the Internet - or its possiblereplacement - for a considerable time from the date of publication barringexceptionalcircumstances.

The online availability of the document implies a permanent permission foranyonetoread,todownload,toprintoutsinglecopiesforyourownuseandtouseit unchanged for any non-commercial research and educational purpose.Subsequenttransfersofcopyrightcannotrevokethispermission.Allotherusesofthedocumentareconditionalontheconsentofthecopyrightowner.Thepublisherhas taken technical and administrativemeasures to assure authenticity, securityandaccessibility.

Accordingtointellectualpropertylawtheauthorhastherighttobementionedwhen his/her work is accessed as described above and to be protected againstinfringement.

ForadditionalinformationabouttheLinköpingUniversityElectronicPressanditsproceduresforpublicationandforassuranceofdocumentintegrity,pleaserefertoitsWWWhomepage:http://www.ep.liu.se/

©MartinNorberg

SammanfattningDennarapportharskrivitsisambandmedettexamensarbetepåhögskoleingenjörslinjeniLinköpingförattredauthurJIT-kompileringavJavaScriptpåverkaranvändarupplevelsenihybridamobilapplikationer.MotiveringenkommerfrånattföretagetGreatRatevillskapaettplattformsoberoendeadministrationsgränssnittmedbästamöjligaanvändarupplevelse.PåiOShardettidigareintevaritmöjligtattutnyttjaJIT-kompilering,ochhybridaapplikationerharfåttettrykteavattvaralångsamma.FrånochmediOS8ärdetdockmöjligtattskapahybridaapplikationersomutnyttjarJIT-kompilering.MetodenhargåttutpåattköraettantalpopulärariktmärkestesteravJavaScript,samtettstresstestföranimering,itvåolikawebbvyerdärendastdenenastödjerJIT-kompilering.ResultatenfråntesternasomgjortsvisarpåattJavaScriptoftapresterar3-9gångerbättremedstödavJIT-kompilering.SlutsatsenblevattJIT-kompileringavJavaScriptkanhöjaanvändarupplevelenihybridaapplikationerochattdetkanvaramycketlönsamtattskapaenhybridapplikationmedettplattformsoberoendeadministrationsgränssnitt.

Innehållsförteckning1Inledning..............................................................................................................................................................................11.1Begreppochdefinitioner.....................................................................................................................................11.2Motivering..................................................................................................................................................................11.3Syfte...............................................................................................................................................................................21.4Frågeställning...........................................................................................................................................................21.5Avgränsningar...........................................................................................................................................................2

2Teori.......................................................................................................................................................................................32.1Angreppssättvidmobilapplikationsutveckling........................................................................................32.2WebViewspåiOS.....................................................................................................................................................32.3JIT-KompileringavJavaScript............................................................................................................................42.4Användarupplevelse..............................................................................................................................................4

3Metod.....................................................................................................................................................................................53.1RiktmärkestesteravJavaScript.........................................................................................................................63.1.1SunSpider(1.0.2)............................................................................................................................................63.1.2Octane(2.0).......................................................................................................................................................73.1.3Kraken(1.1)......................................................................................................................................................7

3.2Testavanvändarupplevelse...............................................................................................................................84Resultat.................................................................................................................................................................................94.1RiktmärkestesteravJavaScript.........................................................................................................................94.1.1SunSpider........................................................................................................................................................104.1.2Octane2.0........................................................................................................................................................124.1.3Kraken1.1.......................................................................................................................................................14

4.2Testavanvändarupplevelse............................................................................................................................154.2.1FPS......................................................................................................................................................................154.2.2CPU-ochGPU-användning.......................................................................................................................16

5Diskussion........................................................................................................................................................................185.1Resultat.....................................................................................................................................................................185.2Metod.........................................................................................................................................................................18

6Slutsats...............................................................................................................................................................................19Referenser............................................................................................................................................................................20

1

1InledningDenhärrapportenärettresultatavettexamensarbetepåHögskoleingenjörslinjeninomdatateknikvidLinköpingsuniversitet.ExamensarbetetärutförthosGreatRate,ettföretagbelägetiNorrköpingsomsysslarmedkundundersökningarochavanceradeanalyseravundersökningsdata.UnderexamensarbetetharrealtidskompileringavJavaScriptochdessinverkanundersöktsnärdetgälleranvändarupplevelsenihybridamobilapplikationer.Användarupplevelsenharmättsiuppnåttantalavrenderadebildrutorpersekund.

1.1BegreppochdefinitionerNedanbeskrivsnågraförkortningarsamtbegreppsomanväntsidennarapport.

• Canvas–HTML-taggförattritautgrafikpåenwebbsida.• DOM–Plattforms-ochspråkneutraltgränssnittsomtillåterprogramochscriptatt

dynamisktkommaåtochuppdateraettdokumentsinnehållochstruktur.• Framespersecond(fps)–Ettmåttförhurmångabildrutorpersekundsomgenereras.• Garbagecollection–Skräpsamling,automatiskhanteringförattfrigöraminne.• HTML5–DensenastestandardenförHTMLochXHTML.• Hybridapplikation–EnapplikationuppbyggdavbådenativkodsamtHTMLoch

JavaScript.• JSON–JavaScriptObjectNotation,etttextbaseratformatsomanvändsförattutbytadata.• Nativapplikation–Enapplikationsomärutveckladförattanvändaspåenspecifiktyp

avenhet.• SoftwareDevelopmentKit(SDK)–Enuppsättningutvecklingsverktygförettspecifikt

operativsystemochmjukvaruramverk.• Skräpsamling–Automatiskhanteringförattfrigöraminne.• WebGL–EttJavaScriptAPIförrenderingav2D-samt3D-grafikinutiwebbläsare.• WebView–Envyinutienapplikationsomfungerarsomenwebbläsare.

1.2MotiveringDetfinnstreolikasättattgåtillväganärmanutvecklarapplikationerförmobilaplattformar[1].Mangörantingenennativ(fr.eng.”native”)applikation,enwebb-applikation,ellersåväljermanattgöraenhybridapplikationsomärenblandningavdetvåförstnämnda.Nativaapplikationerärskrivnaförenspecifikplattformdärsoftwaredevelopmentkit(SDK),verktygsamtprogrammeringsspråkocksåärspecifikaförplattformen.NärmanutvecklarnativaapplikationerföriOSt.ex.såanvändsiOSSDKochprogrammeringsspråketärantingenObjective-CellerSwift[2].Webb-applikationerärapplikationersomärutveckladeförattvisasienwebbläsare.DessaskapasmedvanligawebbteknikerdärHTML5,CSSochJavaScriptanvändsförattskapaapplikationersomgerenanvändarupplevelseliktdensomfåsien”riktig”mobilapplikation.Hybridaapplikationerärapplikationersombeståravenwebb-applikationsomärinbäddadiensåkalladWebViewinutiennativcontainer.Påsåsättkanmanutnyttjaalladefördelarsomannarsbarafinnshosnativaapplikationer,mensamtidigtfåfrihetenattväljaHTML5,CSSochJavaScriptsomprogrammeringsspråk.

2

Mångaapplikationersomfinnspåmarknadenidagärhybrida,t.ex.Instagram,GmailochTwitterförattnämnanågra[3].PrestandanhosapplikationersomärskrivnaiHTML5,CSSochJavaScripthardockdiskuteratsochmångauppleverdessasomlångsamma[4].UIWebViewärdenklasssomharfunnitssedaniOS2.0förattbäddainwebb-baseratinnehållienWebViewpåiOS[5].ExekveringavJavaScriptärendemesttidkrävandeuppgifternaochutgörenicke-trivialdelavladdningstidenförmångawebbsidor[6][7].MedUIWebViewärdetintemöjligtattutnyttjavissapopulärateknikerföroptimeradprestandasomt.ex.Just-In-Time(JIT)kompileringavjustJavaScript.EftersomdetintefunnitsmöjlighettillJIT-kompileringavJavaScriptihybridaapplikationersåhardessaallavaritofferförenbetydandeprestandaförlust,vilketocksåkanhavaritenbidragandeorsaktilldetdåligaryktesomhybridaapplikationerfåttfrånvissahåll.PåApplesWorldwideDevelopersConference(WWDC)2014presenteradesettnyttWebKitAPIförOSXochiOSsamtennyWebView,WKWebView.DenstörstaskillnadenmellandetvåwebbvyernaärattWKWebViewmöjliggörJIT-kompilering.HybridaapplikationerimplementerademedWKWebViewskaiochmeddettakunnapresterabetydligtbättreäninnan[8].

1.3SyfteDettaexamensarbeteärutförtpåuppdragavföretagetGreatRatesomsysslarmedkundundersökningochavanceradanalysavundersökningsdata.GreatRatesproduktbeståridagbl.a.avennativiOS-applikationsamtettadministrationsgränssnittskrivetiPHP,HTML,CSSochJavaScript.Dettaadministrationsgränssnittharänsålängeendastvaritmöjligtattanvändaviaenwebbläsare.Manvillnubyggaettnyttadministrationsgränssnittsomärbådeanvändarvänligtochroligtattanvända,därolikatyperavanimationersomt.ex.animeringaravgraferbidrartillanvändarupplevelsen.ManvilldessutomhamöjlighetenattanvändasigattsammaadministrationsgränssnittdirektiföretagetsiOS-applikation. Förattundvikadubbeltarbetevillman,precissomidag,göraenwebb-applikationavdetnyaadministrationsgränssnittet,somsedangårattimplementerasomenenkelWebViewiderasiOS-applikation.Lösningarliktdennadäranimeringarochvy-övergångarskermedbl.a.JavaScripthardockiblandvisatsigvaralångsammaihybridaapplikationer,vilketkanbidratillensämreanvändarupplevelse.Fr.o.m.iOS8finnsdäremotettnyttWebKitAPIsommöjliggörJIT-kompileringavJavaScriptihybridaapplikationer,somtidigareintevaritmöjligt,ochmanvillnuundersökaomdettapåverkaranvändarupplevelsenihybridaapplikationerpositivt.

1.4Frågeställning• BidrarJIT-kompileringavJavaScripttillökadprestandahoshybridamobilapplikationer?• Bidrardettatillbättreanvändarupplevelseiformavhögrefps?

1.5AvgränsningarPrestandaochanvändarupplevelsekanmätaspåfleraolikasätt.IdennarapportharprestandanmättsihursnabbtJavaScript-motornkangöravissaberäkningarmedanantaletrenderadebildrutorpersekundvidanimationergjordaiJavaScriptutgjortmåttetföranvändarupplevelsen.AllatesterhargjortspåenfemtegenerationensiPadAir(2013)mediOS8installerat.DåGreatRatesjälvadistribuerariPad-enhetertillsinakunderhardemöjlighetattkontrollerahårdvaransomderasapplikationkommerattköraspå,ochenjämförelsemellanolikahårdvaroransesdärförintevararelevant.

3

2TeoriDettakapitelgårigenomteorisomärväsentligförattkunnaföljarapportenssenaredelar.

2.1AngreppssättvidmobilapplikationsutvecklingSomtidigarenämntsfinnsdettreolikaangreppssättatttatillnärmanutvecklarenmobilapplikation[1],ochdeharallasinaför-ochnackdelar.Ettsättärattutvecklaennativapplikation,somdåskrivsförenspecifikplattformochdärdennaplattformenstyrvilketprogrammeringsspråksomanvänds.NativaiOS-applikationerskrivst.ex.iantingenObjective-CellerSwift.FördelarmedattutvecklaennativapplikationärattdetärmöjligtattutnyttjadetSDKsomärspecifiktförplattformensomapplikationenärtänktattköraspå.Dettagerbästförutsättningarförmaximalprestanda[9]ochgerutvecklarenmöjlighetattutnyttjafunktionersomkamera,kontakterochannat.Detärdessutomendastnativaapplikationersomkanmarknadsförasviaapp-stores.EttannatsättattutvecklaenmobilapplikationärattutnyttjawebbteknikersomHTML5,CSS,ochJavaScriptförattkunnaköraapplikationenienwebbläsare.Enstorfördelmeddettaärapplikationeniprincipblirplattformsoberoendedådenkanköraspåallaplattformarsålängedetfinnsenwebbläsare,samtidigtsomenstormajoritetavwebbläsareförmobilaenheteridaganvänderWebKit.Enannanfördelärattutvecklaresomredanharkunskaperinomwebb-utvecklingkanåteranvändadessaiställetförattbehövalärasigettnyttspråk.Detsistasättet,hybridapplikationsutveckling,innebärattmankombinerardetvåtidigaregenomattbäddainwebbinnehållinutiennativbehållare.WebbinnehållvisasdåienWebViewinutidennativaapplikationen.Dettagördetmöjligtatttatillvarapådefördelarsomfinnsvidbådenativochwebb-baseradapplikationer,t.ex.frihetenattskrivaapplikationenmedhjälpavwebbteknikersomHTML5,CSSochJavaScriptochsamtidigtkunnamarknadsförasviaapp-stores.

2.2WebViewspåiOSPåiOShardetsedanversion2.0varitmöjligtattutvecklahybridaapplikationer[5]genomimplementationavklassenUIWebView,därklassenanvändsförattbäddainwebbinnehållinutiapplikationen.APIfinnsförattt.ex.köraJavaScriptsamtändrapåwebbinnehållinutienUIWebView.Fr.o.m.iOS8finnsännuenWebView,WKWebView,somkananvändasförattbäddainwebbinnehållienapplikation[10].WKWebViewharettAPIsnarliktdetsomanvändsförUIWebView,plusnågraextrafunktioner.BådeUIWebViewochWKWebViewanvänderrenderingsmotornWebKitföratttolkaHTMLochJavaScript[11].EnstorskillnadmellandeolikaWebViewsenärdäremotattJavaScript-motorniWKWebViewutförJIT-kompileringavJavaScript-kod.

4

2.3JIT-KompileringavJavaScriptJavaScriptärettdynamisktprogrammeringsspråk.Ettprogramsomärskrivetiettdynamisktspråkskiljersigfrånettprogramsomärskrivetiettstatisktspråk,somt.ex.C++ochJava,genomattdesskodochlogiskastrukturkanändrasunderkörtid[12].Dynamiskaspråktolkasgenerelltinstruktionförinstruktionvilketinnebäratttypcheckningsamtkonverteringavinstruktionertillkörbarmaskinkodskerundertidensomkodenexekveras.Dettatillskillnadfrånstatiskaspråk,somkompilerasinnanprogrammetsedanexekveras.Fördelarhosdynamiskaspråkärattkodenoftablirmerkompaktochmindrekomplex,vilketisinturlåterutvecklarenåsnabbareresultat[12].Däremotgördenextraochständigakörtidskontrollenavkodenattendelprestandakanförloras.ExtraminnemåsteanvändassamtidigtsomCPUnmåstejobbahårtförkontrollavinstruktionerochtypcheckning.JIT-kompileringkombinerardetvåtillvägagångssätten,kompileringochtolkning,föröversättningtillkörbarmaskinkod[13].Underexekveringsåtolkaskodentillenbörjaninstruktionförinstruktion,tillsdetuppstårsåkallade”hot-paths”.Hot-pathsärsektioneravkodsomkörsofta.Närdessauppstårsåkompilerashelakodsektionentillmaskinkod.Dettagörattdenkompilerademaskinkodenkankörasdirektnästagångdennahot-pathkörs,vilketledertillenmycketsnabbareocheffektivareexekvering.

2.4AnvändarupplevelsePrestandanhosJavaScript-motornäravstorbetydelseförhurflytandeochresponsivenJavaScript-applikationkänns[14].JavaScriptanvändsförattmanipuleraDocumentObjectModel-(DOM)trädetvidt.ex.animationer.Omdetinteflyterpåbrasåkommerdetattuppståfördröjningarmellaninputochresponssamts.k.”jank”,sominnebärkortaavbrottmittienanimeringellerinteraktion[15].Förattmätaanvändarupplevelsenienapplikationärdetnaturligtattmätahurmångabildrutorpersekund,fps(fr.eng.”framespersecond”),somapplikationenkangenerera[6].Deflestamobilabildskärmarnaidagharenuppdateringsfrekvenspå60Hzvilketinnebärattbildensomvisasuppdateras60gångerpersekund.Förbästamöjligaanvändarupplevelsebördärförantaletfpsmatchadenna,motsvarande60fps,ochförattuppnå60fpsmåsteallberäkning,layout,m.m.rymmasinomentidsbudgetpå1000/60=16,667ms[16].Fördröjningarochavbrottianimationeruppstårdånödvändigaberäkningarochlayoutinterymsinomdenhärkortatidsbudgeten.

5

3MetodArbetetmeddennarapportharutförtsgenomenkombinationavlitteraturstudieochexperimentiellatester.Ämnetmobilapplikationsutvecklingärväldigtaktuelltjustnuochdärförharmångaforum,guiderochbloggarutgjortenstordelavförstudieninfördennarapport.Förstharenhelhetsbildavhurmobilapplikationsutvecklingserutidagskapats,därenfördjupningsedangjortspåhybridaapplikationer.RenderingsmotornWebKit,somanvändspåbådeAndroidochiOSförattvisawebb-innehållinutinativaapplikationer,harävenstuderatsförattfåenuppfattningavhurdennafungerarochvadJIT-kompileringinnebär.

Figur1.Metod

VidaresåhardetundersöktshurmantestarochutvärderarJavaScript-motornienwebbläsaredärensamlingriktmärkestestervaltsut.OlikastresstesteravJavaScript-animationerharäventittatspådäretttestslutligenvaltsutförattmätaanvändarupplevelsen.FörattutföratesternasåharensimpeliPad-applikationbyggtsinförarbetetmeddennarapport.Allatestersomvaltsutliggeronlineochkörsienwebbläsare.ApplikationenbestårdärföravettadressfältdärenURLkanmatasin,ochdetärsedanmöjligtattlåtawebbinnehålletrenderasiantingenenUIWebViewellerienWKWebView.

Figur2.SimpelapplikationsomskapatsförattrenderawebbinnehålliantingenenUIWebView

ellerienWKWebView.

6

VarjetestharsedankörtsibådeUIWebViewsamtWKWebViewdärresultatensparatsochnoterats.Föranvändarupplevelse-testernaharAppleInstruments[17]använtsförattmätaFPSsamtanvändningavCPUochGPU.AppleInstrumentsärettverktygförattbl.a.dynamisktkunnaanalyserajustgrafiskprestandasamtanvändningenavCPUochGPU.

3.1RiktmärkestesteravJavaScriptDetfinnsfleraJavaScript-”benchmarks”somutvecklatsmedsyftetattförbättrasamtjämföraprestandamellanolikawebbläsare.DessabenchmarksmäterprestandanhosJavaScript-motorngenomattköraenuppsättningtesteravkodsomvanligtvisutgörendelavdagenswebb-applikationer.FördennarapportsändamålattmätaskillnaderiprestandadåJIT-kompileringavJavaScriptanvändsochinte,hartreavdepopulärasteJavaScript-benchmarksenvaltsut.DessatreärWebKitsSunSpider,GooglesOctaneochMozillasKraken.VidprestandatestningavJavaScriptkanresultatenvarierapågrundavskräpsamling(Garbagecollection),olikaoptimeringarsamtandrabakgrundsprocesser[18].Förattfåettsåtillförlitligtresultatsommöjligtsåhardärförallaandraprogramstängtsnedundertestning.Allariktmärkestesternakörvarjeuppsättningavtesterfleragånger.Förettännutillförlitligareresultathardäremotvarjeriktmärkestestdessutomkörtstregångerdärdetbästaresultatetärdetsomsparatsförattförkastadetesterdärminnetändåmöjligtvisinnehållitskräp.3.1.1SunSpider(1.0.2)SunSpiderärettJavaScript-benchmarkutvecklatavApplesWebKit-teamsomuteslutandetestarJavaScript-motornsprestanda[19].Detutveckladesförattjämföraolikaversionerhossammawebbläsare,samtolikawebbläsaremotvarandra.Testetskafokuserapåverkligaproblemsomutvecklareavwebb-applikationeridaglösermedJavaScript.SunSpiderinkluderarföljandetester[20]:

• 3d-RenaJavaScript-beräkningaravdetslagsomvanligtvisutförsvid3D-renderingarochoftainnefattarflyttalsmatematikocharrayåtkomst.

• Access–Arrayåtkomst,åtkomstavobjektochdessattributsamtåtkomstavvariabler.• Bitops–Innefattarbitvisaoperationerochheltalsmatematik.• Controlflow–Testarkonstruktioneravloopar,rekursionochvillkorssatser.• Crypto–Testarkryptografiskkodvilketomfattarbitvisaoperationersamtsträngar.• Date–TestarprestandanhosJavaScriptsdatum-objekt.• Math–Olikamatematiskaberäkningar.• Regexp–Testarreguljärauttryck.• String–Strängbearbetning,extraheringavkomprimeradJavaScript-kod.

SunSpiderstestergerresultatimillisekunderdärettlägreresultatärekvivalentmedettbättreresultat.

7

3.1.2Octane(2.0)Octane2.0ärutvecklatavGoogleochbyggerpåderastidigareJavaScript-benchmark”V8”[21].OctanemäterJavaScript-motornsprestandagenomattköraenuppsättningtestersommotsvarardenJavaScript-kodsomfinnsidagenskomplexaochkrävandewebb-applikationer.Octaneinkluderarföljandetester[22]:

• Richards–Testarframföralltlagringsamthämtningavvariablerochattributhosobjekt.• Deltablue–Testarobjektochpolymorfism.• Crypto–Testarbitvisaoperationer.• Raytrace–Testarflyttalsberäkningar.• EarleyBoyer–Testarobjektallokering,manipulationavdatastrukturersamt

skräpsamling.• Regexp–Testarreguljärauttryck.• Splay–Testarminneshanteringengenomattskapasamtdestrueraobjekt.• SplayLatency–Mäterfördröjningvidskräpsamling.• NavierStokes–Manipulerararrayergenomattläsaochskrivatilldem.Testaräven

flyttalsmatematik.• pdf.js–ImplementationavMozillas”PDFReader”iJavaScript.Mätertidenföravkodning

ochtolkning.• Mandreel–Testaremulering.• MandreelLatency–Testarfördröjningenhoskompilatorn.• GBEmulator–Testaremulering.• CodeLoad–MäterhursnabbtJavaScript-motornkanbörjaexekverakodefterattha

laddatinettstortJavaScript-program.• Box2DWeb–Testarflyttalsmatematik.• Zlib–TestarkompileringsamtexekveringavJavaScript-kod.• Typescript–TestarJavaScript-motornförkomplexaochtungaapplikationerskrivnai

TypeScript.Octanestestergerresultatiettsåkallat”OctaneScore”däretthögtOctaneScoreärbättreänettlågt.

3.1.3Kraken(1.1)KrakenärettJavaScript-benchmarkskapatavMozillasommäterprestandanavenJavaScript-motorgenomenuppsättningtestersomärskapadeefterriktigawebb-applikationerochbibliotek[23].KrakenärbaseratpåWebKitsSunSpiderochinkluderarföljandetester:

• Ai–TestarenimplementationavsökalgoritmenA*.• Audio–Testarbearbetningavljud.• Imaging–Testarbildfiltrering.• Json–ParsningavJSON.• Stanford–Testarkryptografiskkod.

Krakenstestergerresultatimillisekunderdärettlägreresultatärekvivalentmedettbättreresultat.

8

3.2TestavanvändarupplevelseEttstresstestavJavaScript-animeringharkörtsförattmätaskillnadenianvändarupplevelsedåJIT-kompileringavJavaScriptanvändsochinte.Dettestsomharkörts,BunnyMark[24],äretttestsomskapatsavGoodboy[25].TestetärfrånbörjanskapatförattmätaprestandaskillnadenmellanwebGLochHTML5Canvas,samtmellanolikahårdvarorochenheter.BunnyMarkgårutpåattskapaettantalanimeradekaninerdärdetärmöjligtattmanuelltökaantaletskapadekaniner.SamtidigtvisasdenFPSsomlyckasgenererasuppeienahörnetförattgeettmätbartresultatpåhurvälensuppsättningklararavattgenereraJavaScript-animationer.

Figur3.SkärmdumpfrånstresstestetBunnyMark.

BunnyMarkanvänderstats.js[26]föratträknautuppnåddFPSvilketgörsgenomatträknauthurmångagångerpersekundsomeventhanterarenkörs.Detsomärintressantärdockantaletbildrutorpersekundsomwebbläsarenfaktisktlyckasritaut.Eventhanterarenkankörasfleragångerinnanwebbläsarenfaktisktritarutennybildruta,ochdärförkandessaresultatblimissvisandeochvisapåenhögreFPSändenfaktisktuppnådda[27].DärförharAppleInstruments[17]använtsförattmätaFPS,menocksåCPU-ochGPU-användningennärtestetharkörts.TestetharkörtsibådeUIWebViewsamtWKWebViewideniOS-applikationsomtidigareskapats.DeolikawebbvyernaharstresstestatsgenomattökaantaletanimationertillsuppnåddFPSsjunkittillolikanivåer,därantaletanimationerantecknatsförvarjenivå.Denivåersomtittatspåärfrån60fpstill30fpsmedstegvisaintervallerpå5fps.Runt30fpsärvadsomkrävsförattluraögatochgeenbildavenmjukrörelse[28]medanenbildskärmmedenuppdateringsfrekvenspå60Hzkanvisamax60fps.Däravharintervallet30-60fpsvaltsattundersöka.ÄvenCPU-ochGPU-användningenharlästsavviaAppleInstrumentsochantecknatsförvarjenivå.

9

4ResultatIdettakapitelredovisasresultatenfrånderiktmärkestestersamtstresstestersomgjortsideniOS-applikationsomskapatsförändamåletattjämföraprestandaniUIWebViewsamtWKWebView.AllatesterharkörtspåeniPadAir(2013)mediOS8installerat.

4.1RiktmärkestesteravJavaScriptFörprestandajämförelsemellanUIWebViewochWKWebViewsåharJavaScript-testernaSunSpider1.0.2,Octane2.0samtKraken1.1harkörts.Varjetestkördes3gångervarderaienUIWebViewsamtienWKWebViewdärdetbästaresultatetsedanharanväntsijämförelsen.IsamtligatesterpresteradeWKWebViewbättreänUIWebView,ochgrafennedanvisarhurmångagångerbättreWKWebViewpresterade.

Figur4.KvotenförhurmångagångerbättreWKWebViewpresteratideolikariktmärkestesternajämförtmedUIWebView.

10

4.1.1SunSpiderSunSpiderkörettantaltesterochmäterkörningstidenfördessadärettlägreresultatärbättre.Sombästblevdentotalakörningstiden1340msiUIWebViewoch410msiWKWebView,därWKWebViewalltsåpresteradedrygt3gångerbättreänUIWebView.

Figur5.ResultatavSunSpider-testetiUIWebViewsamtWKWebView.

11

Stapeldiagrammetnedanvisarresultatenfråndeenskildatesterna.WKWebViewpresteradebetydligtbättreiallatesterdärskillnadenvidreguljärauttryckstackutspeciellt.

Figur6.DetaljeraderesultatfrånSunSpider-testetiUIWebViewsamtiWKWebView.

12

4.1.2Octane2.0Octanekörettantaltestersomresulterariett“OctaneScore”däretthögreOctaneScoreärbättre.SombästficktestetiUIWebViewettOctaneScorepå985medantestetiWKWebViewresulteradeiettOctaneScorepå6835,ettresultatsomärknappt7gångerbättre.

Figur7.ResultatfrånOctane-testetiUIWebViewsamtiWKWebView.

13

StapeldiagrammetnedanvisarresultatenfråndeenskildatesternadärWKWebViewpresteradebättreiallatesterutomSplayLatency-testet.

Figur8.DetaljeraderesultatfrånOctane-testetiUIWebViewsamtiWKWebView.

14

4.1.3Kraken1.1KraketkörettantaltesterochmäterprecissomSunSpiderkörningstidenfördessa,därettlägreresultatärbättre.Sombästblevdentotalakörningstiden45490msiUIWebViewoch5030msiWKWebView,därtesternaiWKWebViewalltsåtotaltgavett9gångerbättreresultatändeiUIWebView.

Figur9.ResultatfrånKraken-testetiUIWebViewsamtiWKWebView.

15

StapeldiagrammetnedanvisarresultatenfråndeenskildatesternadärsamtligatesterresulteradeikortarekörningstideriWKWebView.Särskiltresultatetförbildfiltreringstestetskiljdesigmycketmellandetvåwebbvyerna.

Figur10.DetaljeraderesultatfrånKraken-testetiUIWebViewsamtiWKWebView.

4.2TestavanvändarupplevelseStresstestetBunnyMarkharkörtsibådeUIWebViewsamtWKWebViewförattsehurJIT-kompileringavJavaScriptpåverkaranvändarupplevelseniformavFPS.AppleInstrumentsharanväntsförattmätaFPSsamtCPU-ochGPU-användning.Webvyernaharstresstestatsgenomattökaantaletanimeradebunniestillsdetattfps-värdetintelängreklaratavatthållavissanivåer.Denivåersomtittatspåär60,55,50,45,40,35samt30fps.4.2.1FPSGrafenpånästasidavisarresultatetförhurmångabunniessomlyckadesanimerasiwebvyernaförvarjegranskadnivåinnanfps-värdetsjönkförlågt.

16

Figur11.ResultatfrånstresstestetBunnyMarkiUIWebViewsamtiWKWebView.Föratthållaettfps-värdepå>30fpsvardetiUIWebViewmöjligtattanimeraca21,600stbunniesmedandetiWKWebViewvarmöjligtattanimeraca38,000st.Kurvanfördetmöjligaantaletanimeradebunnies,dåkravetpåminstafps-värdeökar,ärsedanhyfsatnegativtlinjäribådafallen.Föratthålladetmaximalafps-värdetpå60fpsvardetiUIWebViewmöjligtattanimeraca5,600stbunniesmedandetiWKWebViewvarmöjligtattanimeraca21,000st.4.2.2CPU-ochGPU-användningVidtesternaiUIWebViewlåganvändningenavCPUhyfsatjämnrunt62%utannågonmärkbarskillnaddåantaletbunniesökade.GPU-användningenlågrunt61%vid60fpsförattsedangöraetthopptill79%vid55fps.AnvändningenavGPUlågsedanjämntrunt70%vidresterandetesternert.o.m.30fps.TabellennedanvisarsnittanvändningenavCPUsamtGPUviddeolikanivåernaförfpsiUIWebView.

FPS CPU(%) GPU(%)60 62 6155 62 7850 62 7945 62 7840 61 7935 61 8130 60 79

Tabell1.SnittanvändningavCPUsamtGPUförolikafps-nivåeriUIWebView.

17

TesternaiWKWebViewgavmervarieranderesultatförCPU-ochGPU-användningendärbådeCPU-ochGPU-användningentenderadeattminskaitaktmedattantaletbunniesökadeochuppnåddfpssjönk.Vid60fpslågsnittanvändningenavCPUrunt62%ochGPUrunt94%,medandenvid30fpslågrunt40%avCPUoch85%avGPU.TabellennedanvisarsnittanvändningenavCPUsamtGPUviddeolikanivåernaförfpsiWKWebView.

FPS CPU(%) GPU(%)60 62 9455 60 9850 55 9845 50 9740 46 9435 44 9230 40 85

Tabell2.SnittanvändningavCPUsamtGPUförolikafps-nivåeriWKWebView.

18

5Diskussion

5.1ResultatFrånresultatenärdettydligtattWKWebViewpresteratlångtbättreänUIWebViewisamtligatester,bortsettfrånOctanesSplayLatency-testdärUIWebViewpresterademarginelltbättre.DeriktmärkestestersomgjortsvisarattJavaScript-motorniWKWebViewoftapresterarmellan3-9gångerbättreändeniUIWebView.DåJavaScript-beräkningarärenavdemesttidskrävandedelarnaienwebb-applikation[6][7]såärdettaavstorbetydelseförprestandanhoswebb-ochhybrid-applikationer.ÄvenanvändarupplevelsetestetvisadepåbättreprestandaiWKWebViewjämförtmedUIWebView.Antaletbunniessomvarmöjligtattanimera,ochsamtidigthållasammafps-nivå,varuppemot275%iWKWebViewjämförtmedvadsomvarmöjligtiUIWebView.AllatreriktmärkestesternavisadepåhögreprestandaiWKWebView,däremotgavdetretesternaenganskavarierandemåttstockpåhurpassmycketbättreWKWebViewegentligenpresteratjämförtmedUIWebView.SunSpidersresultatvisadepåenprestandaförbättringmeddrygt300%,Octaneenförbättringmednästan700%ochKrakenenprestandaförbättringmedhela900%.Detblirdärförsvårtatt,endastutifråndessatester,avgörahurmycketbättreWKWebViewpresterarochhurstorinverkanJIT-kompileringharförprestandanhosapplikationerskrivnaiJavaScript.OmmanjämförmedresultatetfrånanvändarupplevelsetestetsåliggerresultatetavSunSpidernärmastdärbådatesternavisarpåenförbättringrunt300%.ÄvenomresultatenfråndessatestervisarpåenstorprestandaförbättringhosJavaScript-motorersomstödjerJIT-kompilering,ärdetdockintesäkertattdettaspeglardenfaktiskaskillnadeniprestandahossjälvawebb-ellerhybrid-applikationen.Studierharvisatpåattbeteendetiwebb-applikationervidexekveringavJavaScriptoftaskiljersigenheldelfråndetsommätsiriktmärkestesterliktdesomkörtsförattutvärderaprestandanidennastudie[29].Däremotvisarresultatenfrånanvändarupplevelsetestetattdetheltklartgårattuppnåbättreanvändarupplevelseienapplikationdåtyngreanimationeruppenbarligenkanutförasochsamtidigthållaenhögrefps-nivå.

5.2MetodDenmetodsomanväntsviddennastudieharvaritattgöraettantaltesteritvåolikawebbvyer,UIWebViewsamtWKWebView,därdenstörstaskillnadenmellandetvåäravsaknadenavJIT-kompileringhosdenförstnämnda.DettaförattmätaochävenkunnaseprestandaskillnadendåJIT-kompileringavJavaScriptanvändsochinte.FörattgöradettamöjligthareniOS-applikationskapatsdärdetvaritmöjligtattläsainwebbsidoriantingenenUIWebViewellerenWKWebView.TrestyckenpopulärariktmärkestesteravJavaScriptharanväntsförrenamätningaravprestandanideolikaJavaScript-motorerna.DessaärWebKitsSunSpider,GooglesOctanesamtMozillasKraken.AlladessatestergavbetydligtbättreresultatförkörningarnaiWKWebViewjämförtmeddeiUIWebView.DäremotgavdeingenvidaremåttstockförhurmycketbättreWKWebViewegentligenpresteratdåskillnadenvarieradeganskakraftigtmellandetre.Troligtvishadedetförändamåletvaritbättreattköranågottestsom,iställetförattköraråaJavaScript-tester,kördenågotsommerspegladeenriktigwebb-applikation.Enapplikationsom

19

användernågraavdevanligasteramverkenochverktygenförwebb-applikationeridagsomt.ex.Backbone.js,jQuery,AngularJSochReact.WebKitharskapatettriktmärkestest,Speedometer,somgerettmåttpåwebb-applikationersresponsivitetgenomattmätasimuleradeanvändarinteraktioner[30].EtttestliknandedettahadeantagligenvaritettbättretestförattmätaprestandanhosdeolikaJavaScript-motorernaochsamtidigtfåenbättreuppfattningavhurJIT-kompileringfaktisktpåverkaranvändarupplevelsen.FörattsehuranvändarupplevelsenkundepåverkasmedtillgångtillJIT-kompileringsåkördesettstresstestidebådawebb-vyernadärfps-nivånövervakadessamtidigtsomtyngreanimationergenererades.ResultatetvisadetydligtpåhögreprestandadåJIT-kompileringanvändesvidkörningiWKWebView.Testetgickutpåattskapasammaanimationfleragånger,ettscenariosomenligtteorinbörpresterabättreienJavaScript-motormedJIT-kompileringdåsammakod-fragmentkankörasettflertalgångerochdärförkankompilerasochkörassommaskinkod.ApplikationerskrivnaiJavaScriptanvänderoftadedynamiskafinessersomspråketerbjuder[31],därolikaelementochobjekttyperdefinierassamtomdefinierasunderkörning.IdessafallärdetmöjligtattJIT-kompileringensnarareskullesänkaprestandan,dådessaapplikationersaknarstörreloop-strukturerochonödigtidochkraftskulleläggaspåattkompilerasmåkodsegmentsomsedanskräpsamlarenfårtahandomnärdessaintebehövslängre.Dethadedärförvaritbraattköraettantaltestersomtestadeolikascenarierförattutvärderaivilkafall,omintealla,somJIT-kompileringhöjerprestandanhosenwebb-applikation.IGreatRatesfallbörtestergörasförprecisdetyperavanimationerochberäkningarsomdefaktiskttänktutföraiderasapplikation,förattfåmerrättvisaresultatförjustderassyfte.Undertestetföranvändarupplevelseniformavfpsanimeradesettantalbunniestillsdetattfps’ensjönktillenvissnivå,ochantaletbunniessomlyckatsanimeratsnoterades.Förenbraanvändarupplevelsekandetdockiblandvaraviktigareatthållaenjämnfpsiställetförenmaximal[16]därfps’eniblandplötsligtsjunker,vilketledertill”jank”.Dettaärdockingetsomtagitsmediberäkningarnaidennastudie,menskullekunnavaraenviktigdetaljdådessaavbrottianimationernatroligtviskanuppståvidtillfällensomnärJIT-kompilatornarbetar,vilketskullekunnabidratillensämreanvändarupplevelse.Omdennastudiemedsammatesterskullegörasigensåhaderesultatenmedstorsannolikhetblivitsnarlika.Allatesterharkörtspåsammaenhet,eniPadAirmediOS8,ochävenomenannanenhetskulleanvändassåskulletroligtvisskillnadeniprestandamellandeolikawebb-vyernabliungefärdensammaävenomsjälvaresultatenskulleskiljasåt.

6SlutsatsResultatenfråndennastudievisarattdetabsolutfinnsstoramöjligheterattökaenwebb/hybrid-applikationsprestandagenomJIT-kompilering,ochdärmedävenanvändarupplevelsen.HurstorinverkanJIT-kompileringenhar,ochomdetärmotdetpositivaellerkansketillochmedåtdetnegativa,berordäremottroligtvisändåpåvadförtypavapplikationdetär.OmmertidhadefunnitshadeettantalflerscenariervaritbraattutvärderaförattfåenbättreuppfattningavJIT-kompileringensinverkanpåolikatyperavwebb-applikationer.DennastudievisarattstorpotentialfinnsförattskapahybridaapplikationerpåiOSmedbättreanvändarupplevelseänvadsomvaritmöjligtinnan,ochdetkanvaralönsamtförGreatRateattväljaattskapaenhybridapplikationiställetförennativ.

20

Referenser[1] T.Cai,L.Li,W.Chou,C.M.Yan,H.Fu,andW.K.Wah,“AVisualMethodtoFind

PerformanceBottlenecksforMobileWebandHybridApplications,”pp.1195–1202,2013.

[2] “IntroducingSwift.”[Online].Available:https://developer.apple.com/swift/.[Accessed:25-May-2015].

[3] “10Mobileappsyoudidn’tknowwerehybrid,”2014.[Online].Available:https://www.yauh.de/top-mobile-apps-you-didnt-know-where-built-on-html5/.[Accessed:25-May-2015].

[4] D.Crawford,“MobileWebAppsareSlow,”2013.[Online].Available:http://sealedabstract.com/rants/mobile-web-apps-are-slow/.[Accessed:25-May-2015].

[5] “UIWebViewClassReference,”2013.[Online].Available:https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIWebView_Class/.[Accessed:25-May-2015].

[6] X.Li,“PerformanceCharacterizationofWebApplicationswithHTML5Enhancements,”2014.

[7] S.-W.LeeandS.-M.Moon,“SelectiveJust-In-TimeCompilationforClient-SideMobileJavaScriptEngine,”2011Proc.14thInt.Conf.Compil.Archit.Synth.Embed.Syst.,pp.5–13,2011.

[8] “IntroducingtheModernWebKitAPI,”2014.[Online].Available:http://asciiwwdc.com/2014/sessions/206.[Accessed:25-May-2015].

[9] A.Ziflaj,“NativevsHybridAppDevelopment,”2014.[Online].Available:http://www.sitepoint.com/native-vs-hybrid-app-development/.[Accessed:27-May-2015].

[10] “WKWebViewClassReference,”2014.[Online].Available:https://developer.apple.com/library/ios/documentation/WebKit/Reference/WKWebView_Ref/index.html#//apple_ref/doc/uid/TP40014624.[Accessed:28-May-2015].

[11] “TheWebKitOpenSourceProject.”[Online].Available:https://www.webkit.org/.[Accessed:28-May-2015].

[12] L.D.Paulson,“Developersshifttodynamicprogramminglanguages,”IEEEComput.Soc.,vol.40,no.2,pp.12–15,2007.

[13] N.Ramanan,“JITThroughtheAges.EvolutionofJust-In-TimeCompilationFromTheoreticalPerformanceImprovementstoSmartphoneRuntimeandBrowserOptimizations,”Web1.Cs.Columbia.Edu.

[14] M.Ubl,“ImprovingthePerformanceofyourHTML5App,”2011.[Online].Available:http://www.html5rocks.com/en/tutorials/speed/html5/.[Accessed:13-Aug-2015].

21

[15] “WebLatencyBenchmark.”[Online].Available:http://google.github.io/latency-benchmark/.[Accessed:13-Aug-2015].

[16] A.Osmani,“GoneIn60FramesPerSecond:APinterestPaintPerformanceCaseStudy,”2013..

[17] “AppleInstruments,”2014.[Online].Available:https://developer.apple.com/library/mac/documentation/DeveloperTools/Conceptual/InstrumentsUserGuide/Introduction/Introduction.html.[Accessed:27-Jul-2015].

[18] M.BynensandJ.-D.Dalton,“BulletproofJavaScriptbenchmarks,”2010.[Online].Available:http://calendar.perfplanet.com/2010/bulletproof-javascript-benchmarks/.

[19] “SunSpider1.0.2JavaScriptBenchmark.”[Online].Available:https://www.webkit.org/perf/sunspider/sunspider.html.[Accessed:01-Jun-2015].

[20] J.Atwood,“TheGreatBrowserJavaScriptShowdown,”2007.[Online].Available:http://blog.codinghorror.com/the-great-browser-javascript-showdown/.[Accessed:27-Jul-2015].

[21] “Octane.”[Online].Available:https://developers.google.com/octane/.[Accessed:01-Jun-2015].

[22] “AboutOctane2.0,”2013.[Online].Available:https://developers.google.com/octane/benchmark.[Accessed:27-Jul-2015].

[23] “Kraken.”[Online].Available:https://wiki.mozilla.org/Kraken.[Accessed:01-Jun-2015].

[24] I.Lobb,A.Lobb,andGoodboy,“Bunnymark,”2013..

[25] “Goodboy,”2014.[Online].Available:http://www.goodboydigital.com/.[Accessed:29-Jul-2015].

[26] “stats.js,”2015.[Online].Available:https://github.com/mrdoob/stats.js/.[Accessed:29-Jul-2015].

[27] R.O’Callahan,“MeasuringFPS,”2010.[Online].Available:http://robert.ocallahan.org/2010/11/measuring-fps_26.html.[Accessed:29-Jul-2015].

[28] M.Maule,A.Maciel,andL.Nedel,“Efficientcollisiondetectionandphysics-baseddeformationforhapticsimulationwithlocalsphericalhash,”Proc.-23rdSIBGRAPIConf.Graph.PatternsImages,SIBGRAPI2010,pp.9–16,2010.

[29] J.K.Martinsen,H.Grahn,andA.Isberg,“UsingspeculationtoenhanceJavaScriptperformanceinwebapplications,”IEEEInternetComput.,vol.17,no.2,pp.10–19,2013.

[30] R.Niwa,“Speedometer:BenchmarkforWebAppResponsiveness,”2014.[Online].Available:https://www.webkit.org/blog/3395/speedometer-benchmark-for-web-app-responsiveness/.[Accessed:12-Aug-2015].

22

[31] J.K.MartinsenandH.Grahn,“AmethodologyforevaluatingJavaScriptexecutionbehaviorininteractivewebapplications,”Proc.IEEE/ACSInt.Conf.Comput.Syst.Appl.AICCSA,pp.241–248,2011.