在了解回流和重繪之前，我們先來了解一下瀏覽器是如何進行解析的
我將它歸納為四個步驟：
解析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 重繪
首先我們要明白的是，頁面的顯示過程分為以下幾個階段 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...