Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
The Mobile Web - HTML5 on mobile devices
1. The Mobile Web - HTML5 on mobile devices
HTML5 User Group - Atlanta
By: Wesley Hales
@wesleyhales
2. Wesley Hales
• Senior Developer at Red Hat @w
esle
• W3C Member yha
les
• JSR 301/329 Rep.
• HTML5 User Group Founder
• html5rocks.com, DZone Refcard, and author of
many other articles around the web.
5. Top 5 Best Practices
When working with HTML5
1) Use client side DBs instead of server round trips
2) Use CSS transitions instead of JavaScript animations
(Enable hardware acceleration)
3) Boost performance with JavaScript 1.6 (no more "for
loops")
4) Use cache manifests for live sites, not just offline apps
5) HTML5 Form attributes and input styles (paceholder,
pattern, etc...)
11. Feature Detection
Modernizr
• Adds classnames of available
features to DOM
• Allows use of browser features with
fallback options
• shiv & polyfills
12. Feature Detection
“Cascading” the detection:
#nice {
background: url(background-one.png) top left repeat-x;
background: url(background-one.png) top left repeat-x,
url(background-two.png) bottom left repeat-x;
}
Using Modernizr:
#nice {
background: url(background-one.png) top left repeat-x;
}
.multiplebgs #nice {
background: url(background-one.png) top left repeat-x,
url(background-two.png) bottom left repeat-x;
}
27. Hardware Acceleration
Keep In Mind
• Don’t composite every DOM element
• When you make use of the GPU, you’re
also using the battery
• Beware of overlapping acceleration
36. “If the HTML text contains a <script> tag or its
equivalent, then an evil script will run. ..
Douglas Crockford - Javascript The Good Parts
37. Java only is innerHTML() bad...
Not Mobile Web Settings
• Causes browser memory leaks
• You don’t get a reference to the element
you just created
• Problems with some elements setting
their innerHTML
• And it fails on iOS...
38. Java Mobile Web Settings
Beware of innerHTML on
• Stops working randomly
• It’s a 4 year old problem in Safari
• there are hacks to workaround
• setTimeout(‘yuck’)
39. Java Mobile Web Settings
The Solution
• get the xhr.responseText
• send it to an automatically generated
HTML5 sandbox iframe
• pull from the iframe DOM and use
document.adoptNode
40. Java Mobile Web Settings
The Solution
function getFrame() {
var frame = document.getElementById("temp-frame");
if (!frame) {
// create frame
frame = document.createElement("iframe");
frame.setAttribute("id", "temp-frame");
frame.setAttribute("name", "temp-frame");
frame.setAttribute("seamless", "");
frame.setAttribute("sandbox", "");
frame.style.display = 'none';
document.documentElement.appendChild(frame);
}
return frame.contentDocument;
}
41. Java Mobile Web Settings
The Solution
var frame = getFrame();
frame.write(responseText);
42. Java Mobile Web Settings
The Solution
document.
getElementById(elementId).
appendChild(document.adoptNode
(incomingElements));
43. Fetching and Caching
Recap
• Get all fetchable links on the parent page
• Concurrently get the external pages
• Cache pages with localStorage
• Do not use innerHTML
• Write fetched content into iframe
• Place it into parent using adoptNode()
52. Fetching based on network speed
navigator.connection (The Network Information API)
53. Fetching based on network speed
WIFI (Asynchronous) Request Timeline
Edge (Synchronous) Request Timeline
54. #atlhtml5
Questions?
@wesleyhales
Note - All code and demos presented here will be available on October 4, 2011
www.html5rocks.com/en/mobile/optimization-and-performance.html