網頁加速技巧2
分類: 網頁設計
本文教授如何加快客戶端網頁的載入速度。本系列的文章會探討網頁慢速的原因，并介紹如何解決問題。
上文介紹了如何減少http要求的次數，以加快網頁載入速度。本文的主題則是如何增加網頁同時下載的能力(如何用盡瀏覽器同一server同一時間下載的配額)，令網頁可以以最快的速度下載及顯示。請注意，這是進階網頁優化文章，不太適合初學者。
由於網頁由多個外部文件組成(e.g. javascript, css)，網頁的下載及逐步顯示是一個過程。 不同的瀏覽器有不同的行為，但它們大都是大同小異。
網頁文件下載
我們先認識網頁中的相關外部文件。主文件當然是個html文件，html文件可以加入*.css和*.js的參考。 同時，也有不同的圖片，如*.jpg，*.bmp等。有些時候，我們也會加入frame，把整個外部的html文件都加進來。
下載次序與執行次序
瀏覽器當然是先下載主文件的html，完成後在這文件中，它會找到不同的外部文件，組成一個下載的列表。由於瀏覽器在同一server支持同時下載多個文件， 它會按下載列表文件發現的先後次序，同時下載好幾個文件。世事往往也沒那麼簡單。外部的*.js文件真的可以同時下載嗎？現在有a.js和b.js，可是a.js更改了文件的dom，用了document.write輸出了一些html，b.js則是基於a.js的輸出而執行，執行的次序搞亂了，便會出現問題。這情況就是我們常說的blocking。
舊版瀏覽器（IE8以前)，都是不同時下載*.js。Microsoft也意識到，不能同時執行，不等於不可以同時下載。在IE8及以後，*.js便可以同時下載。只要之後執行次序沒錯，便沒有問題。由於新版瀏覽器都比較先進，我們現在的目標已成了加快舊版瀏覽器網頁載入速度。
使用DEFER
DEFER是個IE支持的keyword，當加入外部js文件時，你可以使用DEFER，以告知IE這是不同立即執行（也不會影響dom）。因此，舊版IE便可以把這類*.js同時下載。請參考用法。
使用javascript去動態生成script tag
使用javascript去動態生成script tag去載入其他*.js也是另一方法。同時，你也要確保它們不會影響dom，而且執行次序沒有衝突。這是個很常用的技巧。
以ajax的方式載入*.js
Ajax call是async的，也就是說同步下載沒有問題。
延伸閱讀
如想了解更多，筆者建議閱讀Even Faster Web Sites (Steve Souders著)一書。