CSS reflow實(shí)例教程

2024-07-11 08:46:07

字體：大中小

供稿：網(wǎng)友

frame主要的動(dòng)作有三個(gè)：

* 構(gòu)造frame, 以建立對(duì)象樹(shù)（DOM樹(shù)）
* reflow, 以確定對(duì)象位置，或者是調(diào)用mozilla的Layout（這里是指源碼的實(shí)現(xiàn)）
* 繪制，以便對(duì)象能顯示在屏幕上

總的來(lái)說(shuō)，reflow就是載入內(nèi)容樹(shù)（在HTML中就是DOM樹(shù)）和創(chuàng)建或更新frame結(jié)構(gòu)的響應(yīng)的一種過(guò)程。

要提高頁(yè)面性能，其實(shí)就是避免reflow的開(kāi)銷(xiāo)。那么，有哪些方面是需要reflow的呢？比如，未指定圖片寬高的話(huà)，圖片的載入會(huì)使頁(yè)面 reflow, 因?yàn)橐鶕?jù)圖片寬高來(lái)更新frame。這里就有一個(gè)提高頁(yè)面性能的小技巧：如果事先能夠確定圖片寬高的話(huà)，最好在HTML里寫(xiě)上。

在編寫(xiě)一些常見(jiàn)的動(dòng)態(tài)效果時(shí)，一般使用CSS的display來(lái)切換可見(jiàn)性。很不幸，這也會(huì)產(chǎn)生reflow. 把元素置為display:none，相當(dāng)于把這個(gè)元素的frame銷(xiāo)毀了，再置回非none時(shí)，需要重新構(gòu)造frame，這就產(chǎn)生了reflow. 而另外一個(gè)切換可見(jiàn)性的屬性visibility則不存在reflow問(wèn)題，置為visibility:hidden的元素的frame并沒(méi)有銷(xiāo)毀，需要顯示的時(shí)候其實(shí)就是一個(gè)繪制（上面提到的動(dòng)作第三步）過(guò)程而已，沒(méi)有reflow，因此效率會(huì)更高。如果你看過(guò)一些JavaScript庫(kù)／框架的源碼，會(huì)發(fā)現(xiàn)它們大量使用visibility而不是display，道理應(yīng)該如此。

根據(jù)文中提到的reflow，想到的疑點(diǎn)：

<div>
<div>…content…</div>
<div><img src="" /></div>
</div>
當(dāng)在HTML里沒(méi)指定圖片的寬高時(shí)，reflow只是針對(duì)img元素還是它的父元素甚至更多祖先元素？

在常規(guī)頁(yè)面中大量用到的標(biāo)簽切換情況也類(lèi)似？你知道嗎？

上一篇：css 等寬導(dǎo)航欄設(shè)計(jì)技巧

下一篇：IE6下Select元素被div等元素覆蓋的解決辦法