優化網站設計(四):對資源啟用壓縮


前言

網站設計的優化是一個很大的話題,有一些通用的原則,也有針對不同開發平台的一些建議。這方面的研究一直沒有停止過,我在不同的場合也分享過這樣的話題。

作為通用的原則,雅虎的工程師團隊曾經給出過35個最佳實踐。這個列表請參考

Best Practices for Speeding Up Your Web Site  http://developer.yahoo.com/performance/rules.html

同時,他們還發布了一個相應的測試工具Yslow http://developer.yahoo.com/yslow/

我強烈推薦所有的網站開發人員都應該學習這些最佳實踐,並結合自己的實際項目情況進行應用。

接下來的一段時間,我將結合ASP.NET這個開發平台,針對這些原則,通過一個系列文章的形式,做些講解和演繹,以幫助大家更好地理解這些原則,並且更好地使用他們。

准備工作

為了跟隨我進行后續的學習,你需要准備如下的開發環境和工具

  1. Google Chrome 或者firefox ,並且安裝 Yslow這個擴展組件.請注意,這個組件是雅虎提供的,但目前沒有針對IE的版本。
    1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
      Technorati Tags: Performance, Web design, ASP.NET
    2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
    3. 你應該對這些瀏覽器的開發人員工具有所了解,你可以通過按下F12鍵調出這個工具。
  2. Visaul Studio 2010 SP1 或更高版本,推薦使用Visual Studio 2012
    1. http://www.microsoft.com/visualstudio/eng/downloads
  3. 你需要對ASP.NET的開發基本流程和核心技術有相當的了解,本系列文章很難對基礎知識做普及。

本文要討論的話題

這一篇,我們要討論的是對資源啟用壓縮的話題。我們知道,不光我們如何減少請求數,或者使用CDN,以及使用緩存,有一個事實是我們無法避免的:內容總是需要從服務器傳輸到客戶端,那怕次數是少一些。那么,如果希望這個傳輸的過程盡量地快,我們應該會很自然地想到,能否將傳輸的內容體積減小呢?

要回答這樣的一個問題,我們通常就會使用到壓縮技術。關於這一條原則的理論和概念,請參考 http://developer.yahoo.com/performance/rules.html#gzip

壓縮並不那么簡單,其實它包含了一對操作:壓縮和解壓縮。換句話說,在我們今天討論的網站優化中使用壓縮技術,不僅僅需要考慮服務器端對內容進行壓縮,還要考慮客戶端(瀏覽器)對內容進行解壓縮。反過來也是如此。所以,這里就會有一個問題,我們必須要使用大多數瀏覽器都能接受的壓縮算法。由於瀏覽器的多樣性,通常是由瀏覽器在發起請求的時候,顯式地表明自己接受那些壓縮算法,然后服務器檢查這些設置,再確認自己是否能利用這些算法進行壓縮(或者解壓縮),如果不能,則寧願不進行壓縮,直接返回原始的內容。

所以,在HTTP 1.1中規定,瀏覽器在發起請求的時候,可以通過下面這個Request Header來表明自己支持的壓縮算法(可以有多個)

Accept-Encoding: gzip, deflate
然后,服務器在發送響應的時候,也可以通過下面這個Response Header來表明此次響應是否使用了某種算法(肯定只有一個)
Content-Encoding: gzip
作為程序員,我們知道其實還有很多其他的算法,但是確實從通用層面考慮,使用最多的是Gzip。 其他能與其相提並論的還有deflate,但還是Gzip用的最多。

 

哪些資源適合做壓縮

  1. 靜態網頁(HTML,HTM)
  2. 文本文件(TEXT,XML等)
  3. 腳本文件(JAVASCRIPT)
  4. 樣式文件(CSS)

 

哪些資源不適合做壓縮

  1. 圖片(JPG,GIF,PNG)
  2. 特殊組件(FLASH, XAP)

 

如何做壓縮

要實現壓縮功能並不難,現代的一些Web 服務器都內置支持這個特性。針對微軟的IIS 7.0或者更高版本的話,可以通過參考下面的文章進行配置

Configuring HTTP Compression in IIS 7

http://technet.microsoft.com/en-us/library/cc771003(v=WS.10).aspx
我來對其做一些總結和演示

IIS 7.0內置支持Gzip壓縮,這個可以通過在安裝IIS的時候進行選擇

image
正確安裝之后,在管理工具中,就可以看到這樣一項功能

image

 

IIS 7.0 支持兩種方式的壓縮:靜態壓縮和動態壓縮。所謂靜態壓縮,就是對相對較大的內容,IIS 7.0會將它們壓縮成一個新文件,並且緩存在磁盤上(可以通過下面這個界面配置多大的文件要進行靜態壓縮,並且放在哪個目錄中),而動態壓縮就是對於某些提交小的內容,直接在運行時進行動態壓縮,不在磁盤上進行緩存(這種做法會帶來CPU的一些額外的負擔)

image

這個緩存的目錄中會自動為每個應用程序池(Application Pool)創建一個子目錄,以便保存那些靜態壓縮的文件

image

那么這種壓縮到底能有多少收益呢?我們可以看看下面這個截圖

image

上圖中看到,在我的一個測試網站中,它對兩個JAVASCRIPT文件做了壓縮,壓縮之后的尺寸分別為33KB和51KB,而這兩個文件的原始文件大小其實是92KB和197KB,我們可以由此看出來,壓縮比高達65%和74%。這是相當可觀的一個收益,而你要做的僅僅是啟用壓縮即可。

image

 

實際上這個文件已經被壓縮成下面這樣了(不再是純文本的腳本了)
image
不可否認的是,壓縮和解壓縮肯定會對CPU帶來一些額外的負擔的,但通常情況下,這個代價是很小的,尤其是與收益比較起來的話。
等等!我們好像漏了一個很重要的話題:上面的界面中,我們知道如何啟用壓縮,但卻沒有看到
  1. 如何設置哪些文件應該如何壓縮(無論靜態還是動態)。
  2. 到底是采用什么算法壓縮

 

這個細節被隱藏在下面的配置文件中

C:\windows\system32\inetsrv\config\applicationHost.config
image
打開這個文件,搜索一下httpCompression,你可以找到如下的配置信息,當然,你可以在這個基礎上做一些修改,前提是你先看懂它們。實際上不難,對吧
image


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM