Home 主頁 Service 服務計畫 Android App 手機程式 Expertise 專業領域 Blog 博客 Download 下載 FAQ 網頁製作常見問題 Support 支援 Links 友情連結 Contact Us 聯絡我們

網頁加速技巧2

發佈: 09-19-2011

分類: 網頁設計

本文教授如何加快客戶端網頁的載入速度。本系列的文章會探討網頁慢速的原因,并介紹如何解決問題。

上文介紹了如何減少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著)一書。

訪客: Copyright ©2011 KF Software House 版權所有 | 網站地圖