Head JS : The only script in your HEAD

1.0Jui-Nan Lin's Bloghttps://jnlin.orgjnlinhttps://jnlin.org/author/jnlin/Head JS : The only script in your HEAD<a href="http://headjs.com/">head.js</a>是一個很小（只有2.3kb）的javascript程式，主要的功能是可以「非同步」的載入javascript。在head.js自己的網站介紹中，很大膽的說「The only script in your <HEAD>」。更精確的來說，使用head.js以後只需要有一個 script tag載入head.js，其他的 javascript 檔案都可以用head.js來載入。 其實非同步載入javascript的技術已經很成熟了，像是<a href="http://www.google.com/analytics/">Google Analytics</a>就有提供非同步載入的程式碼。由於Browser在處理<script> tag的時候會block住整個頁面的render（為了要處理 document.write()）與頁面上其他 resource 的載入，所以能夠用非同步的方式載入javascript的話，除了不會 blocking render 讓使用者更快看到頁面之外，也可以平行地載入不同的script，加快整個網頁的載入速度。 但是非同步載入有個問題：如何保證執行javascript時的相依性？（例如，一定要先執行完 A script 才能開始執行 B script。）這點要自己處理的話很麻煩，但 head.js 已經幫忙作掉了。 <blockquote><pre>// load files in parallel but execute them in sequence</pre><pre> head.js("file1.js", "file2.js", ... "fileN.js");</pre></blockquote> 這樣的話就會同時載入file[1-N].js，但是按照順序執行file1.js ~ fileN.js。 有人會說，如果全部壓成一個很大的檔案，不就沒有執行順序的問題了嗎？但是壓成大檔的壞處是，即使只更新一個小功能，整個大檔案都必須重新load。另外，iPhone 的 safari 最大只 cache 單檔大小 15~25kb 的檔案 ((<a href="http://www.phpied.com/iphone-caching/">http://www.phpied.com/iphone-caching/</a>)) 。 不過要注意的是，head.js的非同步載入也有一些限制，可以到<a href="http://headjs.com/">http://headjs.com/</a> 去看看 “ Developing with Head JS” 這一段的說明。 除此之外，head.js 還有提供 CSS3 feature detection的功能，在不支援CSS3功能的瀏覽器上，<html>這個元素會被加上相對應的class。例如瀏覽器不支援CSS3 的 borderimage 屬性的話，他的 <html> 元素就會被加上 no-borderimage 這個 class，方便前端工程師寫出替代方案。<pre></pre> 另外還有螢幕大小偵測、瀏覽器偵測、HTML5 enabler（讓CSS可以style一些HTML5 tag）等等功能，看起來這些功能的主要目標是放在行動市場。原始碼放在 <a href="https://github.com/headjs/headjs">github</a>。 相關閱讀：<a href="http://kaix.in/daddy/2010/12/head-js-the-only-script-in-your-head/">http://kaix.in/daddy/2010/12/head-js-the-only-script-in-your-head/</a>rich