概述
CSS表達(dá)式會(huì)降低瀏覽器的渲染性能;用其他方案替換它們將會(huì)改善IE瀏覽器的渲染性能。
注意:本節(jié)最佳實(shí)踐只適用于Internet Explorer 5到7,它們支持CSS表達(dá)式。Internet Explorer 8放棄使用CSS表達(dá)式,而其他瀏覽器是不支持的。
詳細(xì)信息
作為一種動(dòng)態(tài)改變文檔屬性來響應(yīng)各種事件的的手段,Internet Explorer 5引入了CSS表達(dá)式或 “動(dòng)態(tài)屬性”。它們由在CSS聲明中的CSS屬性值里嵌入JavaScript表達(dá)式構(gòu)成。在大多數(shù)情況下,它們用于以下目的:
模擬其他瀏覽器支持但I(xiàn)E瀏覽器尚未支持的標(biāo)準(zhǔn)CSS屬性。
使用比編寫全面JavaScript注入式樣式更小巧,更便捷的方法,來提供動(dòng)態(tài)樣式和高級(jí)的事件處理。
不幸的是,CSS表達(dá)式對(duì)于性能的不良影響是相當(dāng)大的,因?yàn)槊慨?dāng)有事件觸發(fā),瀏覽器都要重新計(jì)算每個(gè)表達(dá)式,如一個(gè)窗口改變大小,鼠標(biāo)移動(dòng)等。CSS表達(dá)式的低性能表現(xiàn)是IE 8棄用它們的原因之一。如果你在網(wǎng)頁(yè)里使用CSS表達(dá)式,應(yīng)該盡一切努力來消除它們并且使用其他方法來達(dá)到同樣的功能。
建議
盡可能使用標(biāo)準(zhǔn)的CSS屬性。
IE 8已高度兼容標(biāo)準(zhǔn)CSS;IE 8只有在“兼容”模式才支持運(yùn)行CSS表達(dá)式,而在“標(biāo)準(zhǔn)”模式下則不支持。如果你不需要向后兼容舊版本的IE,你應(yīng)該轉(zhuǎn)換成標(biāo)準(zhǔn)的CSS屬性來替換所有對(duì)應(yīng)的CSS表達(dá)式。如需CSS屬性和支持它們的IE版本的完整列表,請(qǐng)參見MSDN的CSS屬性索引。如果你確實(shí)需要支持所需CSS屬性不可用的舊版本IE瀏覽器,請(qǐng)使用JavaScript來實(shí)現(xiàn)等效的功能。
使用JavaScript腳本樣式。
如果你正在使用CSS表達(dá)式來實(shí)現(xiàn)動(dòng)態(tài)樣式,用純JavaScript重寫它們是很有意義的,因?yàn)檫@樣既能提高IE性能,同時(shí)在其他瀏覽器獲得相同效果的支持。在這個(gè)由MSDN動(dòng)態(tài)屬性頁(yè)提供的例子里,下面的CSS表達(dá)式用于在瀏覽器里居中一個(gè)HTML塊元素,并且該元素的尺寸可以在運(yùn)行時(shí)改變,每次調(diào)整窗口大小都能重新定位在瀏覽器中心:
<div id="oDiv" style="background-color: #CFCFCF; position: absolute;
left:expression(document.body.clientWidth/2-oDiv.offsetWidth/2);
top:expression(document.body.clientHeight/2-oDiv.offsetHeight/2)">Example DIV</div>下面是一個(gè)使用JavaScript和標(biāo)準(zhǔn)CSS的等價(jià)例子:
<style>
#oDiv { position: absolute; background-color: #CFCFCF;}
</style><script type="text/javascript">
// Check for browser support of event handling capability
if (window.addEventListener) {
window.addEventListener("load", centerDiv, false);
新聞熱點(diǎn)
疑難解答
圖片精選