《瀏覽器基礎》之重繪與重排

2022-07-05 00:33:15 字數 1304 閱讀 9039

重繪和重排都是發生在瀏覽器呈現引擎（渲染引擎）中的由於dom元素改變所作出的事件過程。重繪不一定引起重排，而重排一定引起重繪。

重繪：（repaint） 有的資料也被叫做改型（ restyling）,是由於元素的外觀樣式屬性的改變所觸發的行為，如visibility、背景顏色，邊框顏色等屬性。

重排：（reflow）也被成為重新布局（relayout），是由於元素的結構屬性（或者說是幾何屬性）改變所觸發的行為，主要場景如下：

通常瀏覽器對重繪和重排做了一些優化處理，比如：

如上描述，並不是每次屬性改變都會引起重排或重繪，有時，它會等一段**執行結束再一起處理，這樣就只發生一次重排。但是如果直接獲取屬性值，瀏覽器會強制發生重排來確保獲取真實的值。如下：

var $body = $('body'); 


$body.css('padding', '1px'); 


$body.css('padding'); // forced reflow 


$body.css('color', 'red'); 


$body.css('margin', '2px');
總共我們得到了兩此重排，由此看出瀏覽器的優化失敗了。so 如果你想更改一些屬性並且想使他們獲得如你所願的效能的時候，可以一起執行修改，然後再獲取屬性。具體參照下如下的**：



click to run example #1 (1 reflow)


click to run example #2 (2 reflow)


click to run example #3 (3 repaint)


click to run example #4 (1 repaint)


click to run example #5 (3 reflow)


click to run example #6 (1 reflow)
有時我們不能避免重排的發生。比如，我們需要設定兩次margin-left。第一次設定它100px（沒有動畫），第二次設定為50px（有動畫）。**如下：



第一種情況)


第二種情況)
如上，因為瀏覽器的快取的原因只會在指令碼的末尾才重排的特性，第一種方案是無法滿足需求的，而我們需要有乙個重排所以加上乙個獲取屬性的**$(this)[0].offsetheight;\主動呼叫重排，也就是第二方案就是我們要的效果。

瀏覽器的工作原理：新式網路瀏覽器幕後揭秘

rendering: repaint, reflow/relayout, restyle

瀏覽器的重繪與重排

在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程中將重繪和重排引發的效能問...

瀏覽器的重繪與重排

在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程 中將重繪和重排引發的效能...

瀏覽器的重繪與重排

在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程中將重繪和重排引發的效能問...