10條影響CSS渲染速度的寫法與使用建議第1/3頁
更新時(shí)間:2008年09月06日 22:01:12 作者:
最近很少寫CSS了,以后也可能寫的會(huì)很少了,所以還是想把自已的一些經(jīng)驗(yàn)?zāi)芎痛蠹曳窒硪幌?,希望能給大家一些幫助!
這篇文章主要寫的提高網(wǎng)頁在客戶端瀏覽器的渲染速度的CSS部分,暫時(shí)總結(jié)了10條。
1、*{} #jb51 *{} 盡量避開
由于不同瀏覽器對HTML標(biāo)簽的解釋有差異,所以最終的網(wǎng)頁效果在不同的瀏覽器中可能是不一樣的,為了消除這方面的風(fēng)險(xiǎn),設(shè)計(jì)者通常會(huì)在CSS的一個(gè)始就把所有標(biāo)簽的默認(rèn)屬性全部去除,以達(dá)到所有簽標(biāo)屬性值都統(tǒng)一的效果。所以就有了*通配符。*會(huì)遍歷所有的標(biāo)簽;
*{margin:0; padding:0}
如果這樣寫,頁面中所有的標(biāo)簽的margin全是0;padding也是0;
#jb51 *{margin:0; padding:0}
如果這樣寫,在id等于jb51下邊的所有標(biāo)簽的margin全是0;padding也是0;
這樣寫的問題是:
a.遍歷會(huì)消耗很多的時(shí)間,如果你的HTML代碼寫的不規(guī)范或是某一簽標(biāo)沒有必合,這個(gè)時(shí)間可能還會(huì)更長;
b.很多的標(biāo)簽本來就沒有這個(gè)屬性或?qū)傩员旧砭褪墙y(tǒng)一的,那么更給設(shè)置一次,也有時(shí)間的開消;
建議的的解決辦法:
a.不要去使用生僻的標(biāo)簽,因?yàn)檫@些標(biāo)簽往往在不同瀏覽器中解釋出來的效果不一樣;所以你要盡可能的去使用那些常用的標(biāo)簽;
b.不要使用*;而是把你常用到的這些標(biāo)簽進(jìn)行處理;例如:body,li,p,h1{margin:0; padding:0}
2、濾鏡的一些東西不要去用
IE的一些濾鏡在FIREFOX中不支持,往往寫一些效果時(shí)你還是使用CSS HACK;而濾鏡是一個(gè)非常毫資源的東西;特別是一些羽化、陰影和一個(gè)前透明的效果;
例如一個(gè)陰影效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
1、*{} #jb51 *{} 盡量避開
由于不同瀏覽器對HTML標(biāo)簽的解釋有差異,所以最終的網(wǎng)頁效果在不同的瀏覽器中可能是不一樣的,為了消除這方面的風(fēng)險(xiǎn),設(shè)計(jì)者通常會(huì)在CSS的一個(gè)始就把所有標(biāo)簽的默認(rèn)屬性全部去除,以達(dá)到所有簽標(biāo)屬性值都統(tǒng)一的效果。所以就有了*通配符。*會(huì)遍歷所有的標(biāo)簽;
*{margin:0; padding:0}
如果這樣寫,頁面中所有的標(biāo)簽的margin全是0;padding也是0;
#jb51 *{margin:0; padding:0}
如果這樣寫,在id等于jb51下邊的所有標(biāo)簽的margin全是0;padding也是0;
這樣寫的問題是:
a.遍歷會(huì)消耗很多的時(shí)間,如果你的HTML代碼寫的不規(guī)范或是某一簽標(biāo)沒有必合,這個(gè)時(shí)間可能還會(huì)更長;
b.很多的標(biāo)簽本來就沒有這個(gè)屬性或?qū)傩员旧砭褪墙y(tǒng)一的,那么更給設(shè)置一次,也有時(shí)間的開消;
建議的的解決辦法:
a.不要去使用生僻的標(biāo)簽,因?yàn)檫@些標(biāo)簽往往在不同瀏覽器中解釋出來的效果不一樣;所以你要盡可能的去使用那些常用的標(biāo)簽;
b.不要使用*;而是把你常用到的這些標(biāo)簽進(jìn)行處理;例如:body,li,p,h1{margin:0; padding:0}
2、濾鏡的一些東西不要去用
IE的一些濾鏡在FIREFOX中不支持,往往寫一些效果時(shí)你還是使用CSS HACK;而濾鏡是一個(gè)非常毫資源的東西;特別是一些羽化、陰影和一個(gè)前透明的效果;
例如一個(gè)陰影效果:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
《CSS3實(shí)戰(zhàn)》筆記--漸變設(shè)計(jì)(二)
這篇文章主要介紹了《CSS3實(shí)戰(zhàn)》筆記--漸變設(shè)計(jì)(二,需要的朋友可以參考下2016-05-05
table高級應(yīng)用把表格進(jìn)行到底(必看)
看了poorfish的這篇文章感覺不錯(cuò),先不考慮其它的,現(xiàn)在雖然流行div+css ,但仍有許多朋友還在用table,div+css主要考慮顯示速度,但多瀏覽器的兼容性,仍是個(gè)問題。2007-12-12
Firefox返回時(shí)Iframe的顯示Bug的解決方法
一個(gè)頁面有4個(gè)Iframe來顯示flash內(nèi)容,其中第二個(gè)iframe的顯示是用Javascript控制的,只有當(dāng)特定的cookie存在時(shí)才出現(xiàn),否則顯示普通的文本。2008-05-05
提高CSS網(wǎng)頁渲染效率的11點(diǎn)注意事項(xiàng)
CSS學(xué)習(xí)越深入,我們需要關(guān)注的細(xì)節(jié)之處就越多,今天我們通過11個(gè)注意點(diǎn)來提高CSS的網(wǎng)頁渲染效率。2008-08-08
關(guān)于td的height和line-height兼容問題
寫頁面的時(shí)候,遇到處理數(shù)據(jù)的時(shí)候還是要用TABLE的,但是有的時(shí)候顯示出來table, ie和ff的高不同。2008-04-04
《CSS3實(shí)戰(zhàn)》筆記--漸變設(shè)計(jì)(三)
這篇文章主要介紹了《CSS3實(shí)戰(zhàn)》筆記--漸變設(shè)計(jì)(三,需要的朋友可以參考下2016-05-05

