DOM的回流和重繪-JS

回流(reflow)

當DOM元素的結構或者位置發生改變（刪除、增加、改變位置、改變大小...）都會引發回流，所謂回流，就是瀏覽器拋棄原有計算的結構和樣式，從新進行DOM TREE或者RENDER TREE，非常非常非常...消耗性能。

重繪(repaint)

當某一個DOM元素樣式更改（位置沒變只是樣式更改，例如：顏色變為紅色...）瀏覽器會重新渲染這個元素。

解決方案

• 基於文檔碎片(虛擬內存中開辟的一個容器)可以解決這個問題：每當創建一個LI，我們首先把它存放到文檔碎片中（千萬不要放到頁面中，避免回流），當我們把需要的元素都創建完成，並且都添加到文檔碎片中，在統一把文檔碎片放到頁面中（只會引發一次回流操作）。

let frg = document.createDocumentFragment();
data.forEach((item, index) => {
     let curLi = document.createElement('li');
     curLi.innerHTML = `<a href="#">
             <img src="img/1.jpg" alt="">
             <p title="${title}">${text}</p>
             <span>"${price}"</span>
             <span>時間：${date}</span>
             <span>熱度：{$hot}</span>
         </a>`;
     frg.appendChild(curLi);//=>每一次把創建的LI存放到文檔碎片中
 });
 document.querySelector('.productBox').appendChild(frg);//=>把文檔碎片中的內容，統一存放到頁面中
 frg = null;

• 分離讀寫(新版本瀏覽器)

//[引發兩次回流]
 box.style.top = '100px';
 console.log(box.style.top);//=>'100px'
 box.style.left = '100px';

//[引發一次回流]
box.style.top = '100px';
box.style.left = '100px';
console.log(box.style.top);//=>'100px'