優(yōu)化css expression性能的方法

這篇文章給大家分享的是有關(guān)優(yōu)化css expression性能的方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

優(yōu)化css expression性能的方法：1、將CSS Expression在匹配的元素中僅執(zhí)行一次；2、在CSS Expression語(yǔ)句體里，將觸發(fā)該Expression的CSS屬性重置即可。

如何優(yōu)化css expression性能？

IE 瀏覽器中 CSS Expression 特性的最大的問題：會(huì)反復(fù)執(zhí)行，每秒鐘可能執(zhí)行了成百上千次，有嚴(yán)重的性能問題。如

何對(duì) CSS Expression 進(jìn)行優(yōu)化呢？

至少：如果我們將 CSS Expression 在匹配的元素中僅執(zhí)行一次，性能將會(huì)提升很大。

old9 在 《CSS Expression Reloaded》一文中提供了一個(gè)解決方案：

在 CSS Expression 語(yǔ)句體里，將觸發(fā)該 Expression 的 CSS 屬性重置。

例如：

div {
    zoom: expression(function(el){el.style.zoom = "1"; alert(el.tagName);}(this));
}

補(bǔ)充幾點(diǎn)：

CSS Expression 執(zhí)行在任意一個(gè)匹配的元素上。

在 CSS expression 內(nèi)， “this”關(guān)鍵字指向當(dāng)前匹配的 HTML 元素。

CSS 屬性選用一些不常用的屬性來觸發(fā)，觸發(fā)完重置回默認(rèn)值。

還有一個(gè)類似的解決方式：

div {
    -singlex: expression(this.singlex ? 0 : (function(t) { 
    alert(t.tagName); t.singlex = 0; 
    } )(this));
}

但此代碼并沒有完全解決 CSS Expression 最大的性能問題。因?yàn)槊看斡|發(fā)還是要去執(zhí)行 Expression 腳本，比如你滾動(dòng)鼠標(biāo)的中間滾輪。

最后強(qiáng)調(diào)，僅是對(duì) CSS Expression 做了優(yōu)化，但并未說 CSS Expression 就不存在其他方面的問題。

感謝各位的閱讀！關(guān)于“優(yōu)化css expression性能的方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！