高效的使用DOM操作

一、DOM操作影响性能的原因

前端性能优化主要是DOM操作的优化，DOM优化的总原则是减少DOM的操作。造成DOM影响性能的主要原因

• 1、DOM的实现和ECMAScipt的实现是分离的，通过Javascript代码调用DOM接口实际上相当两个独立的模块之间的交互。
• 2、对DOM的操作会影响浏览器的重绘和重排。
  
  • 增加、删除和修改可见的DOM元素
  • 页面初始化的渲染
  • 移动DOM元素
  • 修改CSS样式，改变DOM元素的尺寸
  • DOM元素内改变，使得尺寸被撑大
  • 浏览器窗口尺寸的改变
  • 浏览器窗口的滚动

二、解决方式

• 1、合并多次的DOM操作为单次的DOM操作

  //不建议使用
  el.style.borderColor = '#ddd';
  el.style.borderStyle = 'solid';
  el.style.borderWidth = '1px';
  //建议使用
  el.style.cssText += 'border:1px solid #ddd';
  //或者直接添加class
  el.className += 'className'; 

• 2、使用文档碎片(重点)

  var box = document.getElementById("box");
  var fragment = document.createDocumentFragment();
  var liDom = document.createElement("li");
  liDom.innerHTML = "你好";
  fragment.appendChild(liDom);
  box.appendChild(fragment);

• 3、设置DOM的样式display='none'来隐藏元素操作

• 4、事件绑定到父节点上

  document.getElementById("ul").addEventListener("click", function(e) {
      console.log(e.target.nodeName);
      if (e.target && e.target.nodeName.toUpperCase() === "LI") {
          //处理事件
      }
  })