DOM回流

数据绑定及dom回流

/*一行文字超出后自动进行截取*/
text-overfolow:ellipsis;/*ellipsis:截取后以。。。作为省略clip:没有省略号*/
white-space:nowrap;/*强制不换行*/
overfolow:hidden;/*溢出隐藏*/

1.利用动态创建元素节点和把它追加到页面中的方式实现数据绑定

    for(var i = 0; i<ary.length;i++){
        var cur = ary[i];
        var oLi = document.createElement("li");
        oLi.innerHTML="<span>"+(i+4)+"</span>"+cur.title;
        oUl.appendChild(oLi);
    }

优势：把需要动态绑定的内容一个个的追加到页面中，对原来的元素没有任何的影响

弊端：每当创建一个li，我们就添加到页面中，引发一次DOM的回流，最终导致引发回流的次数过多，影响我们的性能

2.字符串拼接的方式：首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接到一起，拼接完成后，最后统一添加到页面中->字符串拼接绑定数据使我们以后工作中最常用的一种绑定数据的方式->模板引擎数据绑定(jade,kTemplate,angular.js,backbone.js…)所有模板引擎绑定数据的方式就是字符串拼接方式

var str = "";
for (var i = o; i<ary.length;i++){

    var cur = ary[i];
    str+="<li>";
    str+="<span>"+(i+4)+"</span>"
    str+=cur.title
    str+="</li>";
}
oUl.innerHTML+=str;、、->oUl.innerHTML=oUl.innerHTML(把之前的三个li以字符串的方式获取到)+str;(拼接完成的整体还是字符串，最后再把字符串统一添加到页面中，浏览器还需要把字符串渲染成为对应的标签)

优势：事先把内容拼接好，最后统一添加到页面当中，只引发一次回流
弊端：我们把新拼接的字符串添加到#ul1中，原有的三个li的鼠标滑过的效果都消失了（原来标签绑定的事件都消失了）

第三种方式：既保证对原有的不影响，也减少了DOM的回流
3. 文档碎片

    var frg = document.createDocumentFragment();//->创建一个文档碎片，相当于一个临时创建了一个容器
    for(var i = 0; i<ary.length;i++){
        var cur = ary[i];
        var oLi = document.createElement("li");
        oLi.innerHTML="<span>"+(i+4)+"</span>"+cur.title;
        frg.appendChild(oLi);//临时先放到这里
    }
    oUl.appendChild(frg);//最后一次性把这个放到页面中，只引发一次回流，还不影响前面的内容
    frg=null;//手动释放堆内存（优化）

js中DOM深入知识

->回流(重排 reflow):当页面中的HTML结构发生改变(增加、删除元素、位置发生改变等等)，只要结构发生改变，浏览器都需要从新的计算一遍最新的dom结构，从新的对当前的页面进行渲染
->重绘：某一个元素的部分洋时发生改变了(背景颜色)，浏览器只需要从新的渲染当前元素即可

减少dom的回流，手动释放内存 js优化