Date of acceptance Grade Instructor Performance of Ajax applications on mobile devices Mikko Pervilä Helsinki February 5th, 2008 UNIVERSITY OF HELSINKI Department of Computer Science HELSINGIN YLIOPISTO HELSINGFORS UNIVERSITET – UNIVERSITY OF HELSINKI Tiedekunta/Osasto Fakultet/Sektion –Faculty/Section Laitos Institution Department Faculty of Science Department of Computer Science TekijäFörfattare Author Mikko Pervilä Työn nimi Arbetets titel Title Performance of Ajax applications on mobile devices Oppiaine Läroämne Subject Computer Science Työn laji Arbetets art Level Aika Datum Month and year Sivumäärä Sidoantal Number of pages M.Sc. Thesis 5.2.2008 88 pages + appendix 20 pages Tiivistelmä Referat Abstract The Ajax approach has outgrown its origin as shorthand for “Asynchronous JavaScript + XML”. Three years after its naming, Ajax has become widely adopted by web applications. Therefore, there exists a growing interest in using those applications with mobile devices. This thesis evaluates the presentational capability and measures the performance of five mobile browsers on the Apple iPhone and Nokia models N95 and N800. Performance is benchmarked through user-experienced response times as measured with a stopwatch. 12 Ajax toolkit examples and 8 production-quality applications are targeted, all except one in their real environments. In total, over 1750 observations are analyzed and included in the appendix. Communication delays are not considered; the network connection type is WLAN. Results indicate that the initial loading time of an Ajax application can often exceed 20 seconds. Content reordering may be used to partially overcome this limitation. Proper testing is the key for success: the selected browsers are capable of presenting Ajax applications if their differing implementations are overcome, perhaps using a suitable toolkit. ACM Computing Classification System (CCS): C.4 [Performance of Systems]: Performance attributes; H.3.5 [Information Storage and Retrieval]: Online Information Services---Web-based services; H.5.4 [Information Interface and Presentation]: Hypertext/Hypermedia---Architectures, Navigation, User issues; H.5.2 [Information Interface and Presentation]: User Interfaces; D.3.2 [Programming Languages]: Language Classifications---Concurrent, distributed, and parallel languages, JavaScript; C.2.4 [Computer-communication Networks]: Distributed systems---Client/Server, Distributed Applications Avainsanat – Nyckelord Keywords Ajax mobile devices performance web applications DHTML JavaScript Säilytyspaikka Förvaringställe Where deposited Muita tietoja Övriga uppgifter Additional information ii Content 1 Introduction 1 2 The History of Ajax 4 2.1 From Web to Desktop Applications.....................................................................5 2.2 Ajax Builds on Existing Technology....................................................................6 2.2.1 JavaScript......................................................................................................7 2.2.2 XMLHttpRequest..........................................................................................8 2.2.3 Asynchronous Events....................................................................................9 2.2.4 XML and Verbosity....................................................................................10 2.2.5 Displaying CSS...........................................................................................10 2.2.6 Document Object Models...........................................................................11 2.3 Alternative Techniques.......................................................................................13 2.3.1 Dynamic HTML..........................................................................................13 2.3.2 Delayed Inclusion........................................................................................14 2.3.3 Hidden IFrame............................................................................................14 2.3.4 Comet and HTTP Pipelining.......................................................................15 2.3.5 Flash and Java.............................................................................................17 3 Measuring Mobile Devices 17 3.1 Capability and Performance................................................................................18 3.2 Motivation for Mobile Ajax................................................................................19 3.3 Research Questions and Methodology................................................................20 3.3.1 Grading and Results....................................................................................21 3.3.2 Measurement Method..................................................................................21 3.4 Nokia N800 Internet Tablet................................................................................22 3.4.1 Opera...........................................................................................................23 3.4.2 Mozilla based browser for maemo..............................................................24 3.4.3 GTK+ WebCore..........................................................................................24 3.5 N95......................................................................................................................25 3.5.1 Nokia Mini Map Browser...........................................................................26 3.5.2 Opera Mobile..............................................................................................26 3.6 iPhone.................................................................................................................27 3.6.1 Safari...........................................................................................................27 iii 4 Libraries, Toolkits, and Frameworks 28 4.1 Graphics display..................................................................................................29 4.2 Selection and Manipulation................................................................................29 4.3 Widgets...............................................................................................................30 4.4 A Look into the Most Popular Toolkits..............................................................30 4.4.1 How to Read the Results.............................................................................32 4.4.2 Prototype.....................................................................................................33 4.4.3 script.aculo.us..............................................................................................34 4.4.4 jQuery..........................................................................................................36 4.4.5 Yahoo! User Interface Library....................................................................37 4.4.6 Dojo.............................................................................................................38 4.4.7 Ext JS..........................................................................................................39 4.4.8 Google Gears and Web Toolkit...................................................................41 4.4.9 Direct Web Remoting.................................................................................42 4.4.10 MooTools..................................................................................................44 4.4.11 moo.fx.......................................................................................................46 4.4.12 ASP.NET AJAX.......................................................................................47 4.4.13 Frost Ajax Library.....................................................................................48 5 Surfing Web Sites with Ajax 50 5.1 How to Read the Results.....................................................................................50 5.2 Google.................................................................................................................51 5.2.1 Google Maps...............................................................................................51 5.2.2 Google Suggest...........................................................................................52 5.2.3 Google Mail................................................................................................54 5.3 Yahoo! Mail........................................................................................................55 5.4 Flickr...................................................................................................................56 5.5 Journey Planner for Cycling...............................................................................57 5.6 Colorado Geographic..........................................................................................59 5.7 myAOL...............................................................................................................60 6 Considerations 62 6.1 Cross-Site Scripting Attacks...............................................................................62 6.2 Cross-Site Request Forgery................................................................................63 6.3 External References............................................................................................64 6.4 Caching Problems...............................................................................................65