首页 > 代码库 > LABjs
LABjs
LABjs (Loading And Blocking JavaScript) is an open-source (MIT license) project supported by Getify Solutions. The core purpose of LABjs is to be an all-purpose, on-demand JavaScript loader, capable of loading any JavaScript resource, from any location, into any page, at any time. Loading your scripts with LABjs reduces resource blocking during page-load, which is an easy and effective way to optimize your site‘s performance.
LABjs by default will load (and execute) all scripts in parallel as fast as the browser will allow. However, you can easily specify which scripts have execution order dependencies and LABjs will ensure proper execution order. This makes LABjs safe to use for virtually any JavaScript resource, whether you control/host it or not, and whether it is standalone or part of a larger dependency tree of resources.
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.
Snippet to load LABjs itself dynamically
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).
Old and busted:
<script src="http://www.mamicode.com/framework.js"></script><script src="http://www.mamicode.com/plugin.framework.js"></script><script src="http://www.mamicode.com/myplugin.framework.js"></script><script src="http://www.mamicode.com/init.js"></script>
New hotness:
<script> $LAB .script("framework.js").wait() .script("plugin.framework.js") .script("myplugin.framework.js").wait() .script("init.js").wait();</script>LABjs