JavaScript Performance (at SFJS)

JavaScript Performance

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

Cuzillion SpriteMeYSlow Hammerhead

drives traffic

improves UX

increases revenue

reduces costs

Web

Performance

OptimizationWPO

What’s the #1 cause

of slow web pages?

JAVASCRIPT!

{31%

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(‘head’)[0].appendChild(se);


downloaded in parallel (all browsers)

blocks rendering during parse-execute

2010: async + on-demand exec

var se = new Image(); // Objectse.onload = registerScript;se.src = ‘a.js’;

separate download from parse-execute


downloaded in parallel (all browsers)

doesn’t block rendering until demanded

20??: markup

script async & deferparsing 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

ControlJSa 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/

ControlJSa 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

localStorage

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.

localStoragewindow.localStorage:

setItem()getItem()removeItem()clear()

also sessionStorage

all popular browsers, 5MB maxhttp://dev.w3.org/html5/webstorage/http://diveintohtml5.org/storage.html

localStorage as cache

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

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

later docs: read JS & CSS from localStoragedocument.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




stevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/

avoid mixed content warning

protocol relative URLs have problems

set src last




stevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/

stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/

previously: getElementsByTagName(‘head’)[0].appendChild(ga)

HEAD might not exist

Android 1.5, iPhone 3.0, Opera 8.50, Safari 3.2




stevesouders.com/tests/jsorder.php

some browsers preserve execution order

Firefox 3.6, Opera, OmniWeb






some browsers preserve execution order

Firefox 3.6, Opera, OmniWeb

async=true fixes this (except Opera)

<html><head>

<link rel=stylesheet ...><style>...</style><script [...]></script>

</head>

<body><div><p><ul>

</body></html>

onload:

C

B

A

D

<html><head>


</head>

<body><div><p><ul>

</body></html>

onload:

A

script loads sooner

beacon fires sooner

blocks other async (Opera)

may block rendering

<html><head>


</head>

<body><div><p><ul>

</body></html>

onload:

B

script loads later

beacon fires later

blocks fewer async (Opera)

may block rendering

<html><head>


</head>

<body><div><p><ul>

</body></html>

onload:

C

script loads last

beacon fires late

doesn’t block async

doesn’t block rendering

<html><head>


</head>

<body><div><p><ul>

</body></html>

onload:

script loads after page

beacon fires very late

doesn’t block async

doesn’t block rendering

onload fires sooner

D

more

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

stevesouders.com/mobileperf/mobileperfbkm.php

Top 100

Top 1000

WPO

WebPagetest.org

Cuzillion.com

Browserscope.org

ControlJS.org

localStorage

takeawaysGA snippet is

good

Loadtimer.org

MobilePerf.org

HTTPArchive.org

Velocity

stevesouders.com

@souders

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

Technology

JavaScript Performance (at SFJS)