背景圖片設(shè)置對(duì)CSS渲染效率的研究

2020-03-24 18:07:03

字體：大中小

供稿：網(wǎng)友

這篇文章主要講了CSS對(duì)背景圖片渲染效率的一些經(jīng)驗(yàn)和研究，在52CSS.com中，還有著類(lèi)似CSS效率的相關(guān)文章，您可以參考：書(shū)寫(xiě)高效的CSS - 漫談CSS的渲染效率
http://www.52css.com/article.asp?id=787
CSS對(duì)Web頁(yè)面載入效率的影響
http://www.52css.com/article.asp?id=751樹(shù)型結(jié)構(gòu)豎線用樣式表（背景圖）來(lái)實(shí)現(xiàn)，樣式表背景圖片只需要加載一次，而現(xiàn)在這個(gè)模式（用多個(gè) img ）圖片雖然有緩存機(jī)制，但還是有可以每張小圖片都請(qǐng)求一次服務(wù)器的，所以我想用樣式表來(lái)實(shí)現(xiàn)有多么的好呀，代碼又精簡(jiǎn)，結(jié)構(gòu)又清晰，效果又酷，但是結(jié)果我將近一個(gè)星期的測(cè)試，我這種設(shè)想徹底失敗，原因就是樣式表的渲染效率太差。新的構(gòu)想沒(méi)能實(shí)現(xiàn)，心情有些沮喪，但我想也應(yīng)該讓大家分享一下這個(gè)測(cè)試成果。這里我再解釋一下樹(shù)型里的豎線，樹(shù)的左邊都有 ┌ ├ └ │ 這些豎線圖表示樹(shù)層次，我的1.0版里是用一張張的小圖片堆積起來(lái)的，而這種使用樣式表的是用 div /div （l是字母L）這種代碼來(lái)實(shí)現(xiàn)的，樣式表負(fù)責(zé)填充背景圖。Example Source Code [www.52css.com]
#www_52css_com .l0{background:url(line0.gif) no-repeat center}
#www_52css_com .l1{background:url(line1.gif) no-repeat center}
#www_52css_com .l2{background:url(line2.gif) no-repeat center}
#www_52css_com .l3{background:url(line3.gif) no-repeat center}
#www_52css_com .l4{background:url(line4.gif) no-repeat center}
#www_52css_com .ll{background:url(line5.gif) no-repeat center}
#www_52css_com .pm0{background:url(plus0.gif) no-repeat center}
#www_52css_com .pm1{background:url(plus1.gif) no-repeat center}
#www_52css_com .pm2{background:url(plus2.gif) no-repeat center}
#www_52css_com .pm3{background:url(plus3.gif) no-repeat center}
#www_52css_com .expand .pm0{background:url(minus0.gif) no-repeat center}
#www_52css_com .expand .pm1{background:url(minus1.gif) no-repeat center}
#www_52css_com .expand .pm2{background:url(minus2.gif) no-repeat center}
#www_52css_com .expand .pm3{background:url(minus3.gif) no-repeat center}上面這段CSS是我在腳本里動(dòng)態(tài)生成的一段樣式的片段，我把它貼上來(lái)，有助于后面的講解。運(yùn)用樣式表之后，果真精簡(jiǎn)了許多，每個(gè)節(jié)點(diǎn)的生成也夠快，但我發(fā)現(xiàn)，當(dāng)我的樹(shù)節(jié)點(diǎn)量達(dá)到，比如說(shuō)300-500個(gè)節(jié)點(diǎn)之后，節(jié)點(diǎn)生成的效率沒(méi)有影響什么，但每個(gè)節(jié)點(diǎn)的展開(kāi)/收縮很慢很慢，需要幾秒鐘以上甚至10秒，且這個(gè)期間的CPU占用率是100％。說(shuō)明一下，樹(shù)型的展開(kāi)/收縮是設(shè)置父節(jié)點(diǎn)的 style.display = none|block 來(lái)實(shí)現(xiàn)的。我的html' target='_blank'>電腦配置是：AMD2800+ 1GDDR400內(nèi)存，配置不太差的。我首先的反應(yīng)是：是不是用了太多的 table 影響了效率？因?yàn)槲颐恳粋€(gè)節(jié)點(diǎn)都用了一個(gè) table ，但是我把 table 換成了 div 、 span 等，效率沒(méi)有什么改善，說(shuō)明這個(gè)CPU占用率100％的問(wèn)題不是HTML標(biāo)簽的問(wèn)題，那么剩下來(lái)的問(wèn)題就是這里使用了樣式表。以一個(gè)500節(jié)點(diǎn)的量來(lái)說(shuō)吧，1.0里左邊大概要堆積2000個(gè)左右的小圖片。這種情況在瀏覽器端設(shè)置本地不緩存的時(shí)候會(huì)存在很大的問(wèn)題，要加載這些多的小圖片需要消耗不少的時(shí)間和服務(wù)器資源，所以我才會(huì)有這種新的用樣式表來(lái)解決的想法，現(xiàn)在換成樣式表法，也就是大概有2000個(gè)地方需要用樣式表來(lái)渲染出背景圖。我測(cè)試了各種情況，再對(duì)比1.0版的代碼得出的結(jié)論是：CPU的點(diǎn)用率如此之高，唯一的原因也就只有這種渲染的耗時(shí)了。驗(yàn)證也非常簡(jiǎn)單，我把上面的樣式表的左邊 #www_52css_com 這部分去掉，也就是去掉樣式表的依托關(guān)系，測(cè)試的結(jié)果發(fā)現(xiàn)效率改善了很多，但耗時(shí)依然是可觀的，有3-5秒之多。另外我換了不同的瀏覽器，測(cè)試的結(jié)果也不太一樣，在IE里最為惡心，比如說(shuō)我在某個(gè)節(jié)點(diǎn)有500子節(jié)點(diǎn)，我將它收起（CPU100％，等待3-5秒），也就是display="none"，這時(shí)候若我去收起這個(gè)節(jié)點(diǎn)的父節(jié)點(diǎn)（這個(gè)節(jié)點(diǎn)沒(méi)有其它的同級(jí)節(jié)點(diǎn)，即它的父節(jié)點(diǎn)只有它這么一個(gè)子節(jié)點(diǎn)），照理說(shuō)只有一個(gè)節(jié)點(diǎn)，收起應(yīng)該是即時(shí)的事，但結(jié)果不然，結(jié)果又是3-5秒的CPU100％，這個(gè)讓我狂郁悶，也就是說(shuō)即使HTML對(duì)象被display="none"隱藏掉了，但是對(duì)它的父級(jí)進(jìn)行任何操作的時(shí)候，IE會(huì)對(duì)這些被隱藏的對(duì)象用樣式表重新渲染一遍，真是搞不懂IE的開(kāi)發(fā)者當(dāng)初是怎么想的。我又到FIREFOX里測(cè)試了一下，在收起的時(shí)候(display=none)是瞬間的，可以肯定，F(xiàn)F對(duì)待被隱藏的對(duì)象不會(huì)再消耗精力。當(dāng)然展開(kāi)的時(shí)候所有的瀏覽器都一樣：3-5秒的CPU100％，不過(guò)FF稍微要快些。通過(guò)上面的這些現(xiàn)象我得出這么一個(gè)結(jié)論：樣式表在動(dòng)態(tài)渲染的時(shí)候效率并不高；在父容器發(fā)現(xiàn)狀態(tài)變化的時(shí)候會(huì)引起它的所以子孫對(duì)象的樣式表重新渲染；FireFox 對(duì)待被display=none隱藏的對(duì)象不會(huì)重新渲染而IE會(huì)。那么這種樣式表的渲染效率問(wèn)題以前為什么一直沒(méi)有被發(fā)現(xiàn)呢？嘿嘿，大家做網(wǎng)頁(yè)的時(shí)候難得會(huì)做到這種極端的時(shí)候，一個(gè)頁(yè)面里有幾千個(gè)需要樣式表渲染背景圖。通常也就幾個(gè)地方或者幾十個(gè)地方了，所以感覺(jué)不出來(lái)渲染的效率，也感覺(jué)不出這方面在不同的瀏覽器之間的差別。但是在做樹(shù)這些的控件的時(shí)候必定會(huì)碰到各種極端的問(wèn)題，比如大數(shù)據(jù)量的數(shù)組，生成的HTML對(duì)象的多少等等，象這種渲染的效率差別也只是我在寫(xiě)JS腳本時(shí)碰到的問(wèn)題之一而已。今天我把這個(gè)測(cè)試結(jié)果共享出來(lái)是希望對(duì)大家以后寫(xiě)程序的時(shí)候有所借薦，在做設(shè)計(jì)的時(shí)候有所考慮。除此而外，您還可以參考：
CSS加油站：如何編寫(xiě)代碼才能更有效率（編程同樣適用）
http://www.52css.com/article.asp?id=613
CSS提高網(wǎng)頁(yè)的維護(hù)更新效率
http://www.52css.com/article.asp?id=393
本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS盒子模式詳解七

下一篇：CSS隔行換色