asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0

一旦把节点添加到document.body(或其后的节点)中,页面就会立即反映出这个变化。对于少量的更新,这是很好的。然而,当要向document.body添加大量数据时,如果逐个添加这些节点,这个过程有可能会十分缓慢。为解决这个问题,可以创建一个文档碎片,把所有的新节点附加其上,然后把文档碎片的内容一次性添加到document中。

     假设你想创建十个新段落。你可能这样写:

var arrText=["1","2","3","4","5","6","7","8","9","10"];
for(var i=0;i<arrText.length;i++)
{
    
var op=document.createElement("P");
    
var oText=document.createTextNode(arrText[i]);
    op.appendChild(oText);
    document.body.appendChild(op);
}

 这段代码运行良好,但问题是它调用了十次document.body.appendChild(),每次要产生一次页面刷新。这时,文档碎片会更高效:

var arrText=["1","2","3","4","5","6","7","8","9","10"];
var oFrag=document.createDocumentFragment();

for(var i=0;i<arrText.length;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()仅调用了一次,这意味首只需要进行一次屏幕的刷新。
posted on 2007-08-30 01:14 汪杰 阅读(8337) 评论(3)  编辑 收藏 引用 所属分类: javascriptDhtml DOm

FeedBack:
# re: CreateDocumentFragment的用处
2011-04-02 18:33 | 林潇
只进行一次刷新是不是代表执行相同的代码时间会短很多?如果是这样,我试验的结果却是使用createDocumentFragment平均加载时间比第一种方法还要长。for循环代码:
var op=document.createElement("img");
op.src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.png";
oFrag.appendChild(op);
时间计算用前后的new Date().getTime()相减。
why?  回复  更多评论
  
# re: CreateDocumentFragment的用处
2012-10-31 08:58 | icrt
@林潇
在现代浏览器中,两种做法速度都差不多!在低版本ie6中,后者快很多,但奇怪的是在ie7或者以上前者又快了。估计是针对第一种方法有做过优化吧!  回复  更多评论
  
只有注册用户登录后才能发表评论。

<2009年7月>
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 468991
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