首先要理解，為什麼會有回流和重繪的這個名詞的出現，要知道，瀏覽器其實也是乙個軟體，瀏覽器在將html 字串和css 字串，解析為dom，樣式的過程，被稱為解析過程，最終會渲染為一棵dom樹和一棵style樹，結合形成渲染樹，之後瀏覽器，在將解析，已經解析好的元素位置大小，顏色資訊，通過，瀏覽器底層自行執行的底層指令，進行渲染。最後在頁面中呈現出網頁的樣子
當乙個元素的外觀發生改變，但沒有改變布局,重新把元素外觀繪製出來的過程，叫做重繪。表現為某些元素的外觀被改變
當dom的變化影響了元素的幾何資訊，瀏覽器需要重新計算元素的幾何屬性，將其安放在介面中的正確位置，這個過程叫做重排。表現為重新生成布局，重新排列元素。
可以看出，回流的影響是巨大的，他會導致，瀏覽器重新的去計算，會消耗大量的效能，而重繪，只是由於外觀的變化，才會觸發，所以得出：回流一定會導致重繪，而重繪不能導致回流
新增、刪除、更新dom節點
通過display: none隱藏乙個dom節點-觸發重排和重繪
通過visibility: hidden隱藏乙個dom節點-只觸發重繪，因為沒有幾何變化
移動或者給頁面中的dom節點新增動畫
新增乙個樣式表，調整樣式屬性
使用者行為，例如調整視窗大小，改變字型大小，或者滾動
集中改變樣式，不要一條一條地修改 dom 的樣式。
不要把 dom 結點的屬性值放在迴圈裡當成迴圈裡的變數。
為動畫的 html 元件使用fixed或absoult的position，那麼修改他們的 css 是不會 reflow 的。
不使用 table 布局。因為可能很小的乙個小改動會造成整個 table 的重新布局。
盡量只修改position：absolute或fixed元素，對其他元素影響不大
動畫開始gpu加速，translate使用3d變化
提公升為合成層
真正理解重繪和回流
注 回流也叫重排，叫回流是為了和重繪從字眼上更好區分。也許是自己笨，關於瀏覽器渲染和重繪回流的文章幾個月來看了幾十篇，竟然到現在才真正理解。而理解靠的竟然是運氣?瀏覽器渲染過程如下 節選自阮一峰老師的文章，鏈結，有改動 html 轉化成dom tree css 轉化成cssom tree css o...
真正理解重繪和回流
注 回流也叫重排，叫回流是為了和重繪從字眼上更好區分。也許是自己笨，關於瀏覽器渲染和重繪回流的文章幾個月來看了幾十篇，竟然到現在才真正理解。而理解靠的竟然是運氣?瀏覽器渲染過程如下 節選自阮一峰老師的文章，鏈結，有改動 html 轉化成dom tree css 轉化成cssom tree css o...
真正理解重繪和回流
注 回流也叫重排，叫回流是為了和重繪從字眼上更好區分。也許是自己笨，關於瀏覽器渲染和重繪回流的文章幾個月來看了幾十篇，竟然到現在才真正理解。而理解靠的竟然是運氣?瀏覽器渲染過程如下 節選自阮一峰老師的文章，鏈結，有改動 html 轉化成dom tree css 轉化成cssom tree css o...