posts - 90,&
comments - 213,&
trackbacks - 0
一旦把节点添加到document.body(或其后的节点)中，页面就会立即反映出这个变化。对于少量的更新，这是很好的。然而，当要向document.body添加大量数据时，如果逐个添加这些节点，这个过程有可能会十分缓慢。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。
&&&& 假设你想创建十个新段落。你可能这样写：
var&arrText=["<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #"];for(var&i=<span style="COLOR: #;i&arrText.i++)...{&&&&var&op=document.createElement("P");&&&&var&oText=document.createTextNode(arrText[i]);&&&&op.appendChild(oText);&&&&document.body.appendChild(op);}
&这段代码运行良好，但问题是它调用了十次document.body.appendChild(),每次要产生一次页面刷新。这时，文档碎片会更高效：
var&arrText=["<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #","<span style="COLOR: #"];var&oFrag=document.createDocumentFragment();for(var&i=<span style="COLOR: #;i&arrText.i++)...{&&&&var&op=document.createElement("P");&&&&var&oText=document.createTextNode(arrText[i]);&&&&op.appendChild(oText);&&&&oFrag.appendChild(op);&&&&}document.body.appendChild(oFrag);
这段代码中,document.body.appendChild()仅调用了一次，这意味首只需要进行一次屏幕的刷新。
阅读(6819)
&re: CreateDocumentFragment的用处
只进行一次刷新是不是代表执行相同的代码时间会短很多？如果是这样，我试验的结果却是使用createDocumentFragment平均加载时间比第一种方法还要长。for循环代码:var op=document.createElement(&img&);
oFrag.appendChild(op);时间计算用前后的new Date().getTime()相减。why？&&&&&&
&re: CreateDocumentFragment的用处
@林潇在现代浏览器中，两种做法速度都差不多！在低版本ie6中，后者快很多，但奇怪的是在ie7或者以上前者又快了。估计是针对第一种方法有做过优化吧！&&&&&&
2016年12月
27282930123456789101112131415161718192021222324252627282930311234567
留言簿(15)
随笔分类(1)
随笔档案(90)
文章分类(727)
文章档案(712)
http://blog.csdn.net/prodigynonsense
/index.php/weblog/comments/60_more_helpful_ajax_tutorials/
http://www.csser.org/
div css 论坛
http://blog.csdn.net/tianxiaode/
javascript
http://webfx.eae.net/dhtml/
http://www./handbook/php/index.html
http://www.shu3.net/blog/default.asp?cateID=14
.cn/control/
/manual/xmlhttprequest.html
javascript
/php/php_intro.asp
http://www.csser.org/
script src/2006/tq script
W3CHINA.ORG讨论区
http://www.csser.org/
网站制作小图标
积分与排名
阅读排行榜
评论排行榜查看: 789|回复: 0
document.createDocumentFragment()的作用是什么
本帖最后由 antzone 于
00:03 编辑
document.createDocumentFragment()的作用是什么:
createDocumentFragment()函数可能用的并不是太多，之所以这样是因为不使用此方法完全可以实现所有的功能，但是如果能够妥当的使用此函数可以有效的提高执行效果，下面就通过实例简单介绍一下次函数用法。
先看一段代码实例:
[JavaScript] 纯文本查看 复制代码&#36816;&#34892;&#20195;&#30721;var myArray=new Array(&一&,&二&,&三&,&四&,&五&,&六&);
window.onload=function(){
for(var i=0;i&6;i++) {
var odiv=document.createElement(&div&);
var theText=document.createTextNode(&蚂蚁部落&+myArray[i]);
odiv.appendChild(theText);
document.body.appendChild(odiv);
以上代码可以依次输出&蚂蚁部落X&。怎么实现的非常简单，这里就不多说。其实上面的代码在执行效率方面还有提高的余地，因为每调用document.body.appendChild()都会渲染一次页面，执行效率自然就会降低，这个时候createDocumentFragment()函数的作用就会得到体现了，代码修改如下:
[JavaScript] 纯文本查看 复制代码&#36816;&#34892;&#20195;&#30721;var myArray=new Array(&一&,&二&,&三&,&四&,&五&,&六&);
var myFragment=document.createDocumentFragment();
window.onload=function(){
for(var i=0;i&6;i++) {
var odiv=document.createElement(&div&);
var theText=document.createTextNode(&蚂蚁部落&+myArray[i]);
odiv.appendChild(theText);
myFragment.appendChild(odiv);
document.body.appendChild(myFragment)
以上代码使用实现了同样的功能，不过页面只渲染一次就可以了，执行效果当然就高了。
createDocumentFragment()函数:
此函数可以创建一个文档碎片节点。但是此函数创建的节点在文档中没有对应的标记，也就无法在页面中进行渲染，但总归是个节点，具有一般节点所具有特性，例如可以使用appendChild()等方法。
上面的代码实例说明使用此方法可以减少渲染次数，其实这个要分情况的，如果目标节点已经在文档中存在的情况下，使用此方法可以提高效率，如果目标节点在文档中不存在，需要动态创建的话，然后再进行添加同样也只是渲染一次，代码实例如下:
[JavaScript] 纯文本查看 复制代码&#36816;&#34892;&#20195;&#30721;var myArray=new Array(&一&,&二&,&三&,&四&,&五&,&六&);
var fatherDiv=document.createElement(&div&);
window.onload=function(){
for(var i=0;i&6;i++) {
var odiv=document.createElement(&div&);
var theText=document.createTextNode(&蚂蚁部落&+myArray[i]);
odiv.appendChild(theText);
fatherDiv.appendChild(odiv);
document.body.appendChild(fatherDiv)
以上代码中，没有使用createDocumentFragment()函数同样只渲染一次。
所以说要理解在何种场景下使用才能够提高效率，而不是死记硬背。createDocumentFragment（）的使用 - 记录我的开发点滴. - ITeye技术网站
博客分类：
前段时间在论坛上发的JS操作table的时候，有人指出了，在进行大量DOM操作的时候应该使用createDocumentFragment，所以了解了一下这个方法，在浏览器里面测试了一下，效果相差还是非常明显的，有兴趣的可以下载HTML页面文件下去看看！
&html&
&title&createDocumentFragment的使用&/title&
&script type="text/javascript"&
function slowAdd() {
for (var i = 0; i & 10000; i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
function fastAdd(){
var oFragmeng = document.createDocumentFragment();
//创建文档碎片
for (var i = 0; i & 10000; i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
oFragmeng.appendChild(op);
document.body.appendChild(oFragmeng); //最后一次性添加到document中
&input id="Button1" type="button" value="普通方法" onclick = "slowAdd()"/&&/p&
&input id="Button2" type="button" value="createDocumentFragment快速操作"
onclick = "fastAdd()"/&&/p&
(530 Bytes)
下载次数: 43
论坛回复 /
(2 / 1438)
createDocumentFragment
这个东西是相当好用好用呀。
还有个方法，
var cache = [];
ceche.push(...)
cache.join();
node.style.display='none';
node.appendChild(...);
node.style.display='block';
可惜的是，第二种方法会引起页面滚动条变化。
以前都没有用过这个东西，后来的时候在论坛发了一篇JS操作table的文章，大伙强烈建议使用它，在了解了它，话说它确实很好用！
浏览: 356702 次
来自: 重庆
你好， 可以请教个关于activiti定时边界事件的问题么？我 ...
什么垃圾东西？
hi ， 楼主，我遇到过类似的问题，我用的是timeDurat ...
你敢不敢把源码贴出来！