As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.
23. .icon1 {
background: url(data:image/png;base64,<data>)
no-repeat;
}
.icon2 {
background: url(data:image/png;base64,<data>)
no-repeat;
}
Data URIs can be embedded in CSS
No more extra HTTP requests for images!
29. replace 'em with CSS where possible
Images put 'em inline using data URIs
if all else fails, make 'em small
http://www.flickr.com/photos/calliope/83867359/
45. How It Works
1. On first page load, inline all scripts and styles
2. Extract scripts and styles from page and store
in localStorage
3. Set cookie with Ids of the scripts and styles in
localStorage
4. On next page load, look at cookies
5. Output scripts instructing the browser to load
that resource from localStorage
46. Extracting From The DOM
//extract inline script contents
var scriptNode =
document.querySelector("script");
var scriptText = scriptNode.text;
//extract inline style contents
var styleNode =
document.querySelector("style");
var styleText = styleNode.innerHTML;
100. Balance
This is a new frontier.
The investigation has only just
started.
Test, test, test.
Share.
http://www.flickr.com/photos/brent_nashville/201143283/
101. Etcetera
• My blog:
www.nczonline.net
• Twitter:
@slicknet
• These Slides:
http://slideshare.net/nzakas/