最近在研究virtual dom，接著就研究回顧起回流（reflow）與重繪（repaint）了。
在理解這兩個概念之前，我們先來看看瀏覽器渲染的工作流程。這裡以webkit渲染引擎為例
瀏覽器請求到html文件後，將html解析成dom tree
css被解析成css style rules
解析完成後，將結合dom tree和style rules構造render tree
瀏覽器計算render tree中每個渲染物件的位置和大小，即布局（layout）
最後進行繪製（painting）
回流（reflow）
當元素的規模尺寸、布局、隱藏等改變，而導致render tree的一部分(或全部)重新構建，即稱為回流。每個頁面至少進過一次回流，就在頁面第一次載入的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程成為重繪。重繪（repaint）
當render tree中的一些元素需要更新屬性，這些屬性只影響元素的外觀，風格，而不會影響元素尺寸、布局、隱藏的，比如background-color，就叫重繪。注意：回流必將引起重繪，而重繪不一定會引起回流。
可見元素尺寸的改變，如width、height、margin、padding等屬性改變引起尺寸的變化
window resize事件的觸發
元素display屬性的改變
元素位置的改變
等等回流與重繪非常影響web效能，因為每一次html和css的重新解析然後再構建成render tree，都需要經過大量的計算，這個過程是很耗時間耗效能的。如何減少呢？建議
頁面元素適當定高，如img的夾在在文件流中佔據的空間從0到完全載入，會產生頻繁的重繪
減少dom的深度，可以減少解析器耗時
盡量簡化css
複雜的動畫，可以使其元素脫離文件流，使用position:absolute或者position:fixed，以減少對父元素的影響
當然，這裡列舉的並不是全部的方法，若你有更好的建議，也希望一起分享出來
前端效能優化 （一）重繪與回流
重繪是乙個元素外觀的改變所觸發的瀏覽器行為。渲染物件在建立完成並新增到渲染樹時，並不包含位置和大小資訊。計算這些值的過程稱為布局或重排 優化方案 1.元素位置移動變換時盡量使用css3的transform來代替對top left等的操作 變換 transform 和透明度 opacity 的改變僅僅...
效能優化 頁面渲染 重繪 回流
參考 高效能web開發 深入理解頁面呈現 重繪 回流 因為一些原因要重新構建渲染數的時候，就叫做回流,第一次構建的時候也叫做回流。引起回流的操作 回流一定會導致重繪 影響元素幾何屬性發生變化 重繪 瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分...
回流重繪方向的效能優化
瀏覽器將獲取的html文件並解析成dom樹。處理css標記，構成層疊樣式表模型cssom css object model 將dom和cssom合併為渲染樹 rendering tree 將會被建立，代表一系列將被渲染的物件。渲染樹的每個元素包含的內容都是計算過的，它被稱之為布局layout。瀏覽器...