關於Repaint(重繪)與Reflow(回流)

2021-07-31 03:22:36 字數 1006 閱讀 7157

關於回流和重繪在剛開始學習前端時一般不會太在意,因為其影響的大多是執行時的效能問題。

顯然,頻繁地進行回流和重繪會導致執行效能的下降,所以,在要求效能的時候,往往要注意減少頁面的回流和重繪。

repaint重繪

不會改變dom的排版,僅僅改變某個元素的一些表現。比如,字型顏色的變化,背景顏色,透明度,輸入框的值的改變等等。

reflow回流

這個相較於重繪的改動更大。當dom的排版改變時,會觸發重繪。因此,改變某個元素的長寬,顯示與否(display),以及瀏覽器視窗大小改變,字型大小改變,獲取瀏覽器屬性值(offsetheight、offsetwidth),滾動頁面,dom操作等。

class='outer'>

class='inner'>abc

outer = document.getelementsbyclassname('outer');

inner = document.getelementsbyclassname('inner');

//bad

outer.style.color = 'red';

//good

inner.style.color = 'red';

顯然,兩種方式都改變了「abc」的顏色,但是通過最裡面那層改變導致的重繪範圍將更小。

//bad

inner.style.color = 'red';

inner.style.backgroundcolor = 'blue';

...//good

.newclass

inner.classname += 'newclass';

//jquery

inner.css();

上面第一種方法,分多步對乙個元素的樣式進行了修改,這樣每一步都會導致重繪,效能自然降低。

而第二種和第三種方法,將需要改變的樣式放在乙個class中或者一次性改變,只會發生一次重繪,效能更好。

關於repaint 重繪 和reflow 回流

repaint就是重繪,reflow就是回流。repaint主要是針對某乙個dom元素進行的重繪,reflow則是回流,針對整個頁面的重排 嚴重性 在效能優先的前提下,效能消耗 reflow大於repaint。體現 repaint是某個dom元素進行重繪 reflow是整個頁面進行重排,也就是頁面所...

回流 reflow 重繪 repaint

首先我們要明白的是,頁面的顯示過程分為以下幾個階段 生成dom樹 包括display none的節點 在dom樹的基礎上根據節點的集合屬性 margin,padding,width,height等 生成render樹 不包括display none,head節點,但是包括visibility hid...

重排(reflow) 重繪(repaint)

重排 重構 回流 reflow 當渲染樹中的一部分 或全部 因為元素的規模尺寸,布局,隱藏顯示等改變而需要重新構建,這就稱為回流 reflow 每個頁面至少需要一次回流,就是在頁面第一次載入的時候。重繪 repaint 當盒子的位置 大小以及其他屬性,例如顏色 字型大小等都確定下來之後,瀏覽器便把這...