欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

数据绑定及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回流实例详解的详细内容,更多请关注其它相关文章!