JS 数据绑定及DOM回流、重绘、映射

数据绑定及DOM回流

<html lang="zh-CN">
  <head></head>
  <body></body>
</html>

利用动态创建元素节点

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

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.appchild(oLi);
}

优势:
把需要动态绑定的内容一个个的追加到页面中, 对原来的元素没有任何的影响
弊端:
每当创建一个li, 我们就添加到页面中, 引发一次DOM的回流, 最后引发回流次数过多, 影响浏览器性能.

字符串拼接

首先循环需要绑定的数据, 然后把需要动态绑定的标签以字符串的方式拼接到一起, 拼接完成后, 最后统一的添加到页面
模板引擎数据绑定(jade, kTemplate, angular.js, backbone.js ...)

var str = "";
for(var i = 0; i < ary.length; i++){
    var cur = ary[i];
    str += "<li>";
    str += "<span>" + (i + 4) + "</span>";
    str += cur.title;
    str += "</li>";
}
oUi.innerHTML += str;

弊端:
对原有产生影响, 把新拼接的字符串添加到#uli中, 原来标签基于JS绑定的事件都消失了, 把之前原有的都覆盖掉了

优势:
实现把内容拼接好, 最后统一添加到页面中, 只引发一次回流

DOM深入

回流(重排 reflow)

当页面中的HTML结构发生改变(增加\删除元素\位置发生改变...), 浏览器都需要重新的计算一遍最新的DOM结构, 重新的对当前的页面进行渲染

重绘

某一个元素的部分样式(背景颜色)发生改变了, 浏览器只需要重新渲染当前的元素即可

文档碎片

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;

DOM映射

页面中的标签和JS中获取到的元素对象(元素集合)是紧紧的绑定在一起的, 页面的HTML结构改变了, JS中不需要重新获取, 集合里面的内容也会跟着自动改变

var oUl = document.getElementById("uli");
var Olis = oU1.getElementsByTagName("li")
console.log(oLis.length); // 5

// F12调式模式下删除3个li标签
console.log(oLis.length); // 2 没有重新获取, 但是oLis这个集合中的长度和内容会自动跟着发生改变

在JS改变获取到的页面标签属性, 页面也会自动重新绘制

oLis[0].style.background = "red";
// 选中的li背景颜色变成红色
posted @ 2020-09-10 19:48  lemon-Xu  阅读(430)  评论(0)    收藏  举报