关于document.createDocumentFragment()
发布时间:2009-04-05 16:04:00
documentFragment 是一個無父對象的document對象.
他支持以下DOM2方法:
appendChild, cloneNode, hasAttributes, hasChildNodes, insertBefore, normalize, removeChild, replaceChild.
也支持以下DOM2屬性:
attributes, childNodes, firstChild, lastChild, localName, namespaceURI, nextSibling, nodeName, nodeType, nodeValue, ownerDocument, parentNode, prefix, previousSibling, textContent.
其他方法可以將documentFragment 作為一個參數,(比如Node的 appendChild和insertBefore 方法),這樣,fragment 就可以被追加到父對象中。
Example:
var frag = document.createDocumentFragment();
frag.appendChild(document.createTextNode('Ipsum Lorem'));
document.body.appendChild(frag);
document.createDocumentFragment()说白了就是为了节约使用DOM。每次JavaScript对DOM的操作都会改变页面的变现,并重新刷新整个页面,从而消耗了大量的时间。
为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。
var oui=document.getElementById("oItem");
for(var i=0;i<10;i++)
{
var oli=document.createElement("li");
oui.appendChild(oli);
oli.appendChild(document.createTextNode("Item"+i));
}
上面的代码在循环中调用了oui.appendChild(oli),每次执行这条语句后,浏览器都会更新页面。其次下面的oui.appendChild()添加了文本节点,也要更新页面。所以一共要更新页面20次。
为了页面的优化,我们要尽量减少DOM的操作,将列表项目在添加文本节点之后再添加,并合理地使用creatDocumentFragment(),代码如下:
var oui=document.getElementById("oItem");
var oFragment=document.createDocumentFragment();
for(var i=0;i<10;i++){
var oli=document.createElement("li");
oli.appendChild(document.createTextNode("Item"+i));
oFragment.appendChild(oli);
}
oui.appendChild(oFragment);
猜你喜欢
- 运行以下代码: Dim com As ADODB.Command Dim rst
- 以前见过一个很漂亮的网页提示信息,就是把鼠标放到网页的文字或者图片上面就会有提示的那种透明的,还带个箭头,很漂亮,不知道谁在哪见过没有,感谢
- asp之家注:学习javascript(js),免不了要用到打开新窗口,方法很多,总的来说是使用window.open。不同与HTML中的t
- 有。试试下面这个程序:saveip.asp<%Server.Scripttimeout = 1000On 
- 学习了css一段时间,现在对css的一些技巧进行一次小结.希望能对那些刚学习css的新手们带来帮助.一、关于注释在创建xhtml+CSS网站
- ASP错误大全 Microsoft VBScript语法错误(0x800A03E9)-->内存不足 Microsoft VBScript语法
- 论坛有人问起如何获取读取CSS属性值,就写了下面这段兼容各浏览器的获取HTML元素的css属性值函数:function getSt
- 1. 用Dreamweaver 4.0轻松设计会自动弹性调整的网页 首先需要保证的是你的页面内容采用了表格的格式,然后打开你要编辑的页面,按
- 代码如下:--代码一DECLARE @cc INT SELECT NewsId,ROW_NUMBER() OVER(ORDER
- 我发现有的网站利用了SQL SERVER提供的通过EXCHANGE或OUTLOOK收发邮件的扩展存储过程来完成收发和自动处理邮件(这句话太长
- 今天在GOOGLE上查图片资料,这一幕真让我纠结啊:使用【向前】【向后】这种说法,就默认了有一个对比坐标,那就是当前显示的4张缩略图。点击【
- 作为一名前端,我们通常要做的就是让页面在各系统A-Grade浏览器,甚至网站浏览份额0.1%以上的浏览器上良好显示。当然,还有性能问题。不过
- 方法一:1、将ORACLE软件拷贝到硬盘。 2、将 硬盘目录文件\stage\Components\oracle.swd.jre
- 一直在用JS写ASP,也不是特别原因,只是当初学的是JS,后来学ASP时知道ASP也可以用JS写,就没去学VBS.前几个月刚学ASP的时候找
- 小贤是一条可爱的小狗(Dog), 它的叫声很好听(wow), 每次看到主人的时候就会乖乖叫一声(yelp).从这段描述可以得到以下对象:fu
- 这是经常用的一个分页存储过程 希望大家指点不足 代码如下:USE [a6756475746] GO /****** Object
- 哪的资料都不如官方资料权威。今天总算从MSDN中择出了ASP编码问题的解决方案。下面是MSDN中的一段话。Setting @CODEPAGE
- 为了更好的说明问题,首先引出下面的题目//请说明下面变量 a-d 的值 var a = [[1][1]]; var b = [['a
- 按照惯例,年底的淘宝的确是到了“需要改版的时候”。这次新版的淘宝首页上线,乍看并没有多少夺人眼球的地方,但仔细揣摩其中的细节,还是发现了不少
- 数据库,网站运营的基础,网站生存的要素,不管是个人用户还是企业用户都非常依赖网站数据库的支持,然而很多别有用心的攻击者也同样非常&l