最佳化網站設計（二十八）：避免使用Filters(濾鏡)

前言

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

作為通用的原則，雅虎的工程師團隊曾經給出過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
   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的開發基本流程和核心技術有相當的瞭解，本系列文章很難對基礎知識做普及。

本文要討論的話題

這一篇我和大家討論的是第二十八條原則：Avoid Filters (避免使用濾鏡）。

和上一條原則（最佳化網站設計（二十七）：使用link而不是@import匯入樣式表）一樣，這一條原則也是關於標準化設計的問題。濾鏡這個功能也是IE當年為了提供更加豐富的一些頁面效果而設計的（相應的也會有代價）。

IE 所支援的濾鏡列表，可以參考下面這個連結

http://msdn.microsoft.com/en-us/library/ms532853(v=vs.85).aspx

其實不僅僅是別的瀏覽器可能不支援，IE 從9.0版本開始也放棄了這方面的支援。

我們可以期待的是，CSS 3.0作為後續的一個版本，會為網頁的特殊效果提供一個標準的支援。如果對CSS 3.0有興趣，希望預先做些學習的話，可以參考

http://www.w3school.com.cn/css3/index.asp

與之前濾鏡很相似的一些功能可以參考

1. http://www.w3school.com.cn/css3/css3_text_effect.asp
2. http://www.w3school.com.cn/css3/css3_2dtransform.asp
3. http://www.w3school.com.cn/css3/css3_3dtransform.asp
4. http://www.w3school.com.cn/css3/css3_transition.asp
5. http://www.w3school.com.cn/css3/css3_animation.asp

目前IE 在新標準的支援還處於比較靠後的位置，我們希望IE能對此作出更快的支援。