Introducing head.js to My Studio
These are the advantages of adding Head JS, specifically head.load.min.js, to my new Web designs:
- Measurable and perceived performance boost: Head JS loads scripts in parallel, decoupled from the loading of document visuals. In effect, the conventional jQuery event for
$(document).ready()fires before all of the scripts are loaded. - Loading of JavaScript libraries can be maintained from an external file instead of locking files into hard
<script />elements.So here is my Head JS document pattern based on three<script />elements:<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./Scripts/head.load.min.js" type="text/javascript"></script> <script type="text/javascript"> head.js('./Scripts/jquery-1.5.1.min.js') .js('./Scripts/jquery.tmpl.min.js') .js('./Scripts/jquery.extensions.rx.js'); </script> <title>My Document</title> </head> <body> <div> //document... </div> <script type="text/javascript"> /*jslint browser: true, cap: false, passfail: false, undef: false, white: false */ /*global window head jQuery */ head.ready(function () { (function ($) { // document script... } (jQuery)); }); </script> </body> </html>What’s the big change for me (besides the switch to HTML 5) is that the both the second and third script blocks can be ‘sourced’ to an external file. This should be a great help for kintespace.com as it runs proudly on primal, static*.htmlfiles.