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

網頁加速技巧1

發佈: 09-19-2011

分類: 網頁設計

本文教授如何加快客戶端網頁的載入速度。網頁設計除了外觀以外,執行效率也是很重要的。 也許你常覺得,網頁執行速度慢,一定是server的問題,其實不一定。很多時候,通過網頁client side的設計優化,執行速度也可以得到大幅改善。本系列的文章,我們會探討網頁慢速的原因,并介紹如何解決問題。

這次的主題是減少http要求的次數,以及合併圖片。

減少http要求的次數

http要求和回傳往往是最花時間。瀏覽器要把要求先發送到server,再在server中跟其他不同的要求一同處理,然後回傳到客戶端瀏覽器。這操作中有兩個network transmission的延時。網絡傳輸花的時間,比真正執行的時間,可說是有天壤之別。在server執行的時間,可能只花十幾毫秒,可是http要求的時間是以秒為單位的,短則不到一秒,長則三五秒。因此,最大問題是來自網絡傳輸。

解決問題的最基本原則是:先解決大問題,再解決小問題。因此,本編將首先討論如何減少http要求次數。

使用Ajax設計頁面

Ajax有效減少http傳輸的內容,但不一定可以減少http要求次數。可是,它絕對可以分散http的傳輸。使用ajax有百利而無一害(其實也有對SEO的不良影響),是設計及優化網頁的好工具。

多文件網頁結構優化

以前載入一個網頁,只包含一兩個文件,可是現在網頁的結構比以前複雜,而且有更多的其他輔助文件,如css、javascript、圖片、不同的javascript庫等等,一個網頁包含數十個文件也很常見。多個文件不是壞事,只要它們都有效地cache了,也可幫助加速。但凡事也有第一次,那我們怎麼優化沒cache的文件呢?瀏覽器怎麼對待不同的文件呢?

瀏覽器不是同時下載多個文件嗎?

現代的瀏覽器不是支持同時下載多個文件嗎?怎麼還會有這個問題?沒錯,它們可以同一時間下載多個文件,同時也有限制。以IE8為例,它同一時間同一個web server就只能下載6個文件。還沒下載的文件只可以排隊下載,因此,這是一個bottleneck(瓶頸)。也許你也想到了,如果文件是分散在不同的server,這就可以再快一點。因此,有些人喜歡把靜態的文件如圖片等,都放在不同的server,以達到更高的並行下載效果。

合併javascript文件以及css文件

如何把不同的網頁相關的文件結合在一起,減小網絡傳輸的時間成了一個獨立的課題。 我們喜歡把不同功能不相關的東西分別放到不同的文件,然後在網頁中按需要載入,這是無可厚非的。 但到真正應用時又發覺文件太多。例如,我們有太多的css或js文件。設計上的便利和應用是有矛盾的, minify就是一個解決這問題的php工具,它把不同的css或javascript文件結合在一起,移除空白和comments。由於多個文件一同壓縮和傳輸,這不但可有效減少傳輸次數,而且壓縮效率也高了,即是說傳輸的內容也少了(壓縮後)。 這裡有一個walkthrough,大意就是把你的外部文件加到一個php的config 中,然後自行載入一個minify生成的合併文件。

合併圖片css sprite

圖片是另一個頭痛的問題。我們也可以合併圖片,并通過css把不同圖片加載到網頁。 Css sprite是一個比較流行的方法。Menu和icon等小圖片,檔案都很小,不太值得花太多時間在網絡傳輸的延時上。在設計時,我們大可把不同圖片,都儲存在同一個文件中。當要載入時,便使用css,只顯示圖片的其中一個部份。這樣做我們使可以減少不必要的http要求次數,便於管理。

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