数据绑定及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背景颜色变成红色