CSS Expression 優(yōu)化

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 語句體里,將觸發(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)值。
最近在 Ajaxian 的文章《Creating a querySelector for IE that runs at “native speed”》 中看到作者 Dion Almaer 也提供了一個(gè)類似的解決方式:
但此代碼并沒有完全解決 CSS Expression 最大的性能問題。因?yàn)槊看斡|發(fā)還是要去執(zhí)行 Expression 腳本,比如你滾動(dòng)鼠標(biāo)的中間滾輪。
最后強(qiáng)調(diào),僅是對(duì) CSS Expression 做了優(yōu)化,但并未說 CSS Expression 就不存在其他方面的問題。
相關(guān)文章
- 圖片作為網(wǎng)頁的基本元素是影響頁面加載速度的關(guān)鍵因素之一,和圖片相關(guān)的技術(shù)也有很多CSS Sprites(圖片合并)、延遲加載、圖片漸進(jìn)增強(qiáng)等等,本文分享網(wǎng)頁圖片優(yōu)化的實(shí)用工2013-02-26
使用css sprites來優(yōu)化你的網(wǎng)站在Retina屏幕下顯示實(shí)現(xiàn)原理與代碼
CSS sprites(CSS圖片精靈)已經(jīng)存在很久了。事實(shí)上,八年前就有CSS Sprites的詳細(xì)介紹。CSS Sprites為一些大型的網(wǎng)站節(jié)約了帶寬,讓提高了用戶的加載速度和用戶體驗(yàn),不需要2012-12-24div css布局解決瀏覽器兼容及優(yōu)化等實(shí)用技巧
本文整理了一些在div+css 布局過程中的一些經(jīng)驗(yàn)技巧如:瀏覽器兼容、規(guī)范寫法、簡(jiǎn)寫等一系列,需要的朋友可以參考下2012-12-19css sprites技術(shù) CSS Sprites圖片切割術(shù)與圖片優(yōu)化深入理解
近段時(shí)間一直在做前臺(tái)的一些東西,涉及到很多div+css的問題,原來這個(gè)叫CSS Sprites技術(shù),我對(duì)前臺(tái)這些個(gè)東西比較感興趣,所以會(huì)去了解多一點(diǎn)2012-12-03網(wǎng)頁設(shè)計(jì)中的CSS Sprites技術(shù)介紹及其優(yōu)化方法
CSS Sprites 技術(shù)對(duì)于廣大的前端工程師來說應(yīng)該是一點(diǎn)也不陌生。這個(gè)被國(guó)內(nèi)開發(fā)者昵稱為CSS精靈 CSS雪碧的家伙到底解決了什么問題,我們又怎樣合理使用這個(gè)技術(shù)呢?下面讓我2012-05-31- CSS常用優(yōu)化技巧,提高css書寫技巧。2011-10-07
- CSS 網(wǎng)站性能優(yōu)化筆記,大家可以結(jié)合下js 網(wǎng)站性能優(yōu)化筆記。2011-05-24
有利于SEO優(yōu)化的DIV+CSS的命名規(guī)則小結(jié)
DIV+CSS的命名規(guī)則小結(jié),讓搜索引擎讀懂你的樣式表。2010-03-17CSS Sprite優(yōu)化 減少HTTP鏈接數(shù)
CSS Sprite 最大的好處是:減少 HTTP 鏈接數(shù)。提高頁面質(zhì)量2009-08-03- 明顯HTML,暗渡“公用腳本” 減少web頁面下載時(shí)間的關(guān)鍵就是設(shè)法減小文件大小。當(dāng)多個(gè)頁面共用一些成分內(nèi)容時(shí),就可以考慮將這些公用部分單獨(dú)分離出來。比2008-10-17