jQuery Mobile: Optimizing Perfromance

  • 5,958 views
Uploaded on

Performance is a major concern on mobile platforms. jQuery Mobile 1.4 adds a number of performance related options and features to help you speed up your mobile site along with a new theme designed to …

Performance is a major concern on mobile platforms. jQuery Mobile 1.4 adds a number of performance related options and features to help you speed up your mobile site along with a new theme designed to make your site render as fast as possible. Learn Tips and tricks to make your site as fast as it can. Covered in this talk will be not only framework optimizations but server side tricks to minimize transfer but page initialization times.

Topics covered will include:

Custom Builds
Providing pre-rendered content to avoid dom manipulation (New in 1.4)
Skipping parsing data-attributes when defaults are OK (New in 1.4)
Including common navigation components outside the page to avoid re downloading and initializing on every page load (New in 1.4)
Avoiding sending unneeded page sections from server on ajax requests (while maintaining the ability to refresh)
Taking advantage of new theme to avoid need for enhancement (New in 1.4)
1.4.1 released

Upcoming work on performance:
New high performance css framework
initialization free widgets
General mobile performance best practices and tips

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
5,958
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
44
Comments
1
Likes
5

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Hi my name is Alex Schmitz and im going to talk about optimizing performance in jquery mobile.
  • a little bit about me...
    im the jQuery mobile development lead i spend aprox 50% of my time on jQuery and the other 50% working with car dealerships to develop responsive web sites and custom sales solutions
    like text messaging applications to answer customers questions who are on the lot when they are closed
  • so why is optimizing perfromance on jquery mobile so important...
    well i hope you already have a good idea the answer to this question but incase you dont it comes down to two major concerns the speed of cellular connections and device hardware performance
  • this chart shows sunspider benchmark results for various mobile devices and desktop browser and averages for each category. these results are not meant to be quantative but just to give you an idea of the performance issues we face. developing for the mobile web.
  • this is the speedof.me result for my home TWC roadrunner connection we get approx 15 down and 1 up
  • now moving to a 3g cellular connection we see a huge drop in speed
  • looking at both of these sets of sample results we see that mobile devices are about 3 times slower on average in both tests.
  • One of the best performance tips i can give is to really look at the elements and widgets which you are placing in your page. Do all of them really need to be there? can you simplify it? On a very basic level the smaller your page and the simpler it is the quicker it will load.
  • one of the best ways to minimize the effects of a slow connection is to reduce http requests some quick best practice to do this are to combine and minify all scripts and css. And in jquery mobile dont include scripts in the body of your pages. many people do this in jquery mobile to work around the head pof pages not being used during ajax navigation. however this creates additional requests and can lead to a lot fo other problems i wont get into. Another jquery mobile specific thing to consider to reduce requests is to considder the multi page template.
  • the multi page template has the benifits of loading all your pages with a single request so it reduces the number of requests has near instant page loads after the first page and much faster transitions. however it does have its limitations
  • The multi page template has a slower inital page load, leads to a very large dom depending on the number of pages you have and uses a lot more memory to store all these pages. another limitation is that currently you cannot load multi page documents via ajax. so it really comes down to the complexity of your site or app and the number of pages you have. if you have a lot of pages or a complex app this is probably not for you.
  • so now lets look at the single page template. This is just the template copied directly from our demos site. it looks like a typical html document with just some special structure for the jquery mobile page model.
  • The down falls of the template become apparent when you start doing ajax navigation and look at the actual information sent with each request. with this template every thing is sent with every request even though the head is essentially discarded along with everything else execpt for the first div with a data role of page. so there is a lot of unused information sent with every request that is not only un-needed it just adds extra for us to parse.
  • so lets add a little server side magic to improve this this sample uses php but you can use whatever server side language you prefer. what i have added here is a check to the request with header to see if this is an ajax request. If it is an ajax request all we need to send back the page div because jquery mobile will just discard everything else anyway so why send it?
  • so now this is all we are sending back from the server if its an ajax request its a lot smaller in terms of transfer size and requires almost no parsing.
  • now starting in jquery mobile 1.4 we can take this template even a step further by including common navigation elements outside of the page.
  • so now our final version of the optimized single page template looks like this the page only contains our content and our toolbars are within the body and wrapped in this check for an ajax request. by also including these in our check we ensure that if someone refreshes all the needed information will be sent but if its an ajax request we no these are not needed. this not only saves bytes transfered but saves us from having to initalize these widgets on every page load improving our javascript performance.
  • so the information sent from the server in our final version of the template on an ajax request is just this. Is it just me or is this page looking empty compared to our initial version?
  • Our updated template now has the advantages of reducing the amount of data transferred it reduces the amount of markup that needs to be parsed to pull out what we need. it avoids re initializing common navigation elements on every page load. it has improved transition performance and faster pages loads.
  • One of the single most important steps you can take to improve your app performance is to use a custom build. i can almost guarantee that no one in here has a site or app that uses every single part of the library so if your not using a custom build your loading features you don't need? Custom builds will reduce your file size, reduce library initialization time reduce each pages initalization time by not needing to look for all kinds of widget that you know will never bee there and you get to just take out the parts you dont need!
  • Doing a custom build including these common components we can immediately see how big a difference this can make in the file size. our jaascript file has been reduced by 50% and our css has been reduced by an amazing 80%. A big part of why the css is so much smaller is transitions by default jquery mobile includes 14 transitions but in most places people only use 1 or 2
  • Another great performance improvment we have made in 1.4 is a simplified theme and markup structure. here you can see the markup you write just a simple button element and what it looked like after enhancement in 1.3 and what it looks like in 1.4. you will notice we have removed all wrappers and child elements and it is just a set of 3 classes. this avoids a ton of dom manipulation.
  • now you may be wondering looking at the final button well if all it is is 3 classes why do it with javascript at all? and you are right to wonder this and infact we encourage you to do it your self buttons and listviews are 2 of the most commonly used widgets in jquery mobile and now with the simplified structure you can skip autoenhancemnt of these widgets by not adding a data role and just adding the classes your self. this will allow you to avoide all dom manipulation and javascript completely and dramaticly improve your page load times.
  • another option we have given you in 1.4 is a new option called enhanced. This option tells the widget that you have already provided the markup in its final enhanced form so all we need to do is attach event handlers and set variables this avoids all inital dom manipulation to once again improve your page load times
  • unfourtanitly we didnt get to add this option to every single widget currently in jquery mobile we wanted to but we just ran out of time. so it is currently available on these widgets.
  • by setting data-defaults to true we will now skip checking for data attribute options. When we were looking at performance for 1.4 one thing we found is that check data attributes for options is a very slow process. and very often these options are never used because the defaults are fine. so now by setting defaults to true we will not check any other data attributes
  • these are variables we use internally to avoid js overhead. We found that we were calling the jquery function on window and document in a lot of places and while the jquery function is very fast calling it repeatedly on the same thing just adds process thats not needed when we can do it once and save a reference. so now you can take advantage of this in your own code too. just make sure you only use it in code that runs after jquery mobile is loaded
  • i this this is going to wrap it up for what i have today are there any questions?

