29. 数据绑定及dom回流

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

　　【数据绑定方法一：动态创建元素标签，追加到页面元素】

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

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

　　var olis = oul.getElementByTagName("li")

　　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)// 动态绑定完成，放回页面上

　　}

　　【数据绑定方法二：字符串拼接】

　　首先循环需要绑定的数据，然后把需要动态绑定的标签以字符串的形式拼接到一起，拼接完成后，最后统一的添加到页面当中

　　优势：事先把内容拼接好，最后统一添加到页面当中，只引发一次回流

　　弊端：我们把新拼接的字符串添加到ul中，原有的三个li的鼠标滑过效果都消失了（原来标签绑定的事件都消失了）

　　字符串拼接绑定数据，是以后工作中，最常用的一种绑定数据的方式 -》模板引擎数据绑定

　　var str = ''

　　for (var i = 0;i<ary.length;i++){

　　　　var cur = ary[i]

　　　　str += "<li>"+"<span>"+(i+4)+"</span>"+cur.title+"</li>"

　　}

　　oul.innerHTML += str // oul.innerHTML =oul.innerHTML（把之前的三个li以字符串的方式获取到） + str ;（拼接完成的整体还是字符串，最后再把字符统一的添加到页面中，浏览器还需要把字符串渲染成对应的标签）

　　【数据绑定方法三：文档碎片】

　　只引发一次回流，对原有的还不影响

　　var frg = document.createDocumentFragment() // 创建一个文档碎片，相当于临时创建了一个容器
　　for (var i=0;i<ary.lenght;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；手动释放堆内存

2.JS中DOM深入知识：

　　1）回流（重排 reflow）：当页面中的结构发生改变（增加或者删除元素，位置发生改变...）浏览器都需要重新的计算一遍最新的DOM结构，然后重新的对当前的页面进行渲染

　　2）重绘：某一个元素的部分样式发生改变了（背景颜色），浏览器只需要重新的渲染当前元素即可