不要使用CSS Expression的原因分析

來源:互聯網
上載者:User

在CSS Expression中使用JavaScript運算式。CSS屬性根據JavaScript運算式的計算結果來設定。
CSS Expression在其它瀏覽器中不起作用,因此在跨瀏覽器的編碼中單獨針對IE設定時會比較有用。
從IE5開始支援CSS Expression。我們看下面的代碼: 複製代碼 代碼如下:background-color: expression( (new Date()).getHours()%2 ? "#F00" : "#00F" );

上面的代碼是使用CSS Expression,實現隔一個小時切換一次背景顏色。
CSS Expression的問題就在於它的計算頻率要比想象的多出很多。不僅僅是在頁面顯示和縮放時,就是在頁面滾動、乃至移動滑鼠時都會要重新計算一次。給CSS Expression增加一個計數器可以跟蹤運算式的計算頻率。在頁面中隨便移動滑鼠都可以輕鬆達到10000次以上的計算量。
一個減少CSS Expression計算次數的方法就是使用一次性的運算式,它在第一次運行時將結果賦給指定的樣式屬性,並用這個屬性來代替CSS Expression。
如果樣式屬性必須在頁面周期內動態地改變,使用事件控制代碼來代替CSS運算式是一個可行辦法。如果必須使用CSS Expression,一定要記住它們要計算成千上萬次並且可能會對你頁面的效能產生影響。不要讓您的使用者感覺開啟你的頁面,機器會變的很慢。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.