Download - 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?
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
About me:• 16 Years experience in
web development
• jQuery Mobile Development Lead
• jQuery UI Team member
• Current focus: Mobile and UI merger
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
I don’t know about you but waiting drives me nuts!
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
Why is mobile performance so
important?
This comes down to 2 main components
1.) Cellular connection
2.) Device hardware performance
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
Time Warner Cable Road Runner Basic Service
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
AT&T 3G
Service
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
On average mobile devices are
3X Slower!
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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...
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
<!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>
Typical Single-Page Document
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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>
<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 } ?>
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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 -->
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
Starting in jQuery Mobile 1.4 widgets can be used outside
pages
So lets take our updated template 1 step further...
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
Final version of the single page template
<?phpif (!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 -->
<?phpif (!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 } ?>
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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???
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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%
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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>
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
Widgets which currently support enhanced option:
➡Textinput
➡Button
➡Toolbars
➡Flipswitch
➡Controlgroup
➡Collapsible
➡Collapsible Set
➡Popup
➡Table
➡Page
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
New in 1.4 the defaults flag.
by setting data-defaults=”true” you can now skip the reading of data-attribute defaults.
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
New in 1.4 $.mobile.window & $.mobile.document
replaces $(window) & $(document)
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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.
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
What we are looking into for the future.
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
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
jQuery Mobile: Optimizing PerformancejQuery Mobile: Optimizing PerformanceBack Forward
Alex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitzAlex Schmitz IRC: arschmitz - Github: arschmitz - Twitter: @alexrschmitz
Now thats true native behavior!