浏览器的回流 重绘

1. 什么是回流？
   页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。

2. 什么是重绘？
   页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

3. 有什么区别
   回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
   当页面布局和几何属性改变时就需要回流
   比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变

4. 如何避免重绘或者重排

    1. 集中改变 比如改变样式的时候，不去改变他们每个的样式，而是直接改变className 。
   

// 判断是否是黑色系样式
const theme = isDark ? 'dark' : 'light'

// 根据判断来设置不同的class
ele.setAttribute('className', theme)

     2. 使用DocumentFragment  将频繁的操作改为一次性操作，通过创建文档碎片，最后一次性加入文档碎片。

var fragment = document.createDocumentFragment();

for (let i = 0;i<10;i++){
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment)