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)

JavaScript Performance (at SFJS)

Recommended

More Related Content

What's hot

What's hot(20)

Similar to JavaScript Performance (at SFJS)

Similar to JavaScript Performance (at SFJS)(20)

More from Steve Souders

More from Steve Souders(11)

Recently uploaded

Recently uploaded(20)

JavaScript Performance (at SFJS)

Editor's Notes