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

大家可能会想到用循环然后逐个逐个添加 但是别忘了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中强制类型转换分为基本数据类型和引用数据类型两种,这里我们讨论的后者,也就是引用数据类型的强制类型转换. 在Java中由于继承和向上转型,子类可以非常自然地转换成父类,但是父类转换成子类则需 ...

  2. navicat使用

      navicat我觉得做程序的基本上都会用,它方便,快捷,直观等,优点很多,这也是我写这篇文章的原因.以前我基本上都是用phpmyadmin,也挺好用,不过也有不少缺点,比如数据库备份文件太大,根本 ...

  3. 【5集iCore3_ADP演示视频】5-1 iCore3应用开发平台开箱视频

    iCore3双核心应用开发平台基于iCore3双核心板,包含ARM.FPGA.7寸液晶屏.双通道数字示波器.任意波发生器.电压表等模块,是一款专为电子爱好者设计的综合性电子学习系统. [视频简介]本视 ...

  4. C#拾遗-边边角角

    1.扩展方法 public static 方法返回值类型 扩展方法名(this 要扩展类型 obj,调用扩展方法时需要的参数){ return "返回值"} 2.运算符重载 pub ...

  5. 微信小程序 不在以下合法域名列表中，请参考文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html

    微信小程序  不在以下合法域名列表中,请参考文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html 友情提示: 大家 ...

  6. get back to the slower clock rate that allows it to save more power

    http://www.howtogeek.com/177790/why-you-cant-use-cpu-clock-speed-to-compare-computer-performance/ Wh ...

  7. Android Touch事件传递机制详解

    Android开发的朋友经常处理各种触摸事件,然而在触摸事件的传递过程中主要用到三个方法:dispatchTouchEvent().onInterceptTouchEvent()和onTouchEve ...

  8. EntityFramework 性能优化

    1. 查询时如果不缓存数据,可以加快加载速度 //连接数据库 TestDbContext db = new TestDbContext(); //使用 AsNoTracking() 方法后将不会在 D ...

  9. springmvc配置多视图 - tiles, velocity, freeMarker, jsp

    转自: http://www.cnblogs.com/shanheyongmu/p/5684595.html <!-- Velocity --> <bean id="vel ...

  10. 大气散射的demo