首先在網頁裡面的DOM應該是靜態的，每一個節點長什麼樣，裡面寫的什麼，都是靜態的不會改變的，會在第一次載入的時候根據一些資訊進行繪製，之所以會發生改變是因為js腳本里改變了dom結構或者css裡觸發了一些變化，在js修改dom之後，網頁會重新渲染這個網頁，這就觸發了迴流，比如改變了一個元素的寬高，這個寬高影響了其他元素的位置，所以瀏覽器需要對檢視進行變化，而當某個元素沒有發生影響其他元素以及只對自身樣式做出改變的話只會觸發重繪不會迴流。
可以這麼理解，迴流是畫骨架，重繪是上色，骨架變化了之後對應地方的顏色也需要重新畫，但只是變了個顏色，就不用改變骨架位置。
迴流一定會導致重繪，重繪不一定會迴流。

到這裡就可以說，更改元素位置就會出發回流，重繪，改變元素樣式只會重繪，不會迴流。還要一種情況就是獲取元素資訊的時候，會觸發迴流，就是上面說的第5種情況，資料獲取的時候，因為瀏覽器要返回給你一個最新正確的資料，所以會重新繪製。
以下幾種情況：

1. offsetTop, offsetLeft, offsetWidth, offsetHeight

2. scrollTop/Left/Width/Height

3. clientTop/Left/Width/Height

4. width,height

5. 請求了getComputedStyle(), 或者 IE的 currentStyle

所以為了更好的效能，在獲取不會頻繁改變的元素的位置資訊時，最好進行一個變數快取。
在執行一個動畫的時候最好把元素脫離文件流，以免它的變化影響其他元素導致多個元素參與迴流。
需要頻繁更改元素的時候（比如增減多個子節點）可以把display改成none，完成之後再次恢復，這樣只會觸發兩次迴流。
還有就是下面要說的使用documentFragment

documentFragment是一個虛擬的Dom列表，可以儲存待處理的xml片段（el元素），因為他不在真實的Dom結構中，所以對它所做的操作不會觸發瀏覽器的迴流，只會在他插入dom的時候觸發一次而已。
用法：

const fragment=document.createDocumentFragment();
for(let i=0;i<100;i++){
    let div=document.createElement('div');
    div.innerText="Hello "+ i;
    fragment.appendChild(div);
}
document.querySelector('#app').appendChild(fragment);

上面把多個動態生成的div插入到了虛擬節點裡，在最後完成之後只做了一次插入，這樣就只會觸發一次迴流。
但是在數量太多的時候，哪怕是一次插入，也會因為瀏覽器渲染不過來導致失去響應，這時候就需要增加一定的時間間隔，可以使用setTimeout，也可以使用一個api
requestAnimationFrame.

requestAnimationFrame()方法是為了動畫專門使用的api，在通常的動畫中會定義一個定時器來幾秒幾秒的發生變化，但是為了效能和更加方便，它提供了這個可以在1秒鐘執行大約60次(≈16.7ms)回撥的api。
而且會把這一刻所有的dom操作快取起來，在一次迴流重繪中完成操作，它的每次呼叫並不是指定時間的，而是跟緊瀏覽器的重新整理頻率，所以可以做到：在瀏覽器的重新整理頻率時進行迴流，保證效能效率。
當頁面不是啟用狀態的情況下，這個函式將會停止回撥，進行暫停來節省cpu操作。啟用時再繼續。
在元素隱藏時不會進行重繪迴流。

它的返回值為一個long的識別符號，和settimeout一樣，可以呼叫cancelAnimationFrame()傳入這個識別符號來取消這個回撥。
使用這個可以在瀏覽器下一次’重新整理’的時候執行指定的回撥，在這裡來插入這多個節點。

      const wapper=document.querySelector('#wapper');
      let all=100000,num=20,duration=all/num,count=0;
      function add(){
          let fragment=document.createDocumentFragment();
          //建立虛擬dom
          for(let i=0;i<num;i++){
              let div=document.createElement('div');
              div.innerText='我是'+(num*count+i);
              fragment.appendChild(div);
          }
          wapper.appendChild(fragment)
          count++;
          if(count<duration){
              requestAnimationFrame(add);//在瀏覽器
          }
      }
      add();

使用這樣可以大批量插入很多資料 頁面也不會失去響應卡住，可以保證比較好的效能（那麼多東西懶載入不好嗎…）