為了讓專案的執行效率更高，減少開銷，需要對重排、回流、重繪有一定的了解。
重排和回流其實是一回事。
瀏覽器在渲染頁面的時候，大致是以下幾個步驟：
解析html生成dom樹，解析css，生成cssom樹，將dom樹和cssom樹結合，生成渲染樹；
根據渲染樹，瀏覽器可以計算出網頁中有哪些節點，各節點的css以及從屬關係 - 回流
根據渲染樹以及回流得到的節點資訊，計算出每個節點在螢幕中的位置 - 重繪
最後將得到的節點位置資訊交給瀏覽器的圖形處理程式，讓瀏覽器中顯示頁面
回流：英文叫reflow，指的是當渲染樹中的節點資訊發生了大小、邊距等問題，需要重新計算各節點和css具體的大小和位置。
例：在css中對乙個div修飾的樣式中，使用了寬度50%，此時需要將50%轉換為具體的畫素，這個計算的過程，就是回流的過程。
容易造成回流的操作：
1、布局流相關操作
2、改變節點內的內容
改變節點的結構或其中的文字結構會觸發重新布局
3、css
重繪：英文叫repaint，當節點的部分屬性發生變化，但不影響布局，只需要重新計算節點在螢幕中的絕對位置並渲染的過程，就叫重繪。比如：改變元素的背景顏色、字型顏色等操作會造成重繪。
回流的過程在重繪的過程前面，所以回流一定會重繪，但重繪不一定會引起回流。
容易造成重繪操作的css：
每次回流都會對瀏覽器造成額外的計算消耗，所以瀏覽器對於回流和重繪有一定的優化機制。瀏覽器通常都會將多次回流操作放入乙個佇列中，等過了一段時間或操作達到了一定的臨界值，然後才會挨個執行，這樣能節省一些計算消耗。但是在獲取布局資訊操作的時候，會強制將佇列清空，也就是強制回流，比如訪問或操作以下或方法時：
這些屬性或方法都需要得到最新的布局資訊，所以瀏覽器必須去回流執行。因此，在專案中，盡量避免使用上述屬性或方法，如果非要使用的時候，也盡量將值快取起來，而不是一直獲取。
減少造成回流的次數，如果要給乙個節點操作多個css屬性，而每乙個都會造成回流的話，盡量將多次操作合併成乙個，例：
var odiv = document.queryselector('.box');
odiv.style.padding = '5px';
odiv.style.border = '1px solid #000';
odiv.style.margin = '5px';
方法一：使用style的csstext：
odiv.style.csstext = 'padding:5px; border:1px solid #000; margin:5px;';脫離標準流的操作有以下3中：
隱藏元素
使用文件碎片
拷貝節點
例：下面對dom節點的多次操作，每次都會觸發回流
var data = [,,
,,
// 假設後面還有很多
];var oul = document.queryselector("ul");
for(var i=0;i這樣每次給ul中新增乙個li的操作，每次都會觸發回流。
方法一：隱藏ul後，給ul新增節點，新增完成後再將ul顯示
oul.style.display = 'none';
for(var i=0;i此時，在隱藏ul和顯示ul的時候，觸發了兩次回流，給ul新增每個li的時候沒有觸發回流。
方法二：建立文件碎片，將所有li先放在文件碎片中，等都放進去以後，再將文件碎片放在ul中
var fragment = document.createdocumentfragment();
for(var i=0;i方法三：將ul拷貝乙份，將所有li放在拷貝中，等都放進去以後，使用拷貝替換掉ul
var newul = oul.clonenode(true);
for(var i=0;i如下回到頂部的操作：
goback.onclick = function(),20)
}
goback.onclick = function(),20)
}
對於頁面中比較複雜的動畫，盡量將元素設定為絕對定位，操作元素的定位屬性，這樣只有這乙個元素會回流，如果不是定位的話，容易引起其父元素以及子元素的回流。
重繪和重排（回流）
html被html解析器解析成dom tree,css則被css解析器解析成cssom tree。dom tree和cssom tree解析完成後，被附加到一起，形成渲染樹 render tree 節點資訊計算 重排 這個過程被叫做layout webkit 或者reflow mozilla 即根據...
重繪和重排（回流）
html被html解析器解析成dom tree,css則被css解析器解析成cssom tree。dom tree和cssom tree解析完成後，被附加到一起，形成渲染樹 render tree 節點資訊計算 重排 這個過程被叫做layout webkit 或者reflow mozilla 即根據...
回流（重排）和重繪
作為乙個web開發，經常會聽到這兩個詞，除了 回流一定會引起重繪，但重繪不一定會回流 之外，對這兩個概念理解的也不是很透徹。今天就整理一下吧 解析html 生成dom樹 解析css樣式表，生成cssom樹 dom樹和cssom樹合成render tree 不是完全匹配的，假如有樣式為diaplay ...