對於dom結構中的各個元素都有自己的盒模型，瀏覽器根據各種樣式（瀏覽器的、開發人員定義的等）來計算，並根據計算結果將元素放到它該出現的位置，這個過程稱reflow。
reflow會影響到dom的結構渲染，同時會觸發repaint，他會改變他本身與所有父輩元素(祖先)，這種開銷是非常昂貴的，導致效能下降是必然的，頁面元素越多效果越明顯。
當各種盒子的位置、大小以及其他屬性，例如顏色、字型大小等都確定下來後，瀏覽器於是便把這些元素都按照各自的特性繪製了一遍，於是頁面的內容出現了，這個過程稱之為repaint。
repaint發生更改時，元素的外觀被改變，且在沒有改變布局的情況下發生，如改變outline,visibility,background color，不會影響到dom結構渲染。
dom元素的新增、修改（內容）、刪除( reflow + repaint)
僅修改dom元素的字型顏色（只有repaint，因為不需要調整布局）
應用新的樣式或者修改任何影響元素外觀的屬性
resize瀏覽器視窗、滾動頁面
讀取元素的某些屬性（offsetleft、offsettop、offsetheight、offsetwidth、 scrolltop/left/width/height、clienttop/left/width/height、 getcomputedstyle()、currentstyle(in ie))
改變字型大小
新增、刪除樣式表
內容的改變，如使用者在輸入框中寫字
啟用偽類 設定style屬性
先將元素從document中刪除，完成修改後再把元素放回原來的位置
將元素的display設定為」none」，完成修改後再把display修改為原來的值
集中修改樣式
（1） 盡可能少的修改元素style上的屬性
（2）盡量通過修改classname來修改樣式
（3）通過csstext屬性來設定樣式值
element.style.width=」80px」; //reflow
element.style.height=」90px」; //reflow
element.style.border=」solid 1px red」; //reflow
以上就產生多次reflow，呼叫的越多產生就越多
element.style.csstext=」width:80px;height:80px;border:solid 1px red;」; //reflow
（4）快取layout屬性值
var left=elem.offsetleft; 多次使用left也就產生一次reflow
（5）設定元素的position為absolute或fixed
元素脫離標準流，也從dom樹結構中脫離出來，在需要reflow時只需要reflow自身與下級元素
（6）盡量不要用table布局
table元素一旦觸發reflow就會導致table裡所有的其它元素 reflow。在適合用table的場合，可以設定table-layout為auto或fixed，這樣可以讓table一行一行的渲染，這種做法也是為了限制reflow的影響範圍
（7）避免使用expression,他會每次呼叫都會重新計算一遍(包括載入頁面)
回流和重繪
在頁面載入時，瀏覽器把獲取到的html 解析成1個dom樹，dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體 dom tree 和樣式結構體組合後構建render tree 渲染樹 然後根據...
回流和重繪
html 載入過程 在頁面載入時，瀏覽器把獲取到的html 解析成1個dom樹，dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體 dom tree 和樣式結構體組合後構建render tre...
回流和重繪
回流 reflow 當render tree中的一部分 或全部 因為元素的規模尺寸 布局 隱藏等改變而需要重新構建，這就稱為回流。每個頁面至少需要回流一次，就是在頁面第一次載入的時候。重繪 repaint 當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀 風格，而不會影...