Fast Loading JavaScript

Fast Loading JavaScript http://www.flickr.com/photos/gaelenh/1443926963/ Velocity EU 2011, @aaronpeters

Better performance == More revenues Revisorweb

“ I totally rock the house!” http://www.flickr.com/photos/jkohen/3799706725/

The problem

JavaScript blocks

Lots of JS blocks even more Torstein Frogner

Lots of JS blocks even more Torstein Frogner <script src=“file.js”> blocks parallel downloading in IE8 and Chrome (!) can’t download subsequent images/iframes … has “silly preload logic” 2 <script src=“file.js”> and inline scripts block HTML parsing & page rendering 1

http://www.flickr.com/photos/frenkieb/4423393/ Example of bad, bad JS

http://www.flickr.com/photos/frenkieb/4423393/ Example of bad, bad JS Wanna see the horror?

It’s not getting any better

Requirements

load JS in a non-blocking way 1 scripts execute in order 2 couple external JS with inline JS 3 rendering starts soon; is progressive 5 DOM ready fires asap 4

diskdepot.co.uk You want to be in control

Reduce risk to a minimum http://www.flickr.com/photos/48329209@N03/4430804547/

Create the best user experience! http://www.flickr.com/photos/97469566@N00/4848627841

Async FTW! http://www.flickr.com/photos/15181848@N02/3742832809

JavaScript Loading Techniques

Normal Script Src
<script src =“foo.js" ></script>
<script src =“bar.js" ></script> <script> // dependent on bar.js executeAfterBar(); </script>

Normal Script Src Chrome’s silly preload logic

Chrome’s silly preload logic (CSPL) If there is a non-DEFER, non-ASYNC parser-inserted script in <head>, Chrome (15) only preloads other parser-inserted scripts from <body>, not images!

CSPL - Proof in <head> in <body>

Browserscope doesn’t tell you Browserscope testpage has script in <body>

Same in IE9? Nope, all good!

How about FF7? Yeah, good too!

Why CSPL is a problem Other objects start downloading late It’s against developer intent: bottom BODY means “do it last, other stuff comes first”

Solutions for CSPL Move to top of <body> Move to bottom of <body> Inline the code Add DEFER attribute Add ASYNC attribute Use Script Insertion Keeps blocking Start Render

Pre-render blocking JS?
Inline in <head>
External file top of <body>
1 http://www.flickr.com/photos/valeriebb/290711738/

Script Insertion
<script>
var d=document, js=d.createElement( 'script' ),
el=d.getElementsByTagName( 'script' )[ 0 ];
js.src= “file.js" ;
el.parentNode.insertBefore(js,el);
</script>

Script Insertion Important! script can’t have document.write

Script Insertion + callback()
<script>
function exec() { renderThingy(); }
js.src= “getsatisfaction.js“ ;
js.done=false;
js.onload=function(){ js.done=true,exec() },
js.onreadystatechange=function(){
("loaded"===js.readyState||"complete"===js.readyState
) && !js.done && (js.done=true,exec())};
</script>

Script insertion is awesome. Make it your default 2 http://www.flickr.com/photos/valeriebb/290711738/

DEFER attribute
<script defer src =“framework.js" ></script>
<script defer src =“app.js" ></script> <script> // dependent on app.js initApp(); </script>

DEFER attribute Important! script can’t have document.write

DEFER & jQuery in IE
<script defer src =“jquery.js" ></script>
<script defer src =“jquery-plugin.js" ></script> ‘ jQuery’ is undefined

Combine jquery.js and jquery-dependent.js if you want DEFER 2 http://www.flickr.com/photos/valeriebb/290711738/

ASYNC attribute
<script async src =“file.js" ></script>

ASYNC attribute Important! script can’t have document.write

Only use async as an ‘add-on ’ in dynamic insertion technique 3 http://www.flickr.com/photos/valeriebb/290711738/

ASYNC = false
<script>
js.async= false ;
js.src= “file.js" ;
</script>
<script async =“false” src =“file.js" ></script>

ASYNC = false Important! script can’t have document.write

Forget about async=false It’s for the far future. 4 http://www.flickr.com/photos/valeriebb/290711738/

LABjs
<script>
$LAB
.script( "framework.js" ).wait()
.script( "plugin.framework.js" )
.wait( function (){
myplugin.init();
framework.init();
});
</script>
<script src =“LABjs.js" ></script>

LABjs Important! script can’t have document.write

Script loaders like LABjs can be your best friend. Try it! 5 http://www.flickr.com/photos/valeriebb/290711738/

Execute before Start Render? <2k gzipped? Inline, in <head> Y Couple with inline script? Preserve exec order? N Using jQuery? Combine jquery.js & jquery-dependent.js Other script loaders, like Yepnope, may do an equally good job Y N Normal Script Src, top of <body> Y LABjs Y Dynamic insertion N DEFER Y N Execute right before DCL? N

Somewhat off-topic statements
Don’t load it if the page doesn’t need it !
Don’t use jQuery for everything
Do waterfall chart analysis ,‘till you drop
Use Webpagetest.org (Firefox 7 coming soon to all nodes!)
On WPT, use Video capturing to see how it renders
WPT has lots of useful commands in the API. Use them!

Third Party JavaScript

Social buttons BFF!  <div class = "fb-like" data-send= "false" data-width= "280" ></div>  <a class = "twitter-share-button" data-count= "horizontal" >Tweet</a>  <div class ="g-plusone" data-size= "medium" ></div> http://www.phpied.com/social-button-bffs/

Social buttons BFF!  <div class = "fb-like" data-send= "false" data-width= "280" ></div>  <a class = "twitter-share-button" data-count= "horizontal" >Tweet</a>  <div class ="g-plusone" data-size= "medium" ></div> http://www.phpied.com/social-button-bffs/ <div id ="fb-root" ></div > <script >( function (d, s) { var js, fjs = d.getElementsByTagName(s)[ 0 ], load = function(url, id) { if (d.getElementById(id)) { return ;} js = d.createElement(s); js.async = js.src = url; js.id = id; fjs.parentNode.insertBefore(js, fjs); }; load( '//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk' ); load( 'https://apis.google.com/js/plusone.js' , 'gplus1js' ); load( '//platform.twitter.com/widgets.js', 'tweetjs' ); }(document, 'script' )); </script>

Twitter Anywhere Tweet Box
<div id =“tbox" ></script>
<script>
twttr.anywhere( function (T) {
T( "#tbox" ).tweetBox();
});
</script>
</body>
view-source:http://www.cdnplanet.com > jsbeautifier.org ... <script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1"></script> </head> ...

You? Join the WPO community! You? You? You? You?

#webperf http://twitter.com/search#webperf
#WPOchat http://www.wpochat.org
Perfplanet http://perfplanet.com
Meetup http://web-performance.meetup.com/

http://www.flickr.com/photos/27282406@N03/4134166721/

Questions? http://www.flickr.com/photos/f-oxymoron/5005146417/

http://www.scoop.it	288
http://localhost	135
http://a0.twimg.com	20
http://tweetedtimes.com	10
http://paper.li	9
http://demo.azzist.com	8
http://192.168.1.117	6
http://us-w1.rockmelt.com	4
http://globalresellersite.com	3
http://www.onlydoo.com	2
https://twitter.com	2
http://twitter.com	1
http://www.twylah.com	1
http://translate.googleusercontent.com	1
http://webcache.googleusercontent.com	1

Fast Loading JavaScript

by Aaron Peters on Nov 10, 2011

Accessibility

Categories

Upload Details

Usage Rights

15 Embeds 491

Statistics

Fast Loading JavaScript Presentation Transcript