11. Browser Debugging Tools
• Learn how to use them.
• Watch Network Traffic.
• Track caching & compression.
• Request and Response headers.
• How to inspect resources & the DOM.
• The console is your friend.
12. downloadSpeed: “fast”
Minimize your files:
!function(a,b){“object”==typeof module&&”object"
==typeof module.exports?module.exports=a.document?b(a,!
0):function(a){if(!a.document)throw new Error( "jQuery
requires a window with a document");return b(a)}:b(a)}
("undefined"!=typeof window?window:this, function(a,b)
{var c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,
h={},i=h.toString,j=h.hasOwnProperty,k={},l=a.document,m
="2.1.1",n=function(a,b){return new n.fn.init(a,b)},o=/
^[suFEFFxA0]+|[suFEFFxA0]+$/g,p=/^-ms-/,q=/-([da-z])/
gi,r= function(a,b){return throw new a.indexOf(“use
http://gpbmike.github.io/refresh-sf/
https://github.com/mishoo/UglifyJS
13. downloadSpeed: “fast”
gzip your downloads:
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html|js|css)$
</ifModule>
http://www.feedthebot.com/pagespeed/enable-compression.
html
16. Use a CDN
• Automatic minimization (js, css, html)
• Automatic compression.
• Automatic caching at a data center
nearest your user.
• Automatic redundancy of servers.
• Basic level of service is FREE!
18. 1. Browser Cache
• Cache your code, css, images.
• Updates are automatic’ish.
• Slow last modified checks with
mobile latency + once per file.
19. Browser Cache Tradeoff
• Calculate: Code Update Frequency
• Because: Once in the users
browser isn’t going to be updated
without the user forcing it or
expiration.
20. Browser Cache Issues
• Trade off: cache expiration vs
download frequency.
• Need frequent updates: make it
small.
• Result: more frequent downloads or
last modified checks.
• Rule: You will always download
more often than you really need to.
21. Browser Cache Updates
• Unpredictable behavior.
• Browser makes the decisions.
• Don’t play the rename the file to
update game.
22. window.location.reload()
Don’t use reload to refresh
window.location.reload();
last modified check for every reference
Instead set the href to yourself
window.location.href =
window.location.pathname+
window.location.search;
Unless you want to force a reload :-)
23. 2. localStorage
Can store code
localStorage.myCode =
‘function HelloWorld()
{
alert(“Hello, World”);
}’;
Can store data
localStorage.myData =
‘{Days: [“Sun”, “Mon”, “Tue”, “Wed”,
“Thu”, “Fri”, “Sat”],
Months: [31, 28, 31, 30, 31, 30,
31, 31, 30, 31, 30, 31]}’;
24. localStorage
• Store any arbitrary string.
• On a domain by domain basis.
• Updates under your own control.
25. localStorage
• Persistent between browser launches:
• JSON
• CSS
• JavaScript
• 5MB Limit: who writes 5M of
minimized code or data?
26. updates: localStorage
• You store and update only when
you want to.
• Best for code/css and static data,
not for images.
27. Store JS in localStorage
$('script[src]').map(
function(idx, val) {
var url, name;
url = $(val).attr('src');
name = url.replace(/[^a-zA-Z]/g,'-');
while (name[0] === ‘-') {
name = name.slice(1);
}
$.get(url,
function (code) {
localStorage[name] = code;
});
});
28. 3. AppCache (Manifest)
• Store any resource:
• JavaScript
• CSS
• Images
• HTML
• Any file you like…
29. AppCache
• Single “last modified” check
updates lots of files.
• Automatic fallback to the network.
• Can work totally offline.
30. AppCache
<html manifest="cache.manifest">
CACHE MANIFEST
NETWORK:
*
CACHE:
/favicon.ico
/index.html
/js/lib/jquery.min.js
/js/lib/mylibs.js
/css/mainStyles.css
//ajax.googleapis.com/ajax/libs/jquery/2.1.1/
jquery.min.js
...
You store any file you want…
31. AppCache Update Control
• You - sort of - control this one.
• Can have different behaviors on
different pages.
• You store and update only when you
want to.
% touch cache.manifest
• Also programatic control & events.
33. AppCache HTML5 Session
References
See Jeff Burtofts HTML 5 Session:
Behold the power of the
“Web App Manifest”
Room E-133 @ 2:30pm on 10/20/14
34. Putting it all together
• CDN for quick access.
• localStorage for static data / code /css.
• sessionStorage for run-time data
(instead of server sessions).
• app cache for every type of file.
35. workOffline: “true”
• With localStorage, sessionStorage & app
cache (manifests).
• This is a reality.
• Plus: whenever there is a network
connection you can get new content,
resources and code.
• eg: Google Homepage
(~250KB of App cache)
36. updates: “immediate”
• You should be in control your updates.
• Browser cache - hit and miss.
• LocalStorage - under your control.
• App Cache - mixed bag.
