在javascript中，回流也叫做重排，是指當(dāng)渲染樹(shù)中的一部分或全部因?yàn)樵氐囊?guī)模尺寸、布局、隱藏等改變時(shí)，瀏覽器重新渲染部分DOM或全部DOM的過(guò)程；簡(jiǎn)單來(lái)說(shuō)，就是重新排版整個(gè)頁(yè)面。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

簡(jiǎn)單先了解一下瀏覽器的渲染過(guò)程（圖片來(lái)自于網(wǎng)絡(luò)）

瀏覽器生成渲染樹(shù)的過(guò)程（圖片來(lái)自于網(wǎng)絡(luò)）

回流

當(dāng)渲染樹(shù)中的一部分或全部因?yàn)樵氐囊?guī)模尺寸、布局、隱藏等改變時(shí)，瀏覽器重新渲染部分DOM或全部DOM的過(guò)程。

回流也被稱(chēng)為重排，其實(shí)從字面上來(lái)看，重排更容易讓人形象易懂（即重新排版整個(gè)頁(yè)面）。

重繪

當(dāng)頁(yè)面元素樣式改變不影響元素在文檔流中的位置時(shí)（如background-color，border-color，visibility），瀏覽器只會(huì)將新樣式賦予元素并進(jìn)行重新繪制操作。

什么時(shí)候會(huì)觸發(fā)回流或重繪？

有大量的用戶(hù)行為以及潛在的DHTML改變會(huì)觸發(fā)回流。例如，改變?yōu)g覽器窗口的大小，使用一些JavaScript方法，包括計(jì)算樣式，對(duì)DOM進(jìn)行元素的添加或刪除，或是改變?cè)氐腸lass等。

添加或者刪除可見(jiàn)的DOM元素； 元素位置改變； 元素尺寸改變——邊距、填充、邊框、寬度和高度； 內(nèi)容變化，比如用戶(hù)在input框中輸入文字，文本或者圖片大小改變而引起的計(jì)算值寬度和高度改變； 頁(yè)面渲染初始化； 瀏覽器窗口尺寸改變，resize事件發(fā)生時(shí)； 計(jì)算offsetWidth和offsetHeight屬性； 設(shè)置style屬性的值；

回流必將引起重繪，而重繪不一定會(huì)引起回流。

如何減少回流、重繪？

一、 CSS中避免回流、重繪

1.盡可能在DOM樹(shù)的最末端改變class
2.避免設(shè)置多層內(nèi)聯(lián)樣式
3.動(dòng)畫(huà)效果應(yīng)用到position屬性為absolute或fixed的元素上
4.避免使用table布局
5.使用css3硬件加速，可以讓transform、opacity、filters等動(dòng)畫(huà)效果不會(huì)引起回流重繪

二、 JS操作避免回流、重繪

1.避免使用JS一個(gè)樣式修改完接著改下一個(gè)樣式，最好一次性更改CSS樣式，或者將樣式列表定義為class的名稱(chēng)
2.避免頻繁操作DOM，使用文檔片段創(chuàng)建一個(gè)子樹(shù)，然后再拷貝到文檔中
3.先隱藏元素，進(jìn)行修改后再顯示該元素，因?yàn)閐isplay:none上的DOM操作不會(huì)引發(fā)回流和重繪
4.避免循環(huán)讀取offsetLeft等屬性，在循環(huán)之前把它們存起來(lái)
5.對(duì)于復(fù)雜動(dòng)畫(huà)效果,使用絕對(duì)定位讓其脫離文檔流，否則會(huì)引起父元素及后續(xù)元素大量的回流

總結(jié)：

回流在瀏覽器中屬于一種用戶(hù)主導(dǎo)的操作，所以知道如何去改進(jìn)回流時(shí)間以及知道各種文檔屬性（DOM節(jié)點(diǎn)深度，css的渲染效率，各種各樣的樣式改變）對(duì)回流時(shí)間的影響對(duì)于前端開(kāi)發(fā)來(lái)講是很有幫助的。有時(shí)即便是回流一個(gè)單一的元素，也可能要求它的父元素以及任何跟隨它的元素也產(chǎn)生回流。例如需要改變某個(gè)元素的背景，這就不涉及該元素的屬性，所以只發(fā)生重繪。

【推薦學(xué)習(xí)：javascript高級(jí)教程】