Reflow 渲染 和Repaint 重繪

reflow(渲染)：對於dom結構中的各個元素都有自己的盒模型，瀏覽器根據各種樣式（瀏覽器的、開發人員定義的等）來計算，並根據計算結果將元素放到它該出現的位置，這個過程稱之為reflow。

reflow會影響到dom的結構渲染，同時會觸發repaint，他會改變他本身與所有父輩元素(祖先)，這種開銷是非常昂貴的，導致效能下降是必然的，頁面元素越多效果越明顯。

repaint發生更改時，元素的外觀被改變，且在沒有改變布局的情況下發生，如改變outline,visibility,background color，不會影響到dom結構渲染。

reflow的成本比repaint的成本高得多的多。但reflow是不可避免的，只能將reflow對效能的影響減到最小。

什麼情況下會觸發瀏覽器的repaint/reflow?

1. dom元素的新增、修改（內容）、刪除( reflow + repaint)

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屬性

如何避免repaint/reflow?

1. 先將元素從document中刪除，完成修改後再把元素放回原來的位置

2. 將元素的display設定為」none」，完成修改後再把display修改為原來的值
3. 如果需要建立多個dom節點，可以使用documentfragment建立完後一次性的加入document 　　
var fragment = document.createdocumentfragment();
4. 集中修改樣式 
（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,他會每次呼叫都會重新計算一遍(包括載入頁面)

網頁的重排 reflow 與重繪 repaint

當頁面布局和幾何屬性改變時就會發生 重排 下述情況中會傳送重排 由於每次重排都會產生計算消耗，大多數瀏覽器通過佇列化修改並批量執行來優化重排過程。獲取布局資訊的操作會導致佇列重新整理 offsettop offsetleft offsetwidth offsetheight scrolltop sc...

Reflow 回流 和Repaint 重繪

首先我們要明白的是，頁面的顯示過程分為以下幾個階段 1 生成dom樹 包括display none的節點 2 在dom樹的基礎上根據節點的集合屬性 margin,padding,width,height等 生成render樹 不包括display none，head節點，但是包括visibility...

回流 reflow 和重繪 repaint

首先先介紹瀏覽器解析的工作原理 1.解析html文件建立dom樹 2.解析css 包含外部css以及js生成的 構建渲染樹，計算出節點的樣式 3.布局渲染樹，以根節點遞迴呼叫，計算每乙個節點的大小，位置等，給出每乙個節點出現在螢幕的精準目標 4.繪製渲染樹，遍歷渲染樹，每個幾點使用ui後端層來繪製 ...