dom節點中的各個元素都是以盒模型的形式存在，這些都需要瀏覽器去計算其位置和大小等，這個過程稱為reflow;
當盒模型的位置,大小以及其他屬性，如顏色,字型,等確定下來之後，瀏覽器便開始繪製內容，這個過程稱為repaint。
頁面在首次載入時必然會經歷reflow和repaint。reflow和repaint過程是非常消耗效能的，尤其是在移動裝置上，它會破壞使用者體驗，有時會造成頁面卡頓。所以我們應該盡可能少的減少reflow和repaint。
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後端層來繪製 ...
回流 reflow 和重繪 repaint
首先我們要明確頁面在文件載入完成之後到完全顯示中間的過程是1.根據文件生成dom樹 包括display none的節點 2.在dom樹基礎上根據節點的幾何屬性 margin padding width height等 生成render樹 不包括display none head節點但會包含visib...