優化網站設計（七）：避免在CSS中使用表達式

前言

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

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

本文要討論的話題

這一篇我來和大家討論個原則：Avoid CSS Expressions  （避免在CSS中使用表達式）

最早的CSS是不支持所謂的表達式的，微軟的IE從5.0開始引入了這種概念，意思是希望我們擁有定義動態的CSS樣式的能力，詳細的文章請參考http://msdn.microsoft.com/en-us/library/ms537634(v=VS.85).aspx，下面有一個簡單的例子：

background-color: expression((new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

這里可以使用一個特殊的expression函數，其實這是一個javascript的函數。它可以進行根據一個表達式進行計算，動態地決定background-color的值。

看起來是一個相當不錯的功能，但我們可能不會想到這個表達式會運算很多次（這個具體的次數可能遠遠超過你的想象）

我隨便定義了一個界面，並添加了如下的樣式定義

    <style>
        body {
            background-color: expression((new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
        }
    </style>

打開之后，只是鼠標動來動去，或者滾動條上下拖動幾下，就會執行1865次。如下圖所示

很顯然，這是很可觀的一些成本。這還是比較簡單的表達式，試想一下，如果有更加復雜的表達式呢？這些函數需要一次一次的執行，毫無疑問地會拖累頁面執行的效率，乃至瀏覽器的性能。

正因為如此，不光是其他瀏覽器都不支持，同時w3c標准組織也不支持這種方式。鑒於此，微軟方面也於2008年（彼時發布了IE 8）的時候，正式終止了對這種功能的支持。下面這篇文章是當時所發出的聲明：

http://blogs.msdn.com/b/ie/archive/2008/10/16/ending-expressions.aspx

文中提到的三點不再支持CSS表達式的原因，顯然是很中肯的（更加符合標准，更加有利於性能提升，以及減少受攻擊面）

Why end support for expressions ?

• To comply with standards
  • Expressions are proprietary to Internet Explorer and as such not interoperable.
  • A common use-case for expressions was to fix IE bugs or to emulate those CSS 2.1 features not yet supported by the browser, for example, min-width and max-width. We have not only worked hard to fix these bugs in IE8 but our new layout engine supports the missing features natively.
• To improve performance
  • Expressions evaluation has a high runtime cost; web performance experts like Steve Souders recommend avoiding them to improve front-end performance
• To reduce the browser attack surface
  • Because they expose a script execution context, CSS expressions constitute a possible script injection attack vector.

 

那么，情況已經很清楚了，如果你根本不了解CSS表達式，那么恭喜你，你不需要再了解它了。如果你以前用過CSS表達式，而且對它還比較喜歡，那么我也希望你能慎重地考慮一下這條建議，並且毅然地選擇放棄這種功能，擁抱標准吧。

好吧，你可能已經同意了我的提議，但是仍然有一個疑問，那么如果我們真的希望實現動態的CSS，怎么辦呢？例如上面這個例子，我們希望根據當前的時間，來決定顯示什么背景顏色。（小時為單數時顯示一種顏色，為復數時顯示另外一種顏色）。

你在想這個問題是嗎？那我們為什么不像下面這么做呢？

    <script src="Scripts/jquery-2.0.0.min.js"></script>
    <script>
        $(function () {
            $("body").css("background-color", (new Date()).getHours() % 2 ? "#B8D4FF" : "#F08A00");
        });
    </script>

我們不光發現調用次數少了，而且這種代碼在所有主流瀏覽器都能實現一致的用戶體驗，何樂而不為呢？

【備注】因為使用了jquery,所以會有一些其他的方法調用。