JavaScript Performance (at SFJS)

JavaScript
Performance

stevesouders.com/docs/sfjs-20120112.pptx
Disclaimer: This content does not necessarily reflect the opinions of my employer.

YSlow Cuzillion SpriteMe Hammerhead

Web
WPO Performance
Optimization
drives traffic
improves UX
increases revenue
reduces costs

What’s the #1
cause of slow
web pages?

all requests containing “.js” are skipped

http://httparchive.org/trends.php?s=intersection

1995: scripts in HEAD
<head>
<script src=‘a.js’></script>
</head>
blocks other downloads (IE 6-7, images
in IE, iframes)
downloaded sequentially (IE 6-7)
blocks rendering during download &
parse-execute

2007: move scripts to bottom
...
<script src=‘a.js’></script>
</body>
doesn’t block other downloads
downloaded sequentially in IE 6-7
blocks rendering during download &
parse-execute

2009: load scripts async
var se =
document.createElement(‘script’)
;
se.src = ‘a.js’;
document.getElementsByTagName(‘he
ad’)[0].appendChild(se);

downloaded in parallel (all browsers)
blocks rendering during parse-execute

2010: async + on-demand exec
var se = new Image(); // Object
se.onload = registerScript;
se.src = ‘a.js’;

separate download from parse-execute
downloaded in parallel (all browsers)
doesn’t block rendering until demanded

script async & defer
parsing doesn’t wait for script:
• async – executed when available
• defer – executed when parsing finished
when is it downloaded?

missing:
• defer download AND execution
• async/defer download, execute on demand

20??: markup
<script src=‘a.js’
[async|defer|noexecute]
[deferdownload]>
doesn’t block downloads
downloaded in parallel
doesn’t block rendering until demanded
doesn’t contend for a connection
easier

ControlJS
a JavaScript module for making scripts load faster

just change HTML
inline & external scripts
<script type=‘text/cjs’
data-cjssrc=‘main.js’>
</script>

<script type=‘text/cjs’>
var name = getName();
</script>
http://controljs.org/

ControlJS
a JavaScript module for making scripts load faster

download without executing
<script type=‘text/cjs’
data-cjssrc=‘main.js’
data-cjsexec=false>
<script>

Later if/when needed:
CJS.execScript(src);

GMail Mobile
<script type=‘text/javascript’>
/*
var ...
*/
</script>

get script DOM element's text
remove comments
eval() when invoked
awesome for prefetching JS that might
(not) be needed
http://goo.gl/l5ZLQ

yuiblog.com/blog/2007/01/04/performance-research-part-2/

blaze.io/mobile/understanding-mobile-cache-sizes/

Home screen apps on iPhone are slower
because resources are re-requested
even though they should be read from
cache.

localStorage
window.localStorage:
setItem()
getItem()
removeItem()
clear()
also sessionStorage
all popular browsers, 5MB max
http://dev.w3.org/html5/webstorage/
http://diveintohtml5.org/storage.html

localStorage as cache
1st doc: write JS & CSS blocks to localStorage
mres.-0yDUQJ03U8Hjija: <script>(function(){...

set cookie with entries & version
MRES=-0yDUQJ03U8Hjija:-4EaJoFuDoX0iloI:...

later docs: read JS & CSS from localStorage
document.write( localStorage.getItem(mres.-
0yDUQJ03U8Hjija) );

http://stevesouders.com/blog/2011/03/28/storager-case-
study-bing-google/

Google Analytics Async Snippet

var ga = document.createElement(‘script’);
ga.type = ‘text/javascript’;
ga.async = true;
ga.src = (‘https:’ ==
document.location.protocol ? ‘https://ssl’ :
‘http://www’)+‘.google-analytics.com/ga.js’;
var s =
document.getElementsByTagName(‘script’)[
0];
s.parentNode.insertBefore(ga, s);

code.google.com/apis/analytics/docs/tracking/asyncTracking.html

ga.async = true;
var s =
0];
avoid mixed content warning
protocol relative URLs have problems
set src last
stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/

ga.async = true;
var s =
0];
previously:
getElementsByTagName(‘head’)[0].
appendChild(ga)
HEAD might not exist
stevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/
Android 1.5, iPhone 3.0, Opera 8.50, Safari 3.2
stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/

ga.async = true;
var s =
0];
some browsers preserve execution order
Firefox 3.6, Opera, OmniWeb

stevesouders.com/tests/jsorder.php

ga.async = true;
var s =
0];
some browsers preserve execution order
Firefox 3.6, Opera, OmniWeb
async=true fixes this (except Opera)


<html>
<head>
A
<link rel=stylesheet ...>
<style>...</style>
<script [...]></script>
B
</head>
<body>
<div>
<p>
<ul>
C
</body>
</html>

onload: D

A

script loads sooner
beacon fires sooner
blocks other async (Opera)
may block rendering

B

script loads later
beacon fires later
blocks fewer async (Opera)
may block rendering

script loads last
beacon fires late
doesn’t block async
C doesn’t block rendering

script loads after page
beacon fires very late
doesn’t block async
doesn’t block rendering
onload fires sooner
D

stevesouders.com/blog/2011/12/01/silk-ipad-galaxy-comparison/

stevesouders.com/mobileperf/mobileperfbkm.php

takeaways
WPO GA snippet is good
WebPagetest.org Loadtimer.org
Cuzillion.com MobilePerf.org
Browserscope.org HTTPArchive.org
ControlJS.org Velocity
localStorage stevesouders.com

@souders
http://stevesouders.com/docs/sfjs-20120112.pptx

JavaScript Performance (at SFJS)

More Related Content

What's hot

Similar to JavaScript Performance (at SFJS)

More from Steve Souders

Recently uploaded

JavaScript Performance (at SFJS)

Editor's Notes