jQuery Mobile: Optimizing Perfromance

jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward

Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz

What have you done for me lately?



About me:• 16 Years experience in

web development

• jQuery Mobile Development Lead

• jQuery UI Team member

• Current focus: Mobile and UI merger



Now to answer my own question…

➡ What have we done for you lately??What have we done for you lately??

➡ jQuery Mobile 1.4.1 comingjQuery Mobile 1.4.1 coming

➡ Lots of bug fixesLots of bug fixes

➡ Major swipe and panel fixesMajor swipe and panel fixes

➡ Over 60 bug fixes Over 60 bug fixes

➡ What have we done for you lately??What have we done for you lately??

➡ jQuery Mobile 1.4.1 comingjQuery Mobile 1.4.1 coming

➡ Lots of bug fixesLots of bug fixes

➡ Major swipe and panel fixesMajor swipe and panel fixes

➡ Over 60 bug fixes Over 60 bug fixes



I don’t know about you but waiting drives me nuts!



Why is mobile performance so

important?

This comes down to 2 main components

1.) Cellular connection

2.) Device hardware performance





Time Warner Cable Road Runner Basic Service



AT&T 3G

Service



On average mobile devices are

3X Slower!



Simplify your pages!

➡ Reduce the widgets in each pageReduce the widgets in each page

➡ Reduce the size of your pagesReduce the size of your pages

➡ Limit the size of your lists and tablesLimit the size of your lists and tables

➡ Use paginationUse pagination

➡ Just like this list should be reducedJust like this list should be reduced

➡ Reduce the widgets in each pageReduce the widgets in each page

➡ Reduce the size of your pagesReduce the size of your pages

➡ Limit the size of your lists and tablesLimit the size of your lists and tables

➡ Use paginationUse pagination

➡ Just like this list should be reducedJust like this list should be reduced



To reduce download time and http requests make sure you ...

➡ Combine all scripts Combine all scripts

➡ Combine all cssCombine all css

➡ Minify all scripts and cssMinify all scripts and css

➡ Do not include scripts in the pageDo not include scripts in the page

➡ Consider multi-page templateConsider multi-page template

➡ Combine all scripts Combine all scripts

➡ Combine all cssCombine all css

➡ Minify all scripts and cssMinify all scripts and css

➡ Do not include scripts in the pageDo not include scripts in the page

➡ Consider multi-page templateConsider multi-page template



Multi-Page Template

➡ Load all pages with single requestLoad all pages with single request

➡ Reduces Number of HTTP requestsReduces Number of HTTP requests

➡ Faster page load Faster page load

➡ Faster TransitionsFaster Transitions

➡ Has its limitations...Has its limitations...

➡ Load all pages with single requestLoad all pages with single request

➡ Reduces Number of HTTP requestsReduces Number of HTTP requests

➡ Faster page load Faster page load

➡ Faster TransitionsFaster Transitions

➡ Has its limitations...Has its limitations...



Multi-Page TemplateLimitations

➡ Slower initial page downloadSlower initial page download

➡ Leads to a large DomLeads to a large Dom

➡ Uses more system memory Uses more system memory

➡ cannot load multi page via AJAXcannot load multi page via AJAX

➡ Not good for large # of pagesNot good for large # of pages

➡ Slower initial page downloadSlower initial page download

➡ Leads to a large DomLeads to a large Dom

➡ Uses more system memory Uses more system memory

➡ cannot load multi page via AJAXcannot load multi page via AJAX

➡ Not good for large # of pagesNot good for large # of pages



<!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>

<div data-role="content"><p>Page content goes here.</p>

</div>

<div data-role="footer"><h4>Page Footer</h4>

</div></div>

</body></html>

Typical Single-Page Document



Downfalls of Single Page

➡ Everything sent with every requestEverything sent with every request

➡ Only first div with data-role=”page” Only first div with data-role=”page” usedused

➡ Unused information sent with requestsUnused information sent with requests

➡ Unused info leads to extra processing Unused info leads to extra processing and bytes transferredand bytes transferred

➡ Everything sent with every requestEverything sent with every request

➡ Only first div with data-role=”page” Only first div with data-role=”page” usedused

➡ Unused information sent with requestsUnused information sent with requests

➡ Unused info leads to extra processing Unused info leads to extra processing and bytes transferredand bytes transferred



Add some server side processing to optimize the template

<?phpif (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {

?><!DOCTYPE html><html><head>




</head><body><?php } ?><div data-role="page">






</div></div><?php

if (!isset($_SERVER['HTTP_X_REQUESTED_WITH']) || strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {?></body></html><?php } ?>



This reduces what is sent during ajax requests to:

<div data-role="page">






</div></div>



Starting in jQuery Mobile 1.4 widgets can be used outside

pages

So lets take our updated template 1 step further...



Final version of the single page template


?><!DOCTYPE html><html><head>




</head><body>



<?php } ?>

<div data-role="page"><div data-role="content">

<p>Page content goes here.</p></div>

</div>


?><div data-role="footer">

<h4>Page Footer</h4></div>

</body></html><?php } ?>



Making the final markup sent during an ajax request:

<div data-role="page"><div data-role="content">

<p>Page content goes here.</p></div>

</div>

Is it just me or does this page look really empty???



The updated template...

➡ Reduces bytes transferredReduces bytes transferred

➡ Reduces markup needing to be Reduces markup needing to be parsedparsed

