CSS reflow例項教程

2022-09-25 14:24:12 字數 894 閱讀 9344

frame主要的動作有三個:

* 構造frame, 以建立物件樹(dom樹)

* reflow, 以確定物件位置,或者www.cppcns.com是呼叫mozilla的layout(這裡是指原始碼的實現)

* 繪製,以便物件能顯示在螢幕上

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

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

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

根據文中提到的reflow程式設計客棧,想到的疑點:

…content…

當在html裡沒指定的寬高時,reflow只是針對img元素還是它的父元素甚至更多祖先元素?

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

本文標題: css reflow例項教程

本文位址: /web/css/29217.html

awk例項教程

1.awk語法規則 awk 2.顯示最近登入的5個帳號 last n 5 awk root root root dmtsai root awk工作流程是這樣的 讀入有 n 換行符分割的一條記錄,然後將記錄按指定的域分隔符劃分域,填充域,0則表示所有域,1表示第乙個域,n表示第n個域。預設域分隔符是 ...

php小偷例項教程

以 http mtv.8391.com 為例,偷取mtv名稱 歌手 路徑 1 對原 進行 分析 檢視其原檔案,判斷出呼叫mtv路徑的檔案 利用 檢視程式,取得 http mtv.8391.com yxwen.asp?id 3488頁面 3488為隨機,只是了解頁面 2 對要偷取的頁面進行 分析 ht...

SQL簡明例項教程

create table customer id int 11 not null auto increment,lastname char 50 default null,firstname char 50 default null,address char 50 default null,city...