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 固定定位問題