loading javascript: even a caveman can do it

JSConf.eu8 November 2009

Loading JavaScriptEven a Caveman Can Do It

Kyle Simpsongetify@gmail.com

http://getify.com@getify

#jsconf #loadjs

Your.Site.

Probably.

Sucks.

At Loading JavaScript.

Sucks.

Sucks.

Sucks.

How To SuckAt Loading JavaScript

1. Load too many files

2. Load too few files

3. Load all files before DOM-ready

4. Use the <script> tag

5. Load all files serially

Relax! I’m not gonna keep telling you how much you suck.

And you don’t suck, JavaScript loading sucks.

How To NOT SuckAt Loading JavaScript

1. Use a build-process for local scripts

2. Use g-zip and minifiers

3. Profile, load when needed

4. Load parallel, execute serially

5. Load now, execute later

Build-processscript handling

dojo.require

Combiner(Nicholas Zakas)

Yo, which shirt should I wear?

G-zipminify/obfuscate

Mincir

“Mincer”

(to slim down)

(alpha! Seriously!)

Identifier FrequencyDetection

“Constants”

G-zip Optimization

280 characters

272 characters

93 bytes gzip’d

84 bytes gzip’d

169 characters

163 characters

Load-time profiling

Doloto

(Microsoft)

“The key is to figure out what needs to load before the DOM is ready, and what can wait.”

-- Microsoft Caveman

Load scripts fasterExecute in correct order

<script> tags behave differently cross-browser with respect to loading

and execution, either in parallel or serial.

Hint: They Suck

FF3 with <script> & <img> tags

FF3.5 with <script> & <img> tags

It gets crazy when you look at ie6, ie7, ie8, opera, chrome, safari…&

mobile

Hint: This Sucks

And it gets even crazier when you load other page elements like css

near your <script> tags

LABjs

Loading And Blocking JavaScript

Put simply, LABjs is intended to be a simple way to replace <script> tags

with a mechanism that gives you more control over loading and

execution behavior.

LABjs is a script loader that lets you load *any script, into any page, at

any time. It uses an expressive API that helps you replace your script

tags easily.

*exceptions explained in a moment.

When NOT to use LABjs

1. If your script uses document.write

2. If your script ITSELF does unsafe DOM-ready detection – does not apply to scripts that use the results of such detection.

When TO use LABjs

1. Everywhere else(actually, wherever you load scripts over-the-wire, and you care about performance, and don’t have a suitable loader already)

FF3 with <script> & <img> tags

FF3.5 with <script> & <img> tags

LABjs in every browser

16.84 secondsvs.

6.24 seconds

2.7x speed increase in overall page load

Enough said, right?

The LABjs API is a chaining API (similar to jQuery), which you can use to express one or

more groups of scripts to load, where (by default) all scripts will load in parallel, but

groups will execute in serial. You can specify as many independent chains as necessary.

So, you can both load scripts that have no dependencies on each other (and thus can run

in parallel), and those scripts that do have execution order dependency, while still loading

everything as quickly as possible.

UsePreloading [true/false] UseCachePreload [true/false] UseLocalXHR [true/false] AlwaysPreserveOrder [true/false] AppendTo [‘head’/’body’] AllowDuplicates [true/false] BasePath [string]

BRIEFLY, how does LABjs do this?

Only the part of the decision matrix that works on-demand at any point in the page lifetime, for same- and cross-domain scripts, loading in parallel, ensuring execution order dependencies, allowing coupling.

LABjs’ current default behavior

Preload “not-code”,execute code (later)

Can be inside a .js file

Can be inside a <script> tag

True for desktop browsers

Also true for mobile

That wasn’t so hard was it?

Kyle Simpsongetify@gmail.com

http://getify.com@getify

#jsconf #loadjs

More Info

http://labjs.com

http://msdn.microsoft.com/en-us/devlabs/ee423534.aspx

http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/

http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html

SpeakerRate (slides, code samples posted):http://speakerrate.com/talks/1754-loading-javascript-even-a-caveman-can-do-it