优化你的DOM

var times=10000;  var time1 = function(){     var time = times;    while(time--){  //DOM的两个操作放在循环内        var dom = document.querySelector("#Div1");        dom.innerHTML+="a";    }  };  var time2=function(){      var time = times,      dom = document.querySelector("#Div1");    while(time--){ //DOM的一个操作放在循环内       dom.innerHTML+="a";    }  };  var time3=function(){      var time = times,      dom = document.querySelector("#Div1"),      str = "";    while(time--){ //循环内不放置DOM的操作      str +="a";    }    dom.innerHTML=str;  }  console.time(1);  //设置时间起点  time1();  console.timeEnd(1);  console.time(2);  //设置时间起点  time2();  console.timeEnd(2);  console.time(3);  //设置时间起点  time3();  console.timeEnd(3);    //测试结果为:  1: 101.868ms  2: 101.560ms  3: 13.615ms

重流重绘发生的情况

那重流和重绘通常什么情况下会发生呢？重流发生情况:

1. 添加或者删除可见的DOM元素

2. 元素位置改变

3. 元素尺寸改变

4. 元素内容改变（例如：一个文本被另一个不同尺寸的图片替代）

5. 页面渲染初始化（这个无法避免）

6. 浏览器窗口尺寸改变

总的来说，就是改变页面的布局，大小，都会发生重流的情况。那重绘什么时候会发生呢？ 发生重流就一定会发生重绘，但是，重绘的范围比重流稍微大了一点。比如，当你仅仅改变字体颜色，页面背景颜色等 比较"肤浅"的操作时，是不会打扰到重排的。

合并DOM的操作

当我们这样操作时:

div.style.color="red";  div.style.border="1px solid red";

浏览器会很聪明的将两次重排合并到一次发生，节省资源。 其实函数节流的思想和这个有异曲同工的妙处

var throttle = (function(){      var time;      return function(fn,context){            clearTimeout(time);  //进行函数的节流          time = setTimeout(fn.bind(context),200);      }  })()

这个技巧通常用在你调整浏览器大小的时候。但是，如果中间，你访问了offsetTop,clientTop等 立即执行属性的话。那结果你就么么哒了。

div.style.color="red";  //积累一次重排记录  var height = div.clientHeight;  //触发重排  div.style.border="1px solid red";  //再次积累一次重排

这时候，浏览器已经被你玩傻了。 所以，给的一点建议就是，如果要更改DOM结构最好一次性整完，或者，要整一起整~我们上面的css修改，还可以这样

div.style.cssText="color:red;border:1px solid red"; //覆盖原来的css  div.classList.add("change"); //利用class来整体改动

DOM操作的优化

DOM的操作无非就CRUD。这里简单说一下基本的API

创建节点

var div = document.createELement("div");

查找节点

var divs = document.querySelectorAll('div'); //很多个，放在数组内  var onlydiv = document.querySelector('div'); //只有一个  //以及document.getElement系列

查看节点

var html = div.innerHTML;   var outer = div.outerHTML;  //这两个是非常常用的  var classNames = div.classList;  var className = div.className;  var tagName = div.tagName;  var id = div.id;  var style = div.getAttribute("style");  //....

移动节点

ele.replaceChild(replace,replaced); //replace代替replaced  //添加子节点  ele.appendChild(child);  //删除子节点  ele.removeChild(child);  //插入子节点  ele.insertBefore(newEle,referenceEle);

Ok~ 其实，上面所说的这些API只要涉及到DOM操作的都会发生重排。所以，这里是地方可以优化的.

使用fragment

当我们需要批量加入子节点的时候，就需要使用fragment这个虚拟片断，来作为一个容器.比如，我们需要在div里面添加100个p标签

var times = 100;  var addP = function(){      var time = times,      tag1 = document.querySelector('#tag1');      while (time--) {          var p = document.createElement('p');          tag1.appendChild(p);      }  }  var useFrag = function(){      var time = times,      tag1 = document.querySelector('#tag1'),      frag = document.createDocumentFragment();      while (time--) {          var p = document.createElement('p');          frag.appendChild(p);      }      tag1.appendChild(frag);  }  console.time(1);  addP();  console.timeEnd(1);  console.time(2);  useFrag();  console.timeEnd(2);  //基本事件差为:  1: 1.352ms  2: 0.685ms

除了使用fragment片断，还可以使用innerHTML,outerHTML进行相关的优化操作。这里就不赘述了

UI操作的优化

</div>