在了解回流和重繪之前，我們先來了解一下瀏覽器是如何進行解析的
我將它歸納為四個步驟：

解析html(或者是js通過createElement)生成DOM樹

解析css，繪制上面是DOM樹（注意！此時還未掛載到瀏覽器上）

將DOM樹掛載在瀏覽器上，計算各個DOM具體點的坐標，以及布局和大小（回流）

在瀏覽器上繪制已經生成的DOM樹（重繪）

回流的成本比重繪的成本高很多很多！！！ 一個節點的重流，可能會導致子節點或者父節點以及同級節點的重流 如果電腦低的話 會造成卡頓和更耗電

那說到現在，我們該如何去優化，使得回流和重繪對性能的影響減低到最小
我給出以下幾點建議：

不要一行行的代碼對DOM的樣式進行修改，我們可以預先定義好某一個類的樣式，直接給DOM新的類名

我們將DocumentFragment作為一個暫時的DOM節點存儲器，在里面進行修改DOM(下面有關于DocumentFragment詳細描述)

先將DOM變成display：none 再進行修改 這個過程只有一次重繪

盡量為動畫的DOM設置固定定位或者絕對定位，那么修改他們的樣式會大大減少回流

盡量少用table布局 因為這種布局 很可能小小改動，造成重新布局

DocumentFragment 表示一個沒有父級文件的最小文檔對象。
它被當做一個輕量版的 Document使用，
用于存儲已排好版的或尚未打理好格式的XML片段。
最大的區別是因為DocumentFragment不是真實DOM樹的一部分，
它的變化不會引起DOM樹的重新渲染的操作(reflow)
且不會導致性能等問題。
使用DocumentFragment能解決直接操作DOM引發大量回流的問題，

time是直接添加DOM time1是利用DocumentFragment

總結

以上是生活随笔為你收集整理的回流Reflow和重绘Repaint的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。