DOM性能优化

1、测试JS执行时间
    console.time('hello');
    执行的测试代码
    console.timeEnd('hello');
DOM优化原则：尽量减少DOM与JS的交互，让JS先把数据处理完成再去DOM交互。
    如：例1：
    console.time('hello');
    for(var i=0;i<5000;i++){
        obj.innerHTML+='a';
    }
    console.timeEnd('hello');
    优化情况：
    var str='';
    console.time('hello');
    for(var i=0;i<5000;i++){
        str+='a';
    }
    obj.innerHTML=str;
    console.timeEnd('hello');
2、合并css样式 cssText
    //优化前
    console.time('hello');
    var obj_ul=document.getElementById('ul1');
    for(var i=0;i<50000;i++){
        var obj_li=document.createElement('li');
        obj_li.style.width='100px';
        obj_li.style.height='20px';
        obj_li.style.background='red';
        obj_ul.appendChild(obj_li);
    }
    console.timeEnd('hello');
    执行花费时间：960ms
    //优化后
    console.time('hello');
    var obj_ul=document.getElementById('ul1');
    for(var i=0;i<50000;i++){
        var obj_li=document.createElement('li');
        obj_li.style.cssText='width:100px;height:20px;background:red';
        obj_ul.appendChild(obj_li);
    }
    console.timeEnd('hello');
    执行花费时间：690ms
3、文档碎片 createDocumentFragment() 相当于一个袋子，用于集中的收集元素再一并加载到dom中
    未优化前
    console.time('hello');
    var obj_ul=document.getElementById('ul1');
    for(var i=0;i<50000;i++){
        var obj_li=document.createElement('li');
        obj_ul.appendChild(obj_li);
    }
    console.timeEnd('hello');
    执行花费时间：140ms
    优化后
    console.time('hello');
    var obj_ul=document.getElementById('ul1');
    var obj_frag=document.createDocumentFragment();
    for(var i=0;i<50000;i++){
        var obj_li=document.createElement('li');
        obj_frag.appendChild(obj_li);
    }
    obj_ul.appendChild(obj_frag);
    console.timeEnd('hello');
    执行话费时间：100ms
4、jQuery模板替换