頁面回流與重繪的那點事兒

瀏覽器把html**解析成一顆dom tree，每個元素標籤都是dom tree中的乙個節點，根節點是document；

在形成dom tree後，從dom tree根節點開始，遍歷每乙個可見的節點，並找到合適的、匹配的cssom規則，應用在節點上；

dom tree和cssom tree連線在一起形成render tree；

最終繪製出頁面，顯示在螢幕上

在網頁生成的時候，至少會渲染一次。使用者訪問的過程中，任何對render tree節點的操作都會引起重新渲染。

需要注意的是頁面重繪不一定會引起回流，但回流一定會引起頁面重繪。

dom節點的新增、刪除；

調整視窗大小（resize事件）；

元素位置改變、元素尺寸改變（width/height/padding/border/margin）；

css偽類的啟用（如hover）；

對樣式的操作（不同屬性有不同的影響）

元素樣式屬性的讀取操作

不同樣式的操作造成回流、重繪影響

頁面的回流、重繪在專案中是不可避免的，但過高、頻繁的回流、重繪必定導致網頁效能低下，影響客戶體驗感。所以，在開發過程中，我們應盡可能的避免回流、重繪，盡量少觸發頁面的重新渲染。

// 下列操作只會造成一次回流、重繪

div.style.color = 'blue';
div.style.margintop = '30px';
// 下列操作造成兩次的回流、重繪
div.style.color = 'blue';
var margin = parseint(div.style.margintop);
div.style.margintop = (margin + 10) + 'px';

在樣式的寫操作之後，有對元素進行offset、scroll、client、getcomputedstyle()屬性讀取操作，都會觸發瀏覽器立即重新渲染。

// 壞的寫法 --> 讀寫操作放同乙個語句

div.style.left = div.offsetleft + 10 + "px";
// 好的寫法
var left = div.offsetleft;
div.style.left = left + 10 + 'px';

// 壞的寫法

div.style.left = '10px';
div.style.top  = '10px';
// 好的寫法
div.classname += 'newclassname';
div.style.csstext += 'background-color:red;font-size:20px;';

// 壞的寫法

for( var i = 0; i<2; i++ )
// 好的寫法
var fragment = document.createdocumentfragment();
for( var i = 0; i<2; i++ )

5. 盡可能地使用position;，而不是float來進行元素浮動。因為使用position屬性不用考慮它對其他元素的影響，回流的開銷會比較小。

6. 盡可能地將display屬性設為可見，不可見屬性的元素不會影響回流和重繪 （visibility的元素只對重繪有影響，不影響回流）。

7. 使用虛擬dom的指令碼庫，比如react、vue等。

8. 使用window.requestanimationframe()、window.requestidlecallback()這兩個方法調節重新渲染。

注意：window.requestanimationframe()只能在ie10及以上使用，而window.requestidlecallback()在ie上是不支援的。這兩個方法在阮一峰阮一峰的部落格上有詳細的介紹。

Web頁面回流與重繪

回流 reflow 當html結構發生變化時，瀏覽器都需要重新計算一遍最新的dom結構，重新對當前頁面進行渲染 重繪 repaint 如果只是改變某個元素的背景色 文字顏色 邊框顏色等，而不影響它周圍或內部布局的屬性，瀏覽器只需重新渲染當前的元素即可 回流是不可避免的，我們可以通過以下的方式減小回流...

頁面的回流與重繪

在構建渲染樹的過程中，瀏覽器主要完成了一下工作 前邊通過構造渲染樹，我們將可見dom節點以及它對應的樣式結合起來，可是我們還需要計算他們在裝置視口 viewport 內的準確位置和大小，這個計算的階段就是回流。最終，我們通過構造渲染樹和回流階段，我們知道了哪些節點是可見的，以及可見節點的樣式和具體的...

頁面的重繪與回流

上次在面試中，面試官問了我乙個關於頁面重繪和回流的問題，我解釋的不怎麼好。今天把它整理了一下，又參考了一些其他的文章。參考文章 頁面載入過程 1 瀏覽器將獲取到的html 解析成乙個dom樹，html中的每乙個標籤都是dom樹中的乙個節點，根節點就是document。dom樹中包含了所有的html標...