➡ avoids init of common nav elementsavoids init of common nav elements

➡ Smoother transitionsSmoother transitions

➡ Faster page loadsFaster page loads

➡ Reduces bytes transferredReduces bytes transferred

➡ Reduces markup needing to be Reduces markup needing to be parsedparsed

➡ avoids init of common nav elementsavoids init of common nav elements

➡ Smoother transitionsSmoother transitions

➡ Faster page loadsFaster page loads



Custom Builds...

➡ Reduce files sizeReduce files size

➡ Reduce library initialization timeReduce library initialization time

➡ Reduce page initialization timeReduce page initialization time

➡ Allow you to remove parts of the Allow you to remove parts of the library you don’t needlibrary you don’t need

➡ Reduce files sizeReduce files size

➡ Reduce library initialization timeReduce library initialization time

➡ Reduce page initialization timeReduce page initialization time

➡ Allow you to remove parts of the Allow you to remove parts of the library you don’t needlibrary you don’t need



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 workarounds•Loading Widget

Reduces JSby 50%

Reduces CSS

by 80%



1.4 brings a new theme to minimize Dom manipulationPre-

enhancement

1.3 Post-enhance

1.4 Post-enhance

<button>Button</button>

<button class="ui-btn ui-shadow ui-corner-all" role="button">Button</button>

<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>



Consider skipping auto-enhancement and widget use

for buttons and listviews.

➡ Avoid all Dom-manipAvoid all Dom-manip

➡ Avoid all associated JSAvoid all associated JS

➡ Exclude widgets from custom buildExclude widgets from custom build

➡ Only need to add classesOnly need to add classes

➡ Two of the most used widgetsTwo of the most used widgets

➡ Avoid all Dom-manipAvoid all Dom-manip

➡ Avoid all associated JSAvoid all associated JS

➡ Exclude widgets from custom buildExclude widgets from custom build

➡ Only need to add classesOnly need to add classes

➡ Two of the most used widgetsTwo of the most used widgets



New in 1.4: The enhanced

optionTells 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



Widgets which currently support enhanced option:

➡Textinput

➡Button

➡Toolbars

➡Flipswitch

➡Controlgroup

➡Collapsible

➡Collapsible Set

➡Popup

➡Table

➡Page



New in 1.4 the defaults flag.

by setting data-defaults=”true” you can now skip the reading of data-attribute defaults.



New in 1.4 $.mobile.window & $.mobile.document

replaces $(window) & $(document)



Don’t use auto initialization.

➡ Easy short cut but sacrifice Easy short cut but sacrifice performanceperformance

➡ Has to traverse the dom looking for Has to traverse the dom looking for attributes ( very slow selector )attributes ( very slow selector )

➡ Leave off data-roles and set keepNativeLeave off data-roles and set keepNative

➡ Call widgets in js as you would in UICall widgets in js as you would in UI

➡ Easy short cut but sacrifice Easy short cut but sacrifice performanceperformance

➡ Has to traverse the dom looking for Has to traverse the dom looking for attributes ( very slow selector )attributes ( very slow selector )

➡ Leave off data-roles and set keepNativeLeave off data-roles and set keepNative

➡ Call widgets in js as you would in UICall widgets in js as you would in UI



In addition…

➡ Don’t use data-attributes for optionsDon’t use data-attributes for options

➡ parsing these is very slowparsing these is very slow

➡ Make sure you set new Defaults flagMake sure you set new Defaults flag

➡ pass options object to widget when pass options object to widget when you call it.you call it.

➡ Don’t use data-attributes for optionsDon’t use data-attributes for options

➡ parsing these is very slowparsing these is very slow

➡ Make sure you set new Defaults flagMake sure you set new Defaults flag

➡ pass options object to widget when pass options object to widget when you call it.you call it.



What we are looking into for the future.



Initialization Free Widgets

➡ Makes it so you don’t need to initialize a Makes it so you don’t need to initialize a widgetwidget

➡ Write your markup and just works no need Write your markup and just works no need to call the widgetto call the widget

➡ looking into this for the far futurelooking into this for the far future

➡ http://tech.pro/tutorial/1660/initialization-free-widgets

➡ No current plansNo current plans

➡ Makes it so you don’t need to initialize a Makes it so you don’t need to initialize a widgetwidget

➡ Write your markup and just works no need Write your markup and just works no need to call the widgetto call the widget

➡ looking into this for the far futurelooking into this for the far future

➡ http://tech.pro/tutorial/1660/initialization-free-widgets

➡ No current plansNo current plans



High Performance CSS framework

➡ Learned from original mobile theme, 1.4 theme, Learned from original mobile theme, 1.4 theme, UI themeUI theme

➡ BEM class structureBEM class structure

➡ Rendering performance testsRendering performance tests

➡ Shared by UI and MobileShared by UI and Mobile

➡ Very early workVery early work

➡ Learned from original mobile theme, 1.4 theme, Learned from original mobile theme, 1.4 theme, UI themeUI theme

➡ BEM class structureBEM class structure

➡ Rendering performance testsRendering performance tests

➡ Shared by UI and MobileShared by UI and Mobile

➡ Very early workVery early work



[email protected]

Now thats true native behavior!

Date post:	01-Nov-2014
Category:	Technology
Upload:	alexander-schmitz
View:	5,568 times
Download:	1 times

jQuery Mobile: Optimizing Perfromance

Technology