web前端優化方案

一、儘量減少 HTTP 請求

有幾種常見的方法能切實減少 HTTP 請求:

1、 合併腳本跟樣式文件,如可以把多個 CSS 文件合成一個,把多個 JS 文件合成一個。

2、 CSS Sprites 利用 CSS background 相關元素進行背景圖絕對定位,把多個圖片合成一個圖片。

 

二、使用瀏覽器緩存

       在用戶瀏覽網站的不同頁面時,很多內容是重複的,比如相同的JS、CSS、圖片等。如果我們能夠建議甚至強制瀏覽器在本地緩存這些文件,將大大降低頁面產生的流量,從而降低頁面載入時間。

   根據服務器端的響應header,一個文件對瀏覽器而言,有幾級不同的緩存狀態。

   1、服務器端告訴瀏覽器不要緩存此文件,每次都到服務器上更新文件。

   2、服務器端沒有給瀏覽器任何指示。

   3、在上次傳輸中,服務器給瀏覽器發送了Last-Modified或Etag數據,再次瀏覽時瀏覽器將提交這些數據到服務器,驗證本地版本是否最新的,如果爲最新的則服務器返回304代碼,告訴瀏覽器直接使用本地版本,否則下載新版本。一般來說,有且只有靜態文件,服務器端纔會給出這些數據。

   4、服務器強制要求瀏覽器緩存文件,並設置了過期時間。在緩存未到期之前,瀏覽器將直接使用本地緩存文件,不會與服務器端產生任何通信。

       我們要做的是儘量強制瀏覽器到第四種狀態,特別是對於JS、CSS、圖片等變動較少的文件。

 

三、使用壓縮組件

IE和Firefox瀏覽器都支持客戶端GZIP,傳輸之前,先使用GZIP壓縮再傳輸給客戶端,客戶端接收之後由瀏覽器解壓,這樣雖然稍微佔用了一些服務器和客戶端的CPU,但是換來的是更高的帶寬利用率。對於純文本來講,壓縮率是相當可觀的。如果每個用戶節約50%的帶寬,那麼租用來的那點帶寬就可以服務多一倍的客戶,並且縮短了數據的傳輸時間。

 

四、圖片、JS的預載入

預載入圖像最簡單的方法是在 JavaScript 中實例化一個新 Image() 對象,然後將需要載入的圖像的 URL 作爲參數傳入。

function preLoadImg(url) {

var img = new Image();

img.src = url;

}

可以在登錄頁面預載入JS和圖片

 

五、將腳本放在底部

腳本放在頂部帶來的問題,

1、  使用腳本時,對於位於腳本以下的內容,逐步呈現將被阻塞

2、  在下載腳本時會阻塞並行下載

放在底部可能會出現JS錯誤問題,當腳本沒加載進來,用戶就觸發腳本事件。

要綜合考慮情況。

 

六、將樣式文件放在頁面頂部

如果樣式表任在加載,構建呈現樹就是一種浪費,樣式文件放在頁面底部可能會出現兩種情況:

1、  白屏

2、  無樣式內容的閃爍

 

七、使用外部的JS和CSS

將內聯的JS和CSS做成外部的JS、CSS。減少重複下載內聯的JS和CSS。

 

八、切分組件到多個域

主要的目的是提高頁面組件並行下載能力。但不要跨太多域名,建議採用2個子域名。

 

九、精簡JS

可以做到兩個級別

1、精簡:從代碼中移除不必要的字符以減少其大小,

2、混淆:在精簡的同時,還會改寫代碼,函數、變量名被轉換成更短的字符串

可以使用ShrinkSafe來精簡JS  http://shrinksafe.dojotoolkit.org/

 

十、精簡CSS

從代碼中移除不必要的字符以減少其大小,

可以使用CSS Compressor http://www.cssdrive.com/index.php/main/csscompressor /

 

十一、       精簡圖片、Flash

對大圖片、Flash,要在效果和大小之間做出平衡。

第三章 程序的優化

第四章 數據庫的優化

附錄A 頁面請求分析

  從輸入URL到頁面呈現需要下面5個步驟

1. 輸入URL地址或者點擊URL的一個鏈接

 2. 瀏覽器根據URL地址,結合DNS,解析出URL對應的IP地址

 3. 發送HTTP請求

 4. 開始連接請求的服務器並且請求相關的內容

 5. 瀏覽器解析從服務器端返回的內容,並且把頁面顯現出來

 

上面基本上就是一個頁面從請求到實現的基本過程,下面我們將剖析這個過程。

 

當輸入URL之後,瀏覽器就要知道這個URL對應的IP是什麼,只有知道了IP地址,瀏覽器才能準備的把請求發送到指定的服務器的具體IP和端口號上面。瀏覽器的DNS解析器負責把URL解析爲正確的IP地址。這個解析的工作是要花時間的,而且這個解析的時間段內,瀏覽器不是能從服務器那裏下載到任何的東西的。瀏覽器和操縱系統提供了DNS解析緩存支持。

 

當獲得了IP地址之後,那麼瀏覽器就向服務器發送HTTP的請求,過程如下:

1.瀏覽器通過發送一個TCP的包,要求服務器打開連接

2.服務器也通過發送一個包來應答客戶端的瀏覽器,告訴瀏覽器連接開了。

3.瀏覽器發送一個HTTP的GET請求,這個請求包含了很多的東西了,例如我們常見的cookie和其他的head頭信息。

這樣,一個請求就算是發過去了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章