首先我們要明白的是，頁面的顯示過程分為以下幾個階段：
1、生成dom樹(包括display:none的節點)
2、在dom樹的基礎上根據節點的集合屬性(margin,padding,width,height等)生成render樹(不包括display:none，head節點，但是包括visibility:hidden的節點)
3、在render樹的基礎上繼續渲染顏色背景色等樣式
reflow：當render樹的一部分或者全部因為大小邊距等問題發生改變而需要重建的過程，叫做回流。reflow會影響到dom的結構渲染，同時會觸發repaint，他會改變他本身與所有父輩元素(祖先)，這種開銷是非常昂貴的，導致效能下降是必然的，頁面元素越多效果越明顯。
repaint(重繪)：當諸如顏色背景等不會引起頁面布局變化，而只需要重新渲染的過程叫做重繪。repaint發生更改時，元素的外觀被改變，且在沒有改變布局的情況下發生，如改變outline,visibility,background color，不會影響到dom結構渲染。
通過上述定義，可以很明顯看出，重繪的代價要比回流小，畢竟重繪只涉及樣式的改變，不涉及到布局。
什麼情況下會觸發瀏覽器的repaint/reflow?
1.dom元素的新增、修改（內容）、刪除( reflow + repaint)如何避免repaint/reflow?2.僅修改dom元素的字型顏色（只有repaint，因為不需要調整布局）
3.應用新的樣式或者修改任何影響元素外觀的屬性
4.resize瀏覽器視窗、滾動頁面
5.讀取元素的某些屬性（offsetleft、offsettop、offsetheight、offsetwidth、 scrolltop/left/width/height、clienttop/left/width/height、getcomputedstyle()、currentstyle(in ie))
6.改變字型大小
7.新增、刪除樣式表
8.內容的改變，如使用者在輸入框中寫字
9.啟用偽類
10.設定style屬性
回流 reflow 和重繪 repaint
首先先介紹瀏覽器解析的工作原理 1.解析html文件建立dom樹 2.解析css 包含外部css以及js生成的 構建渲染樹，計算出節點的樣式 3.布局渲染樹，以根節點遞迴呼叫，計算每乙個節點的大小，位置等，給出每乙個節點出現在螢幕的精準目標 4.繪製渲染樹，遍歷渲染樹，每個幾點使用ui後端層來繪製 ...
reflow 回流 和repaint 重繪
dom節點中的各個元素都是以盒模型的形式存在，這些都需要瀏覽器去計算其位置和大小等，這個過程稱為reflow 當盒模型的位置,大小以及其他屬性，如顏色,字型,等確定下來之後，瀏覽器便開始繪製內容，這個過程稱為repaint。頁面在首次載入時必然會經歷reflow和repaint。reflow和rep...
回流 reflow 和重繪 repaint
首先我們要明確頁面在文件載入完成之後到完全顯示中間的過程是1.根據文件生成dom樹 包括display none的節點 2.在dom樹基礎上根據節點的幾何屬性 margin padding width height等 生成render樹 不包括display none head節點但會包含visib...