重排與重繪

1.重排reflow

reflow指的是重新計算頁面布局

某個節點reflow時會重新計算節點的尺寸和位置，而且還有可能觸發其子節點，祖先節點和頁面上的其他節點reflow,在這之後再觸發一次repaint;

當render tree中的一部分(或全部)因為元素的規模尺寸,布局,隱藏等改變而需要重新構建,這就成為回流;

每個頁面至少需要一次回流,就是在頁面第一次載入的時候;

1.1導致reflow的操作有:

1.調整視窗的大小;

2.改變字型;

3.增加或者移除樣式表;

4.內容發生變化,比如input中輸入文字;

5.啟用css偽類,如:hover(ie中為兄弟節點偽類的啟用);

6.操作class屬性;

7.指令碼操作dom;

8.計算offsetwidth和offsetheight屬性;

1.2觸發頁面重新布局的一些css屬性

1.2.1 盒子模型相關屬性會觸發重新布局

width,height,padding,margin,display,border-width,border,min-height

1.2.2 定位屬性及浮動也會觸發重新布局

top,bottom,left,right,position,float,clear

1.2.3 改變節點內部文字結構也會觸發重布局

text-align,overflow-y,font-weight,overflow,font-family,line-height,white-space,font-size

2.重繪repaint

repaint或者redraw遍歷所有的節點檢測各個節點的可見性,顏色,輪廓,等可見的樣式屬性,然後根據檢測的結果重新更新頁面的響應部分;

當render tree中的一些元素需要更新屬性,而這些屬性只會影響元素的外觀,風格,而不會影響布局的,比如background-color,被稱為重繪;

2.1 只會觸發重繪不觸發重排的一些css屬性:

color,

border-style,border-radius,

visibility,

text-decoration,

background,background-image,background-position,background-repeat,background-size

outline,outline-color,outline-style,outline-width

box-shadow

var bstyle = document.body.style;
// cache
bstyle.padding =
"20px"
;// reflow, repaint
bstyle.border =
"10px solid red"
;//  再一次的 reflow 和 repaint
bstyle.color =
"blue"
;// repaint
bstyle.backgroundcolor =
"#fad"
;// repaint
bstyle.fontsize =
"2em"
;// reflow, repaint
// new dom element - reflow, repaint
document.body.
(document.
createtextnode
('dude!'))
;

注意:每修改一次樣式,他就會reflow或者repaint一次,一般來說,瀏覽器會把這樣的操作積攢一批,然後做一次reflow,這又叫非同步reflow或者增量非同步reflow,但是有些情況瀏覽器不會這樣,例如:resize視窗,改變頁面的預設字型,這些操作,頁面會了立馬進行reflow;

3.減少重排和重繪

重繪和回流在實際開發中很難避免,要儘量減少這種行為發生;

1.js盡量少訪問dom節點和css屬性,盡量不要過多的頻繁去增加,修改,刪除元素,這樣可能會頻繁的導致頁面reflow,可以先把該dom節點抽離到記憶體中進行複雜的操作然後在display到頁面上,(需要dom)

2.減少不必要的dom層級(dom depth),改變dom樹中的一級會導致所有層級改變,上至根部,下至改變節點的子節點,這導致大量時間耗費在執行reflow上面;

3.不要通過父級來改變元素樣式，最好直接改變子元素樣式，改變子元素樣式盡可能不影響父級元素和兄弟元素的大小和尺寸；

4.盡量通過class來設計元素樣式，切忌用style多次操作單個屬性；

5.盡可能的為產生動畫的html元素使用fixed或absolute的position，那麼修改他們的css是不會reflow的；

6.img標籤要設定寬高，以減少重排和重繪；

7.把dom離線後修改，如將乙個dom脫離文件流，如display:none，在修改屬性，這裡只發生一次回流；

8.盡量用transform來做形變和位移，不會造成回流；

9.權衡速度的平滑，比如實現乙個動畫，以1個畫素為單位的位移這樣最平滑，但是reflow就會過於頻繁，cpu很快就會被完全占用，如果以3個畫素為單位移動就會好很多；

10.不要用tables布局的另乙個原因就是tables中某個元素一旦觸發reflow就會導致table裡所有的其他元素reflow,在適合用tables的場合，可以設定table-layout為auto或fixed；

11.避免不必要的複雜的css選擇器，尤其是後代選擇器(descendant selectors),因為為了匹配選擇器將耗費更多的cpu;

注意:display:none會觸發reflow,而visibility:hidden只會觸發repaint,因為沒有發現位置變化;

總結:

1. 重排:元素的尺寸變化,位置變化; 2. 重繪:元素的顏色,背景,邊框,輪廓變化,但是元素的幾何尺寸沒有變;

3. `reflow`的成本比`repaint`成本高的多的多,`dom tree`裡的每個節點都會有`reflow`方法,乙個節點的~很可能會導致子節點,甚至父節點以及同級節點的`reflow`,在一些高效能的電腦上也許還沒什麼,但是如果`reflow`發生在手機上,那麼這個過程是非常痛苦和耗電的;

重排與重繪

重繪與重排

重排與重繪

重繪與重排

重排與重繪

重繪與重排

重排與重繪

重繪與重排

相關推薦