Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JSConf.eu 8 November 2009 Loading JavaScript Even a Caveman Can Do It Kyle Simpson [email_address] http://getify.com @geti...
 
Your. Site. Probably. Sucks. At Loading JavaScript.
Sucks.
Sucks.
Sucks.
How To Suck At Loading JavaScript 1. Load too many files 2. Load too few files 3. Load all files before DOM-ready 4. Use t...
Relax! I’m not gonna  keep  telling you how much you suck. And you don’t suck,  JavaScript loading sucks .
How To  NOT  Suck At Loading JavaScript 1. Use a build-process for local scripts 2. Use g-zip and minifiers 3. Profile, lo...
Build-process script handling
dojo.require
Combiner (Nicholas Zakas)
Yo, which shirt should I wear?
G-zip minify/obfuscate
Mincir “ Mincer” (to slim down) (alpha! Seriously!)
Identifier Frequency Detection “ 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 faster Execute in correct order
<script> tags behave differently cross-browser with respect to loading and execution, either in parallel or serial. Hint: ...
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 whe...
LABjs L oading  A nd  B locking  J ava S cript
Put simply, LABjs is intended to be a simple way to replace <script> tags with a mechanism that gives you more control ove...
LABjs is a script loader that lets you load *any script, into any page, at any time. It uses an expressive API that helps ...
When  NOT  to use LABjs 1. If your script uses document.write 2. If your script  ITSELF  does unsafe DOM-ready detection  ...
When  TO  use LABjs <ul><li>Everywhere else </li></ul>(actually, wherever you load scripts over-the-wire, and you care abo...
FF3 with <script> & <img> tags FF3.5 with <script> & <img> tags LABjs in  every  browser
16.84 seconds vs. 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, w...
 
 
 
 
UsePreloading [ true /false]  UseCachePreload [ true /false]  UseLocalXHR [ true /false]  AlwaysPreserveOrder [true/ false...
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 sc...
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 Simpson [email_address] http://getify.com @getify #jsconf #loadjs More Info http://labjs.com http://msdn.microsoft.co...
Upcoming SlideShare
Loading in …5
×

Kyle Simpson [email_address] http://getify.com @getify Loading JavaScript: Even a caveman can do it

5,223 views

Published on

Kyle Simpson [email_address] 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

Published in: Technology

×