為什麼盡量避免使用 CSS 運算式

http://loo2k.com/blog/why-avoid-css-expression/

為什麼盡量避免使用 CSS 運算式

4

七月 12, 2011 10:28 | 前端開發 | Add a comment

以前曾經發表過一篇文章 解決 IE6 position:fixed 固定定位問題，講的是使用 CSS 運算式來解決 IE6 無法使用 positio: fixed; 固定定位的問題；在文章發表之後的到現在，一些朋友告訴我 CSS 運算式可能會影響到網站的效能；

經過這些朋友們的提醒，我更多的留意了關於 CSS 運算式方面的知識，而這篇文章，是我在看 《高效能網站建設指南》後，以及之前做的一些學習，我想總結下 “為什麼盡量避免使用 CSS 運算式”；

什麼是 CSS Expression？

CSS Expression （CSS 運算式），是一種使用動態設定 CSS 屬性的方式，並且被 IE5 以上的版本所支援，但是 IE8 的標準模式已不再支援 CSS 運算式了[1]；

一個簡單的 CSS 運算式

1. body {
2. background-color: expression((new Date()).getHours()%2?"#B8D4FF":"#F08A00");
3. }

這段代碼的作用是能讓你頁面中 body 的背景色每隔一小時變換一次；

CSS Expression 帶來的效能問題

是的，參考 MSDN “關於動態屬性” 的文檔，你會發現，其實 CSS 運算式還是非常強大的，比如你可以使用 CSS 運算式實現 min-width 屬性，隔行換色，類比 :hover, :before, :after 等偽類；

但是，正式因為 CSS 運算式太強大了，以至於 CSS 運算式帶來的嚴重的效能問題：“為了確保有效性，CSS 運算式會進行頻繁的求值”，到底有多頻繁？就是在你改變視窗大小，滾動頁面甚至移動滑鼠都會觸發運算式進行求值，如此頻繁的求值以至於瀏覽器的效能收到嚴重的影響；

關於對 CSS Expression 的效能測試

這個測試的方法是來自於最近一段時間在看的《高效能網站建設指南》中的規則7；

1. P {
2. width: expression( setCntr(), document.body.clientWidth<600?"600px":"auto");
3. min-width:600px;
4. border:1px solid;
5. }

這個方法通過綁定一個 setCntr() 函數到 CSS 運算式上，統計頁面執行了多少次的 CSS 運算式，並顯示在一個文字框裡面；你也可以通過 IE5 ~ IE6 訪問 http://stevesouders.com/hpws/expression-counter.php 進行測試；

測試結果

頁面內有 10 個段落，載入完頁面大概執行了 40 次的 CSS 運算式，然後在你改變頁面大小，滾動頁面，甚至移動滑鼠，在我的測試裡不動滑鼠仍然會執行 CSS 運算式，幾萬次的求值根本不在話下，而且在點擊文字框之後，IE 就已經卡死了；

避免使用 CSS Expression

好吧，這是一個總結；雖然還有對 CSS 運算式進行最佳化的方法（你可以在參考連結中找到），但是這不是這篇文章要總結的，這篇文章要總結的是為什麼盡量避免使用 CSS 運算式；

CSS 運算式雖然強大，但是會給瀏覽器帶來很嚴重的效能問題，並拖慢網頁的載入速度；在可能的前提下，盡量避免使用 CSS 運算式！

參考連結

1. CSS Expression 用法總結
2. CSS Expression 的最佳化

腳註

1. IE 8 的標準模式不再支援 CSS 運算式

css IE

More Articles about

css, IE

• 解決 IE6 position:fixed 固定定位問題