Loading JavaScript: Even a caveman can do it


Published on

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
- 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)

Published in: Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Loading JavaScript: Even a caveman can do it

  1. JSConf.eu 8 November 2009 Loading JavaScript Even a Caveman Can Do It Kyle Simpson [email_address] http://getify.com @getify #jsconf #loadjs
  3. Your. Site. Probably. Sucks. At Loading JavaScript.
  4. Sucks.
  5. Sucks.
  6. Sucks.
  7. 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 the <script> tag 5. Load all files serially
  8. Relax! I’m not gonna keep telling you how much you suck. And you don’t suck, JavaScript loading sucks .
  9. How To NOT Suck At 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
  10. Build-process script handling
  11. dojo.require
  12. Combiner (Nicholas Zakas)
  13. Yo, which shirt should I wear?
  14. G-zip minify/obfuscate
  15. Mincir “ Mincer” (to slim down) (alpha! Seriously!)
  16. Identifier Frequency Detection “ Constants” G-zip Optimization
  17. 280 characters 272 characters
  18. 93 bytes gzip’d 84 bytes gzip’d
  19. 169 characters 163 characters
  20. Load-time profiling
  21. Doloto (Microsoft)
  22. “ The key is to figure out what needs to load before the DOM is ready, and what can wait.” -- Microsoft Caveman
  23. Load scripts faster Execute in correct order
  24. <script> tags behave differently cross-browser with respect to loading and execution, either in parallel or serial. Hint: They Suck
  25. FF3 with <script> & <img> tags FF3.5 with <script> & <img> tags
  26. 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
  27. LABjs L oading A nd B locking J ava S cript
  28. 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.
  29. 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.
  30. 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.
  31. When TO use LABjs <ul><li>Everywhere else </li></ul>(actually, wherever you load scripts over-the-wire, and you care about performance, and don’t have a suitable loader already)
  32. FF3 with <script> & <img> tags FF3.5 with <script> & <img> tags LABjs in every browser
  33. 16.84 seconds vs. 6.24 seconds 2.7x speed increase in overall page load Enough said, right?
  34. 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.
  39. UsePreloading [ true /false] UseCachePreload [ true /false] UseLocalXHR [ true /false] AlwaysPreserveOrder [true/ false ] AppendTo [‘ head ’/’body’] AllowDuplicates [true/ false ] BasePath [string]
  40. BRIEFLY , how does LABjs do this?
  41. 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.
  42. LABjs’ current default behavior
  43. Preload “not-code” , execute code (later)
  45. Can be inside a .js file Can be inside a <script> tag
  48. True for desktop browsers Also true for mobile
  49. That wasn’t so hard was it?
  50. 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