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