Javascript 與 CSS 合併成單一檔案下載的小技巧
MSN Space、Google Doc 、Google Blog、啪啦資訊科技Chui-Wen Chiu(Arick)
2007.05.02 建立
[1] 提出一種利用瀏覽器解析 CSS 和 Javascript 內容的行為模式，將 CSS 與 Javascript 內容合併在當一檔案中的小技巧，他的原理在於 CSS 解析器(Parser) 會忽略 <!--，而 Javascript 解析器會將 <!-- 解譯成 //，所以，如果內容是
| <!-- /* function t(){ alert("hello"); } <!-- */ <!-- body { background-color: Aqua; } |
對於 CSS 解析器來說，等同於下面的內容
| /* function t(){ alert("hello"); } */ body { background-color: Aqua; } |
對於 Javascript 來說，內容則等同於下面：
| // /* alert("hello"); } |
因此，如果我們將上述混和CSS與Javascript的內容存成 test.jscss，並在 HTML 分別使用 <script> 和 <style> 引用
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> new document </title> <link type="text/css" rel="stylesheet" href="test.jscss" /> <script type="text/javascript" language="javascript" src="test.jscss"></script> </head> <body onload = 't();'> fdasfdsafdsa </body> </html> |
則神奇的效果出現了
[IE6]
[Firefox 2]
該技術在[1] 描述 IE6、IE7和 Firefox 2.0 上測試通過，其他瀏覽器可能也可以運作。這樣的技術並非正規作法，而且該技術並未完整的測試過，是否有例外情況並未得知，且這些多餘的 <!-- 是否會造成維護上得問題，都是值得考慮，所以該技巧在實務仍需經過一段時間的驗證，也許未來在某種應用場合可以使用，多知道一些未嘗不好。
參考資料：
[1] Combine CSS with JS and make it into a single download!
沒有留言:
張貼留言