数据绑定及dom回流实例详解
程序员文章站
2022-06-03 15:01:13
...
数据绑定的方法:
1、利用动态创建元素节点和把它追加到页面中的方式实现数据绑定(将动态添加的li添加到ul中)
var oUl = document.getElementById('ul')for(var i = 0;i<ary.length;i++){var cur = ary[i];var oLi = document.createElement('li'); oLi.innerHTML = "<span>"+(i+1)+"</span>"+cur.title oUl.appendChild(oLi) }
优势:把需要动态绑定的内容一个个的追加到页面中,对原来的元素没有任何的影响
弊端:每当创建一个li,我们就添加到页面中,引发一次DOM的回流,最后引发回流次数过多,影响我们的性能。
2、字符串拼接的方式:首先循环需要绑定的数据,然后把需要动态绑定的标签以字符串的方式拼接到一起。(字符串拼接是我们以后工作中最常用的一种绑定数据的方式)
str = ""( i = 0;i<ary.length;i++ cur =+="<li>"+="<span>"+(i+1)+"</span>"+=+="</li>"+= str;//oUl.innerHTML(把之前的li以字符串的方式获取到)+str;拼接完成的整体还是字符串 最后再把字符串统一的添加到页面中,浏览器还需要把字符串渲染成为对应的标签
弊端:我们把新拼接的字符串添加到ul中,原有的li绑定的事件都消失了
优势:事先把内容拼接好,最后统一添加到页面中,只引发一次回流
JS中DOM深入知识:应该尽量减少回流
回流(重排 reflow):当页面中的HTML结构发生改变(增加、删除元素、位置发生改变),浏览器都需要重新的计算一遍最新的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+1)+"</span>"+cur.title frg.appendChild(oLi) } oUl.appendChild(frg); frg = null;
只有一次回流,并且对原来的没有影响
以上就是数据绑定及dom回流实例详解的详细内容,更多请关注其它相关文章!
上一篇: php PHPMailer 报错?