码迷,mamicode.com
首页 > 移动开发 > 详细

Js中的appenChild,insertBefore--createDocumentFragment

时间:2014-12-28 20:41:35      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:

平时项目中会有一些流程,或者是评论相关的东西,这些一般只会是在页面初次加载一部分,剩余部分搞一个更多的标签,当点击更多的时候,ajax请求把所有数据加载完(当然这里也有分页的实现方法,本篇不作讨论), ajax加载的数据一般会运用到appendChild,insertBefore方法来附加在原来标签前后,相信大家对循环附加一定很熟练了,这里我要写的是另一种在性能方面比较赞的方法--运用文档片段,在低版本的IE下,缺少优化机制,循环附加造成的回流和渲染,会让浏览器hold不住(几何改变会造成浏览器重排)

看看一般appendChild做法,当然你可以直接innerHtml或者jquery的Html到容器上,这里是考虑原HTML可能包含事件,才把Html字符串转换为节点。

技术分享
 1 var ele=document.creatElement("div");
 2 
 3 ele.innerHtml=html;//ajax获取到的
 4 
 5 var divs=ele.childNodes;//所以子节点
 6 
 7 for(var i=0,length=divs.length;i<length;i++)
 8 
 9   {
10 
11       container.appendChild(divs[i].cloneNode(true));//克隆到需要附加的容器
12 
13 }
View Code

优化:

技术分享
1 //接上例子
2 var fragment=document.createDocumentFragment();
3 
4 for(var i=0;length=divs.length;i++){
5     fragment.apendChild(divs[i].cloneNode(true));
6 
7 }
8 //最后一次性附加到容器
9 container.appendChild(fragment);
View Code

扩展原型:

技术分享
 1 //IE9+
 2 //IE678隐藏了对HTMLElement的访问
 3 //请用var appendHtmlOp=function(el,html){
 4 //        el.appendChild(frament);//这里不能用this,this指向了window;
 5 //}
 6 HTMLElement.prototype.appendHtmlOp=function(html){
 7            var div=document.createElement("div"),nodes=null,
 8                         fragment=document.createDocumentFragment();
 9 
10                 div.innerHTML=html;
11                 nodes=div.childNodes;
12               for(var i=0,length=nodes.length;i++){
13                         fragment.appendChild(nodes[i].cloneNode(true));
14             }
15           this.appendChild(fragment);
16           //释放
17           nodes=null;
18           fragment=null;
19 
20 }
View Code

同理也是可以直接修改insertBefore的;把前面的最后的appendChild改为insertBefore;

当然可以传个标识参数来区分;

技术分享
 1 var appendHtmlOp=function(el,html,where){
 2     var     div=document.createElement("div"),fragment=document.createDocumentFragment();nodes=null;
 3 
 4    where=where||"bottom";
 5   div.innertHTML=html;
 6   nodes=div.childNodes;
 7  for(var i=0,length=nodes.length;i<length;i++){
 8             fragement.appendChild(nodes[i].cloneNode(true));
 9    }
10       where!=="before"?el.appendChild(fragment):el.insertBefore(fragment,el.firstChild);
11 }
View Code

 

这就是文档片段优化法,来减少appendChild多次直接附加在HTML后,使其呈现几何数值增加;

 

Js中的appenChild,insertBefore--createDocumentFragment

标签:

原文地址:http://www.cnblogs.com/zoujking/p/4190198.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!