## **重排（Relayout/Reflow）** 在弄明白什么是重排之前，我們要知道：瀏覽器渲染頁面默認采用的是流式布局模型（Flow Based Layout），這一點很重要。 所謂重排，實際上是根據渲染樹中每個渲染對象的信息，計算出各自渲染對象的幾何信息（DOM對象的位置和尺寸大小），并將其安置在界面中的正確位置。 由于瀏覽器渲染界面是基于流式布局模型的，也就是某一個DOM節點信息更改了，就需要對DOM結構進行重新計算，重新布局界面，再次引發回流，只是這個結構更改程度會決定周邊DOM更改范圍，即全局范圍和局部范圍，全局范圍就是從根節點`html`開始對整個渲染樹進行重新布局，例如當我們改變了窗口尺寸或方向或者是修改了根元素的尺寸或者字體大小等；而局部布局可以是對渲染樹的某部分或某一個渲染對象進行重新布局。 在此，總結會引起重排的操作有： 1. 頁面首次渲染。 2. 瀏覽器窗口大小發生改變。 3. 元素尺寸或位置發生改變。 4. 元素內容變化（文字數量或圖片大小等等）。 5. 元素字體大小變化。 6. 添加或者刪除可見的DOM元素。 7. 激活CSS偽類（例如：:hover）。 8. 設置style屬性 9. 查詢某些屬性或調用某些方法。 常見引起重排屬性和方法 ? ? ?  > 重排也叫回流，實際上，reflow的字面意思也是回流，之所以有的叫做重排，也許是因為重排更好理解，更符合中國人的思維。標準文檔之所以叫做回流（Reflow）,是因為瀏覽器渲染是基于“流式布局”的模型，流實際就使我們常說的文檔流，當dom或者css幾何屬性發生改變的時候，文檔流會受到波動聯動的去更改，流就好比一條河里的水，回流就好比向河里扔了一塊石頭，激起漣漪，然后引起周邊水流受到波及，所以叫做回流，這樣理解似乎更標準更規范，不過叫什么并不重要，重要的是我們真正理解了這個過程便好。 ## **重繪（Repainting）** 相比重排，重繪就簡單多了，所謂重繪，就是當頁面中元素樣式的改變并不影響它在文檔流中的位置時，例如更改了字體顏色,瀏覽器會將新樣式賦予給元素并重新繪制的過程稱。 常見引起瀏覽器繪制過程的屬性包含：  ## 參考文章 [http://www.imooc.com/article/45936](http://www.imooc.com/article/45936)