Post on 11-May-2015
description
transcript
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