DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS實例教程:reflow
CSS實例教程:reflow
編輯:CSS詳解     

在CSS規范中有一個渲染對象的概念,通常用一個盒子(box, rectangle)來表示。mozilla通過一個叫frame的對象對盒子進行操作。frame主要的動作有三個:

* 構造frame, 以建立對象樹(DOM樹)
* reflow, 以確定對象位置,或者是調用mozilla的Layout(這裡是指源碼的實現)
* 繪制,以便對象能顯示在屏幕上

總的來說,reflow就是載入內容樹(在Html中就是DOM樹)和創建或更新frame結構的響應的一種過程。

要提高頁面性能,其實就是避免reflow的開銷。那麼,有哪些方面是需要reflow的呢?比如,未指定圖片寬高的話,圖片的載入會使頁面 reflow, 因為要根據圖片寬高來更新frame。這裡就有一個提高頁面性能的小技巧:如果事先能夠確定圖片寬高的話,最好在Html裡寫上。

在編寫一些常見的動態效果時,一般使用CSS的display來切換可見性。很不幸,這也會產生reflow. 把元素置為display:none,相當於把這個元素的frame銷毀了,再置回非none時,需要重新構造frame,這就產生了reflow. 而另外一個切換可見性的屬性visibility則不存在reflow問題,置為visibility:hidden的元素的frame並沒有銷毀,需要顯示的時候其實就是一個繪制(上面提到的動作第三步)過程而已,沒有reflow,因此效率會更高。如果你看過一些JavaScript庫/框架的源碼,會發現它們大量使用visibility而不是display,道理應該如此。

根據文中提到的reflow,想到的疑點:

<div>
<div>…content…</div>
<div><img src=”‘ /></div>
</div>
當在Html裡沒指定圖片的寬高時,reflow只是針對img元素還是它的父元素甚至更多祖先元素?

在常規頁面中大量用到的標簽切換情況也類似?你知道嗎?

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved