上一篇文章说到了动态添加文本节点的方法那如果我们要添加多个文本节点或者元素节点呢？

大家可能会想到用循环然后逐个逐个添加 但是别忘了js 还提供了创建一个文本碎片的方法

createDocumentFragment();

这个方法怎么用呢？

其实这个方法就相当于一个收集器 把所有要添加的元素收集起来再打包添加到body里面

思路就是这样以下分享一下代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

       window.onload = function(){

           var collect = document.createDocumentFragment();//首先创建一个收集器

           for (var i = 0; i < 500; i++) {

                 var tadiv = document.createElement("div");//创建一个元素节点

                 var text = document.createTextNode(i);//创建一个文本节点

                 tadiv.appendChild(text);//为元素节点添加文本节点

                 collect.appendChild(tadiv);//收集器把所有的内容收集起来

           }

           document.body.appendChild(collect);//把收集好的内容放到body 里面

       };

    </script>

</head>

<body>

</body>

</html>

如果不用这种方法批量添加元素而是逐个逐个appendChild这样添加就会大大影响了网页运行速度所以这个方法你值得拥有~

【笔记】科普createDocumentFragment() 创建文档碎片节点的更多相关文章

  1. javascript创建文档碎片节点

    在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...

  2. createDocumentFragment()　创建文档碎片节点

    var aqiData = [ ["北京", 90], ["上海", 50], ["福州", 10], ["广州", 5 ...

  3. JS性能优化之创建文档碎片(document.createDocumentFragment）

    讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...

  4. 【js基础修炼之路】--创建文档碎片document.createDocumentFragment()

          讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么.         在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于 ...

  5. 文档碎片DocumentFragment

    文档碎片是什么? 参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用. createDocumentFragm ...

  6. javascript之文档碎片，文档碎片在理论上可以提高DOM操作的执行效率

    刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...

  7. 文档碎片及xml讲解

    1.将数据渲染到页面的几种方式 1.字符串拼接 2.dom循环 3.模板 4.文档碎片 字符串拼接: 优势:只进行一次dom回流 缺点:原有的dom事件会消失 案例分析:原有list中有3个li,并且 ...

  8. JS JavaScript中的文档碎片 DocumentFragement JS性能优化

    文档碎片是什么: 如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的.但是如果我们使用文档碎片 ...

  9. document文档碎片

    var arrText = ["1","2","3","4","5","6",& ...

随机推荐

  1. java接口的嵌套

    java接口 1.接口中定义的变量默认是public static final 型,且必须给其初值,所以实现类中不能重新定义,也不能改变其值 2.接口中的方法默认都是 public abstract ...

  2. .Net 4.5 的async 和await 的简单理解使用

    原文地址:http://www.cnblogs.com/HJL-Blog/p/4432632.html 所谓的异步编程是利用CPU空闲时间和多核的特性,它所返回的Task或Task<TResul ...

  3. java并发编程（十）使用wait/notify/notifyAll实现线程间通信

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17225469 wait()方法:public final void wait()  thr ...

  4. 中國區的代理協議的韓國遊戲廠商PatiGames

    “與阿裏巴巴簽署旗下游戲「突突三國」在中國區的代理協議的韓國遊戲廠商PatiGames決定與阿裏巴巴終止合作.”相信這條前不久報導的新聞,很多人並不陌生,但這背後其實並不像表面那樣簡單.早在今年4月P ...

  5. vb6保存项目到c盘的安装目录

    工程保存在安装目录("C:\Program Files (x86)\Microsoft Visual Studio\VB98\errhandler1.vbp")里. 文件管理器找不 ...

  6. ubuntu实现ramdisk

    1. linux内核提供了16个ramdisk供使用者使用,只需格式化,并挂在便可以使用.查看 ls /dev/ram* 2. 修改配置文件: sudo gedit /etc/default/grub ...

  7. Qt之创建桌面和开始菜单快捷方式

    将安装好的酷狗拷贝到C:\data目录中 1.创建桌面快捷方式 QFile::link("C:/data/KuGou.exe", QStandardPaths::writableL ...

  8. 链接的热键属性accesskey

    <a href="" accesskey="h"></a> 意思是按住Alt键+h,再按enter键就可以直接链接到HTML的目标网址中 ...

  9. 转：HAR(HTTP Archive)规范

    HAR(HTTP Archive),是一个用来储存HTTP请求/响应信息的通用文件格式,基于JSON.这个格式的出现可以使HTTP监测工具以一种通用的格式导出所收集的数据,这些数据可以被其他支持HAR ...

  10. linux 查找文件的命令

    http://www.ruanyifeng.com/blog/2009/10/5_ways_to_search_for_files_using_the_terminal.html