The performance script loader
Using LABjs will replace all that ugly "<script> tag soup" -- that is all the <script> tags that commonly appear in the <head> or end of the <body> of your HTML page. The API is expressive and chaining, to let you specify which scripts to load, and when to wait ("block"), if necessary, for execution before proceeding with further execution. The API also easily allows inline code execution coupling (think: inline <script> tags).
Loading LABjs dynamically
It's been asked several times before: "How would I load LABjs itself dynamically, to save on the blocking load of LAB.js (~2k gzip'd)?" Since it gets asked fairly frequently, I threw together this little code snippet as a place to start.
Some things to note:
- The size of the minified snippet is ~640b before gzip. This means you will be increasing the size of your HTML page by at least this much. That's not particularly a problem, but it is something to be aware of in terms of tradeoffs.
- My best guidance would probably be to use the snippet to load LAB.js dynamically on your first page load (landing page, etc), and then on all subsequent pages in your site, just load LAB.js normally with a <script> tag (since it should then load nearly instantly from cache).
LABjs & User-Experience
Questions or Thoughts? Contact me @getify on twitter. If you like this project, you also might like to check out: