loading javascript: even a caveman can do it
DESCRIPTION
No matter how awesome your JavaScript code is, we all face the same problem: how to squeeze it down the wire and get it loaded and running in the browser as quickly and efficiently as possible. There are about as many ways to approach this problem as there are developers trying to solve it, which makes the landscape of JavaScript Loading solutions confusing and painful to navigate. But it doesn't have to be so ugly. We're gonna break it down so you can come away feeling more confident in how best to load your JavaScript. Several common strategies will be covered, including: - Build-time versus on-the-fly techniques - Code organization/compression (minification, gzip, etc) - File concatenation - Inline scripts - Dynamic parallel loading of JavaScript resources (LABjs, etc) - Cache optimization (initialization profiling, on-demand loading, pre-fetching, etc)TRANSCRIPT
JSConf.eu8 November 2009
Loading JavaScriptEven a Caveman Can Do It
Kyle [email protected]
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 [email protected]
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