Month: December 2010

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。