数据绑定及dom回流实例详解-js教程-PHP中文网

数据绑定及dom回流实例详解

零下一度

发布： 2017-06-30 11:05:14

原创

1683人浏览过

数据绑定的方法:

　　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深入知识：应该尽量减少回流

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

回流(重排 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中文网其它相关文章！