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

