簡要：整個在瀏覽器的渲染過程中（頁面初始化，使用者行為改變介面樣式，動畫改變介面樣式等）reflow(回流)和repaint(重繪) 會大大影響web效能，尤其是手機頁面。因此我們在頁面設計的時候要儘量減少reflow和repaint。
reflow：幾乎是無法避免的。現在介面上流行的一些效果，比如樹狀目錄的摺疊、展開（實質上是元素的顯 示與隱藏）等，都將引起瀏覽器的 reflow。滑鼠滑過、點選……只要這些行為引起了頁面上某些元素的佔位面積、定位方式、邊距等屬性的變化，都會引起它內部、周圍甚至整個頁面的重新渲 染。通常我們都無法預估瀏覽器到底會 reflow 哪一部分的**，它們都彼此相互影響著。
repaint：如果只是改變某個元素的背景色、文 字顏色、邊框顏色等等不影響它周圍或內部布局的屬性，將只會引起瀏覽器 repaint（重繪）。repaint 的速度明顯快於 reflow
下面情況會導致reflow發生
1：改變視窗大小
2：改變文字大小
3：內容的改變，如使用者在輸入框中敲字
4：啟用偽類，如:hover
5：操作class屬性
6：指令碼操作dom
7：計算offsetwidth和offsetheight
8：設定style屬性
reflow：幾乎是無法避免的。現在介面上流行的一些效果，比如樹狀目錄的摺疊、展開（實質上是元素的顯 示與隱藏）等，都將引起瀏覽器的 reflow。滑鼠滑過、點選……只要這些行為引起了頁面上某些元素的佔位面積、定位方式、邊距等屬性的變化，都會引起它內部、周圍甚至整個頁面的重新渲 染。通常我們都無法預估瀏覽器到底會 reflow 哪一部分的**，它們都彼此相互影響著。
repaint：如果只是改變某個元素的背景色、文 字顏色、邊框顏色等等不影響它周圍或內部布局的屬性，將只會引起瀏覽器 repaint（重繪）。repaint 的速度明顯快於 reflow
下面情況會導致reflow發生
1：改變視窗大小
2：改變文字大小
3：內容的改變，如使用者在輸入框中敲字
4：啟用偽類，如:hover
5：操作class屬性
6：指令碼操作dom
7：計算offsetwidth和offsetheight
8：設定style屬性
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 重繪
dom節點中的各個元素都是以盒模型的形式存在，這些都需要瀏覽器去計算其位置和大小等，這個過程稱為reflow 當盒模型的位置,大小以及其他屬性，如顏色,字型,等確定下來之後，瀏覽器便開始繪製內容，這個過程稱為repaint。頁面在首次載入時必然會經歷reflow和repaint。reflow和rep...