在頁面載入時，瀏覽器把獲取到的html**解析成1個dom樹，dom樹里包含了所有html標籤，包括display:none隱藏，還有用js動態新增的元素等。
瀏覽器把所有樣式(使用者定義的css和使用者**)解析成樣式結構體
dom tree 和樣式結構體組合後構建render tree, render tree類似於dom tree，但區別很大，因為render tree能識別樣式，render tree中每個node都有自己的style，而且render tree不包含隱藏的節點(比如display:none的節點，還有head節點)，因為這些節點不會用於呈現，而且不會影響呈現的，所以就不會包含到 render tree中。我自己簡單的理解就是dom tree和我們寫的css結合在一起之後，渲染出了render tree。
當render tree中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流(reflow)。每個頁面至少需要一次回流，就是在頁面第一次載入的時候，這時候是一定會發生回流的，因為要構建render tree。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成回流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程成為重繪。
當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響布局的，比如background-color。則就叫稱為重繪。
他們的區別很大：
回流必將引起重繪，而重繪不一定會引起回流。比如：只有顏色改變的時候就只會發生重繪而不會引起回流
當頁面布局和幾何屬性改變時就需要回流
比如：新增或者刪除可見的dom元素，元素位置改變，元素尺寸改變——邊距、填充、邊框、寬度和高度，內容改變
擴充套件：瀏覽器的幫忙
所以我們能得知回流比重繪的代價要更高，回流的花銷跟render tree有多少節點需要重新構建有關係
因為這些機制的存在，所以瀏覽器會幫助我們優化這些操作，瀏覽器會維護1個佇列，把所有會引起回流、重繪的操作放入這個佇列，等佇列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會flush佇列，進行乙個批處理。這樣就會讓多次的回流、重繪變成一次回流重繪。
自己的優化
什麼是回流，什麼是重繪，有什麼區別？
在頁面載入時，瀏覽器把獲取到的html 解析成1個dom樹，dom樹里包含了所有html標籤，包括display none隱藏，還有用js動態新增的元素等。瀏覽器把所有樣式 使用者定義的css和使用者 解析成樣式結構體dom tree 和樣式結構體組合後構建render tree,render tr...
什麼是回流,重繪，他們之間有什麼區別？
什麼是回流 當render tree中的一部分 或全部 因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流 reflow 每個頁面至少需要一次回流，就是在頁面第一次載入的時候，這時候是一定會發生回流的，因為要構建render tree。在回流的時候，瀏覽器會使渲染樹中受到影響的部分失效...
什麼是回流和重繪
當渲染樹中的一部分或者全部因為元素的尺寸 布局 隱藏等改變而需要重新構建的時候，這時候就會發生回流。每個頁面都至少發生一次回流，也就是頁面第一次載入的時候。在回流的時候，瀏覽器會使渲染樹中受到影響的元素部分失效，並重新繪製這個部分的渲染樹，完成回流以後，瀏覽器會重新繪製受到影響的部分元素到螢幕中，這...