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/

AWS 推出 Anycast DNS 服務:Amazon Route 53

AWS今天推出Amazon Route 53,本質上是一個DNS Hosting服務,價格是每一百萬個 DNS Query收費USD$0.5,超過十億個Query後每百萬個USD$0.25,然後每個Domain每個月要多收USD$1。

根據Amazon CTO Werner Vogels的說法,採用的是Anycast的技術。在全球有16個點,包含亞洲的香港、東京與新加坡。實測起來,從台灣到亞洲的Routing還不錯,但美國的Routing有點不夠好,有的地方RTT大概還要接近100ms。

另外,尚未支援wildcard以及在一個zone file裡面有subdomain的entry,你必需要另外切開成另一個zone file。目前也不能當作其他DNS Server的Slave。

如果未來能夠支援從別的DNS master server 用 zone transfer 的方式進入Route 53的話,使用的彈性會大非常多。

2010/12/17 Updated: 今天的 AWS Webinar 說明了現在已經支援 wildcard! 剛剛實測的結果,在一個 zone file 放 subdomain 的 entry 的功能也支援了,現在已經不需要另外切開成另一個 zone file。