在弄明白什麼是重排之前，我們要知道：瀏覽器渲染頁面預設採用的是流式布局模型（flow based layout）。
所謂重排，實際上是根據渲染樹中每個渲染物件的資訊，計算出各自渲染物件的幾何資訊（dom物件的位置和尺寸大小），並將其安置在介面中的正確位置`。
由於瀏覽器渲染介面是基於流式布局模型的，也就是某乙個dom節點資訊更改了，就需要對dom結構進行重新計算，重新布局介面，再次引發回流，只是這個結構更改程度會決定周邊dom更改範圍，即全域性範圍和區域性範圍，全域性範圍就是從根節點html開始對整個渲染樹進行重新布局，例如當我們改變了視窗尺寸或方向或者是修改了根元素的尺寸或者字型大小等；而區域性布局可以是對渲染樹的某部分或某乙個渲染物件進行重新布局。
在此，總結會引起重排的操作有：
頁面首次渲染。
瀏覽器視窗大小發生改變。
元素尺寸或位置發生改變。
元素內容變化（文字數量或大小等等）。
元素字型大小變化。
新增或者刪除可見的dom元素。
啟用css偽類（例如：:hover）。
設定style屬性
查詢某些屬性或呼叫某些方法。
常見引起重排屬性和方法
備註：重排也叫回流，實際上，reflow的字面意思也是回流，之所以有的叫做重排，也許是因為重排更好理解，更符合中國人的思維。標準文件之所以叫做回流（reflow）,是因為瀏覽器渲染是基於「流式布局」的模型，流實際就使我們常說的文件流，當dom或者css幾何屬性發生改變的時候，文件流會受到波動聯動的去更改，流就好比一條河裡的水，回流就好比向河裡扔了一塊石頭，激起漣漪，然後引起周邊水流受到波及，所以叫做回流，這樣理解似乎更標準更規範，不過叫什麼並不重要，重要的是我們真正理解了這個過程便好。
所謂重繪，就是當頁面中元素樣式的改變並不影響它在文件流中的位置時，例如更改了字型顏色,瀏覽器會將新樣式賦予給元素並重新繪製的過程稱。
常見引起瀏覽器繪製過程的屬性包含：
前端效能之重排和重繪
前端效能之重排和重繪 1 什麼是重排 重繪 當dom的變化引發了元素幾何屬性的變化,比如改變元素的寬高,元素的位置導致瀏覽器不得不重新計算元素的幾何屬性,並重新構建渲染樹,這個過程為重排.完成重排後,要將重新構建的渲染樹渲染到螢幕上,這個過程就是重繪.簡單地說，重排負責元素的幾何屬性更新，重繪負責元...
重繪和重排
重繪是乙個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility outline 背景色等屬性。瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新布局，並不一定伴隨重排。重排是更明顯的一種改變，可以理解為渲染樹需要重新計算 儘量減少重排次數和縮小重排的影響範圍 1.dom...
重繪與重排
重繪就是重新繪製 repaint 重排就是重新排列 reflow dom發生改變的時候觸發重排，使dom重新排列，重繪不一定會重排，但是重排一定發生重繪，重繪和重排都會耗費瀏覽器的效能，盡量避免解析html繪製dom樹 解析css繪製css樹 生成render tree 渲染樹 flow排列，將渲染...