DOM 映射、回流、重绘

DOM 相关

DOM 全称是 Document Object Model，也就是文档对象模型。DOM 就是针对 HTML 和 XML 提供的一个API。什么意思？就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树）。

DOM 映射

通过document提供获取页面标签的接口，这个获取的为元素对象
这个对象和标签是一一对应的关系。
标签上的所有属性，都是能够和元素进行对应
id,className,src,value
并不是所有的标签属性都是一一对应在第一层属性上的

let box = {
  id: 'box',
  attributes: {
    index: { // 比如说要获取index这个属性，就必须通过box.attributes.index,这个顺序来找。
      nodeName: {
        nodeValue: 1
      }
    }
  }
}

DOM 回流

DOM中如果操作了某个元素的位置或者大小，会导致浏览器会重新计算每个
元素的所占的位置，这样特别消耗性能，尽量少操作DOM

批量操作DOM的时候最好使用字符串
其次使用createElement()、appendChild....
最后使用文档碎片

let frg = document.createDocumentFragment();
frg.append(ele1);
frg.append(ele2);
parentNode.appendChild(frg[ele1,ele2]);

DOM 重绘

当页面中元素的背景或者字体颜色发生改变，
那么浏览器要对元素进行重新的描绘；这种现象就是“重绘”；