Transcript

  • 1. Bac k jQuery Mobile: Optimizing Performance Forwar d What have you done for me lately? Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 2. Bac k jQuery Mobile: Optimizing Performance Forwar d About me: • 16 Years experience in web development • jQuery Mobile Development Lead • jQuery UI Team member • Current focus: Mobile and UI merger Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 3. Bac k jQuery Mobile: Optimizing Performance Forwar d Now to answer my own question… ➡ ➡ ➡ ➡ ➡ What have we done for you lately?? jQuery Mobile 1.4.1 coming Lots of bug fixes Major swipe and panel fixes Over 60 bug fixes Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 4. Bac k jQuery Mobile: Optimizing Performance Forwar d I don’t know about you but waiting drives me nuts! Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 5. Bac k jQuery Mobile: Optimizing Performance Forwar d Why is mobile performance so important? This comes down to 2 main components 1.) Cellular connection 2.) Device hardware performance Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 6. Bac k jQuery Mobile: Optimizing Performance Forwar d Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 7. Bac k jQuery Mobile: Optimizing Performance Forwar d Time Warner Cable Road Runner Basic Service Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 8. Bac k jQuery Mobile: Optimizing Performance Forwar d AT&T 3G Service Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 9. Bac k jQuery Mobile: Optimizing Performance Forwar d On average mobile devices are 3X Slower! Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 10. Bac k jQuery Mobile: Optimizing Performance Forwar d Simplify your pages! ➡ ➡ ➡ ➡ ➡ Reduce the widgets in each page Reduce the size of your pages Limit the size of your lists and tables Use pagination Just like this list should be reduced Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 11. Bac k jQuery Mobile: Optimizing Performance Forwar d To reduce download time and http requests make sure you ... ➡ ➡ ➡ ➡ ➡ Combine all scripts Combine all css Minify all scripts and css Do not include scripts in the page Consider multi-page template Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 12. Bac k jQuery Mobile: Optimizing Performance Forwar d Multi-Page Template ➡ ➡ ➡ ➡ ➡ Load all pages with single request Reduces Number of HTTP requests Faster page load Faster Transitions Has its limitations... Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 13. Bac k jQuery Mobile: Optimizing Performance Multi-Page Template Limitations Limitations ➡ ➡ ➡ ➡ ➡ Forwar d Slower initial page download Leads to a large Dom Uses more system memory cannot load multi page via AJAX Not good for large # of pages Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 14. Bac k jQuery Mobile: Optimizing Performance Forwar d Typical Single-Page Document <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html> Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 15. Bac k jQuery Mobile: Optimizing Performance Forwar d Downfalls of Single Page ➡ ➡ ➡ ➡ Everything sent with every request Only first div with data-role=”page” used Unused information sent with requests Unused info leads to extra processing and bytes transferred Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 16. Bac k jQuery Mobile: Optimizing Performance Forwar d Add some server side processing to optimize the template <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script> </head> <body> <?php } ?> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> </body> </html> <?php } ?> Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 17. Bac k jQuery Mobile: Optimizing Performance Forwar d This reduces what is sent during ajax requests to: <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 18. Bac k jQuery Mobile: Optimizing Performance Forwar d Starting in jQuery Mobile 1.4 widgets can be used outside pages So lets take our updated template 1 step further... Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 19. Bac k jQuery Mobile: Optimizing Performance Forwar d Final version of the single page template <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.0-alpha.2/jquery.mobile-1.4.0-alpha.2.min.js"></script> </head> <body> <div data-role="header"> <h1>Page Title</h1> </div><!-- /header --> <?php } ?> <div data-role="page"> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> </div><!-- /page --> <?php if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') { ?> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </body> </html> <?php } ?> Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 20. Bac k jQuery Mobile: Optimizing Performance Forwar d Making the final markup sent during an ajax request: <div data-role="page"> <div data-role="content"> <p>Page content goes here.</p> </div><!-- /content --> </div><!-- /page --> Is it just me or does this page look really empty??? Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 21. Bac k jQuery Mobile: Optimizing Performance Forwar d The updated template... ➡ ➡ ➡ ➡ ➡ Reduces bytes transferred Reduces markup needing to be parsed avoids init of common nav elements Smoother transitions Faster page loads Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 22. Bac k jQuery Mobile: Optimizing Performance Forwar d Custom Builds... ➡ ➡ ➡ ➡ Reduce files size Reduce library initialization time Reduce page initialization time Allow you to remove parts of the library you don’t need Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 23. Bac k jQuery Mobile: Optimizing Performance Forwar d A custom build which includes... •Full page and navigation support •All custom events •Slide Transition •Flipswitch •Checkboxs and Radios •Textinputs •Listviews •Panels •Popups •Tables •Column Toggle Tables •Toolbars •Fixed Toolbars with Reduces JS by 50% Reduces CSS by 80% workarounds •Loading Widget Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 24. Bac k jQuery Mobile: Optimizing Performance Forwar d 1.4 brings a new theme to minimize Dom manipulation Pre-enhancement <button>Button</button> 1.3 Post-enhance <div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-disabled="false" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false"> <span class="ui-btn-inner"> <span class="ui-btn-text">Button</span> </span> <button class="ui-btn-hidden" data-disabled="false">Button</button> </div> 1.4 Post-enhance <button class="ui-btn ui-shadow ui-corner-all" role="button">Button</button> Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 25. Bac k jQuery Mobile: Optimizing Performance Forwar d Consider skipping auto-enhancement and widget use for buttons and listviews. ➡ ➡ ➡ ➡ ➡ Avoid all Dom-manip Avoid all associated JS Exclude widgets from custom build Only need to add classes Two of the most used widgets Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 26. Bac k jQuery Mobile: Optimizing Performance Forwar d New in 1.4: The enhanced option Tells the frame work that the Dom is already in a post enhanced state. Removes the need for all Dom manipulation on initialization so all that needs to be done is attach handlers and set variables Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 27. Bac k jQuery Mobile: Optimizing Performance Forwar d Widgets which currently support enhanced option: ➡Textinput ➡Button ➡Toolbars ➡Flipswitch ➡Controlgroup ➡Collapsible Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 28. Bac k jQuery Mobile: Optimizing Performance Forwar d New in 1.4 the defaults flag. by setting data-defaults=”true” you can now skip the reading of data-attribute defaults. Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 29. Bac k jQuery Mobile: Optimizing Performance Forwar d New in 1.4 $.mobile.window & $.mobile.document replaces $(window) & $(document) Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 30. Bac k jQuery Mobile: Optimizing Performance Forwar d Don’t use auto initialization. ➡ ➡ ➡ ➡ Easy short cut but sacrifice performance Has to traverse the dom looking for attributes ( very slow selector ) Leave off data-roles and set keepNative Call widgets in js as you would in UI Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 31. Bac k jQuery Mobile: Optimizing Performance Forwar d In addition… ➡ ➡ ➡ ➡ Don’t use data-attributes for options parsing these is very slow Make sure you set new Defaults flag pass options object to widget when you call it. Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 32. Bac k jQuery Mobile: Optimizing Performance Forwar d What we are looking into for the future. Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 33. Bac k jQuery Mobile: Optimizing Performance Forwar d Initialization Free Widgets ➡ ➡ ➡ ➡ ➡ Makes it so you don’t need to initialize a widget Write your markup and just works no need to call the widget looking into this for the far future http://tech.pro/tutorial/1660/initialization-free-widgets No current plans Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 34. Bac k jQuery Mobile: Optimizing Performance Forwar d High Performance CSS framework ➡ ➡ ➡ ➡ ➡ Learned from original mobile theme, 1.4 theme, UI theme BEM class structure Rendering performance tests Shared by UI and Mobile Very early work Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz
  • 35. Bac k jQuery Mobile: Optimizing Performance Forwar d Now thats true native behavior! arschmitz@gmail.com Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @ alexrschmitz