数据绑定和DOM回流

最新推荐文章于 2023-08-02 17:52:34 发布

六点路人

最新推荐文章于 2023-08-02 17:52:34 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/weixin_41675013/article/details/104971223

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
   *{margin:0px; padding:0px;}
   #ul1 li{line-height:24px; height:24px; overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
   .bg{background:red;color:#fff;line-height:24px; border-radius:10px;border:1px solid #fff;padding:0 5px;}
</style>
   <script src="json/json-bind.js" type="text/javascript"></script>
</head>
<body>
<ul id="ul1">
   <li><span class="bg">1</span>CSDN是全球知名中文IT技术交流平台,创建于1999年</li>
   <li><span class="bg">2</span>CSDN包含原创博客、精品问答、职业培训、技术论坛</li>
   <li><span class="bg">3</span>完整内容的专业IT技术开发社区</li>
</ul>
<script>
var oUl = document.getElementById("ul1");
var oLis = oUl.getElementsByTagName("li");
for(var i=0;i<oLis.length;i++){
   oLis[i].onmouseover = function(){
       this.style.backgroundColor = "pink";
   };
   oLis[i].onmouseout = function(){
       this.style.backgroundColor = "";
   };
}
//1、利用动态创建元素节点和把它追加到页面中的方式实现数据绑定
for(var i =0;i<ary.length;i++){
   var cur = ary[i];
   var oLi=document.createElement("li");//document只能是document不能改成其他;只有在document这个实例的原型链才能找到creatElement,其他实例的原型链上找不到creatElement,这是从面向对象的思想上来理解这个问题
   oLi.innerHTML = "<span 'class='bg''>" +(i+4)+ "</span>" + cur.title;
   //oUl.appendChild(oLi);
}
//优势：把需要动态绑定的内容一个个的追加到页面中，对原来的元素没有任何的影响
//弊端：每当创建一个li,我们就添加到页面中,引发一次DOM回流,最后引发回流次数过多，影响我们的性能

//2、字符串拼接的方式：寿险循环需要绑定的数据，然后把需要动态绑定的标签以字符串的方式拼接到一起，拼接完成后，最后统一的添加到页面中->"字符串拼接绑定数据是我们以后工作中最常用的一种绑定数据的方式"->模板引擎数据绑定的(jade、kTemplate、angular.js、backbone.js...)所有模板引擎数据绑定的原理就是字符串拼接
var str = "";
for(var i =0;i<ary.length;i++){
   var cur = ary[i];
   str += "<li>";
   str += "<span "+"class='bg'"+">" +(i + 4) + "</span>";
   str += cur.title;
   str += "</li>";
}
console.log(str);
oUl.innerHTML += str;
//->oUl.innerHTML=oUl.innerHTML(把之前的三个li以字符串的方式获取到)+str;拼接完成的整体还是字符串，最后把字符串统一的添加到页面中，浏览器还需要把字符串渲染成为对应的标签
//弊端：我们把新拼接的字符串添加到#ul1中，原有的三个li的鼠标滑过效果都消失了(原来标签绑定的事件都消失了)
//优势：事先把内容拼接好，最后统一添加到页面中，只引发一次回流

//JS中DOM深入知识：
//->回流(重排relow):当页面中的HTML结构发生改变(增加、删除元素、位置发生改变...),浏览器都需要重新计算一遍最新的DOM结构，重新的对当前的页面进行渲染
//->重绘：某一个元素的部分样式发生改变了(背景颜色),浏览器只需要重新的渲染当前的元素即可

//js性能优化中：内存的手动释放，注意减少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+4) + "</span>" + cur.title;
   frg.appendChild(oLi);
}
oUl.appendChild(frg);
frg = null; //->手动释放堆内存

</script>
</body>
</html>

六点路人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
数据绑定和DOM回流

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin:0px; padding:0px;} #ul1 li...
复制链接

扫一扫