关于JS优化

1. DOM优化原则一：DOM和JS操作是分离的每一次操作都是要经过消耗的。要尽量减少这样的操作。 比如：将js全部操作完了再对DOM进行连接。
2. 原则二：DOM操作innerHTML chrome耗能少 firefox,IE innerHTML 比 DOM耗能少
3. 原则三：减少DOM的操作 。

解决办法

1. 利用cloneNode(true) true代表克隆包括子节点 而不是每次都创建一个新的节点

2. 尽量每次都用变量将DOM操作的值存储起来用做局部变量(只进行了一次的DOM操作)
   3.只获取元素节点，比如：childNodes 元素，文本节点 children元素节点
   4.querySelector,querySelectorAll 效率较高

   原则四：重排(改变页面内容)和重绘(浏览器显示页面内容)
   1.在appendChild()之前添加操作，这样就只会重绘一次
   2.合并DOM操作 cssText
   3.利用文档碎片信息 createDocumentFragment

 window.onload = function() {
        for (var i = 0; i < 5000; i++) {
                // document.innerHTML += 'a';
            }

            for (var i = 0; i < 5000; i++) {
                str += 'a';
            }
            document.innerHTML += str;

        **利用字符串累加，这样只会进行一次DOM操作，性能增加**

            for(var i=0;i<5000;i++){
                // var oLi = document.createElement('li');
                var newLi = oLi.cloneNode(true);

                利用克隆节点，而不是每次创建
            }

      每次保存len临时变量，而不是在循环中获取一次，在做其它操作的时候同理，不仅增加效率，而且可以简洁语义化。

            var len = aLi.length;
            for(var i=0;i<len;i++){
                aLi[i].innerHTML = 'li';
            }

    将所有的节点添加入Fragment中，最后在一次性加入父节点中、

            var oFrag = document.createDocumentFragment();
            for(var i=0;i<5000;i++){
                var oLi = document.createElement('li');
                oFrag.appendChild(oLi);
            }
            oUl.appendChild(oFrag);
        };