Head JS : The only script in your HEAD

head.js是一個很小(只有2.3kb)的javascript程式,主要的功能是可以「非同步」的載入javascript。在head.js自己的網站介紹中,很大膽的說「The only script in your <HEAD>」。更精確的來說,使用head.js以後只需要有一個 script tag載入head.js,其他的 javascript 檔案都可以用head.js來載入。

其實非同步載入javascript的技術已經很成熟了,像是Google Analytics就有提供非同步載入的程式碼。由於Browser在處理<script> tag的時候會block住整個頁面的render(為了要處理 document.write())與頁面上其他 resource 的載入,所以能夠用非同步的方式載入javascript的話,除了不會 blocking render 讓使用者更快看到頁面之外,也可以平行地載入不同的script,加快整個網頁的載入速度。

但是非同步載入有個問題:如何保證執行javascript時的相依性?(例如,一定要先執行完 A script 才能開始執行 B script。)這點要自己處理的話很麻煩,但 head.js 已經幫忙作掉了。

// load files in parallel but execute them in sequence

head.js("file1.js", "file2.js", ... "fileN.js");

這樣的話就會同時載入file[1-N].js,但是按照順序執行file1.js ~ fileN.js。

有人會說,如果全部壓成一個很大的檔案,不就沒有執行順序的問題了嗎?但是壓成大檔的壞處是,即使只更新一個小功能,整個大檔案都必須重新load。另外,iPhone 的 safari 最大只 cache 單檔大小 15~25kb 的檔案 ((http://www.phpied.com/iphone-caching/)) 。

不過要注意的是,head.js的非同步載入也有一些限制,可以到http://headjs.com/ 去看看 “ Developing with Head JS” 這一段的說明。

除此之外,head.js 還有提供 CSS3 feature detection的功能,在不支援CSS3功能的瀏覽器上,<html>這個元素會被加上相對應的class。例如瀏覽器不支援CSS3 的 borderimage 屬性的話,他的 <html> 元素就會被加上 no-borderimage 這個 class,方便前端工程師寫出替代方案。


另外還有螢幕大小偵測、瀏覽器偵測、HTML5 enabler(讓CSS可以style一些HTML5 tag)等等功能,看起來這些功能的主要目標是放在行動市場。原始碼放在 github

相關閱讀:http://kaix.in/daddy/2010/12/head-js-the-only-script-in-your-head/