． 什麼是回流／重排？什麼是重繪？如果是像我一樣的前端小白，那可能對回流和重繪的了解沒有那麼深入。 在認識回流和重繪之前，我們先認識一下一個頁面加載的時候，會發生什麼？
頁面加載時，生成一個DOM樹，DOM Tree裡包含了構成頁面所有的标簽。Style Sheets（CSS樣式表）會生成一個Style Rules。當DOM Tree和Style Rules一起建構出了Render Tree，對于Render Tree的了解：Render Tree和DOM Tree類似，但是Render Tree能夠識别樣式，在Render Tree上，每一個node（節點）都有自己的Style（樣式），但隐藏的節點或是不會用于顯示的部分不會包含在Render Tree上。
上圖是一個頁面在浏覽器中渲染（Webkit）的過程。其中的Layout就是布局，頁面第一次被加載時或是當Render Tree改變需要重新布局時，就産生了回流（reflow）／重排（relayout）。當Render Tree中的一部分(或全部)的node（節點）因為元素的規模尺寸、布局方式、顯示隐藏等改變，浏覽器為了重新渲染部分或整個頁面，重新計算頁面元素位置和幾何結構的過程，也就是重新構造渲染樹 ,這個過程叫做回流（reflow）／重排（relayout）。每個頁面至少發生一次回流／重排，就是頁面第一次被加載時。
重繪(replaint)：當頁面中的元素隻是外觀或風格被改變不影響布局，比如更換背景色background-color，這個過程就是重繪。
| 影響回流（reflow）／重排（relayout）的因素 | 影響重繪(replaint)的因素 |
|---|---|
| 元素的布局和幾何屬性改變時就會觸發reflow。1.頁面初始渲染；2.添加/删除可見DOM元素；3.改變元素位置 ----- 定位屬性及浮動（position,float）；4.改變元素尺寸（寬、高、内外邊距、邊框等） ----- 盒子模型相關屬性（height ,padding ,margin , display ,border-width ,min-height）；5.改變元素内容（文本或圖檔等）（text-align , line-height ,vertival-align ,overflow , font-size,font-family,font-weight）；6.改變視窗尺寸；7.擷取元素的offsetWidth、offsetHeight、clientWidth、clientHeight、width、height、scrollTop、scrollHeight，請求了getComputedStyle(), 或者 IE的 currentStyle | 頁面中的元素更新外觀或風格相關的屬性時就會觸發重繪，如:background，color，visibility， border-style ，border-radius outline-color，cursor，text-decoration， box-shadow |
． 回流／重排和重繪的差別，記住一點，回流必将引起重繪，而重繪不一定會引起回流。例如：隻有顔色改變的時候就隻會發生重繪而不會引起回流。
回流（reflow）的成本比重繪(replaint)的成本高得多。為什麼呢？因為DOM Tree裡的每個結點都會有回流（reflow）方法，一個結點的回流（reflow）很有可能導緻子結點，甚至父點以及同級結點的回流（reflow）。定位相關，個人推薦使用absolute絕對定位，減少頁面産生的回流，代碼優化的方法就是盡量減少回流，或者用重繪來替代回流。為什麼使用absolute？因為absolute讓元素脫離文檔流，這樣隻會讓這個元素産生回流，頁面的其他元素不會受到影響也産生回流。
我是前端新手王老四，關于前端，我們一直在路上．．．
