文档碎片是什么:

如果我们要在一个ul中添加100个li,如果不使用文档碎片,那么我们就需要使用append经常100次的追加,这会导致浏览器一直不停的渲染,是非常消耗资源的。但是如果我们使用文档碎片了,我们可以先将100个li添加到文档碎片中,然后直接把这个文档碎片追加到ul中即可。所以文档碎片其实就是一个临时的仓库。

如下代码在document.body中添加5个span

for(var i=0;i<5;i++)

{ 

    var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 

    document.body.appendChild(op); 

} 

对于少量的更新,一条条循环插入的运行也还可以。但是,当要向document中添加大量数据(比如1w条),如果像上面的代码一样,逐条添加节点,整个过程会十分缓慢,性能极差。

也可以建一个新的节点,例如div,先将span添加到div上,然后再将div添加到body

var oDiv = document.createElement("div"); 

for(var i=0;i<10000;i++)

{ 

    var op = document.createElement("span"); 

    var oText = document.createTextNode(i); 

    op.appendChild(oText); 

    oDiv.appendChild(op);  

} 

document.body.appendChild(oDiv); 

但这样会在body中多添加一个div节点。用文档碎片就不会产生这种节点,引入createDocumentFragement()方法,它的作用是创建一个文档碎片,把要插入的新节点先插入它里面,然后再一次性地添加到

document中。代码如下:

//先创建文档碎片

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中

document.body.appendChild(oFragmeng); 

JS JavaScript中的文档碎片 DocumentFragement JS性能优化的更多相关文章

  1. JavaScript中的文档模式和严格模式

    JavaScript中的文档模式和严格模式 语法模式有普通模式和严格模式两种 普通模式:正常的JavaScript语法拼写以及代码编写(相对于严格模式存在着语法上的不严谨),尽可能的识别错误以及不规范 ...

  2. JavaScript中的文档对象模型

    1. DOM基本介绍1 什么是DOMDOM的英语全称为Document Object Model,翻译成中文就 是文档对象模型.也就是说,将整个文档看作是一个对象.而一个文档又是由很多节点组成的, 那 ...

  3. JavaScript中函数文档注释

    /** 方法说明 * @method 方法名 * @for 所属类名 * @param{参数类型}参数名 参数说明 * @return {返回值类型} 返回值说明 */

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

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

  5. Python中的文档字符串作用

    文档字符串是使用一对三个单引号 ''' 或者一对三个双引号 """来包围且没有赋值给变量的一段文字说明(如果是单行且本身不含引号,也可以是单引号和双引号), 它在代码执行 ...

  6. javascript创建文档碎片节点

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

  7. js/css在html文档中的引用外部文件方式对比

    包含css样式表和js脚本的最好方式是使用外部文件,因为css/js和html标记文档可以清晰地分离. css的外部引用写在<head></head>中: <head&g ...

  8. JavaScript之向文档中添加元素和内容的方法

    一.非DOM方法添加 1.document.write() <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

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

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

随机推荐

  1. html 复选框checkbox

    统计选中复选框的个数 <html> <head> <title> </title> <script> function static_num ...

  2. 白话SpringCloud | 第六章:Hystrix监控面板及数据聚合(Turbine)

    前言 前面一章,我们讲解了如何整合Hystrix.而在实际情况下,使用了Hystrix的同时,还会对其进行实时的数据监控,反馈各类指标数据.今天我们就将讲解下Hystrix Dashboard和Tur ...

  3. javaSE练习1——变量和运算符

    一.已知a,b均是整型变量,写出将a,b两个变量中的值互换的程序.(知识点:变量和运算符综合应用): package com.test; public class t01 { public stati ...

  4. IDEA+Maven+多个SpringBoot子模块(创建多模块整合项目)

    https://blog.csdn.net/willjgl/article/details/77773634 https://blog.csdn.net/qqHJQS/article/details/ ...

  5. random模块/string模块

    一.random模块 random模块可以很容易生成随机数和随机字符串. random.randint(1, 100) # 1-100之间取一个随机数 random.randrange(1, 100) ...

  6. twaver拓扑图通道组织图(百分比使用率/水槽)效果实现

    功能介绍: 利用拓扑图实现:64条通道,根据每条通道是否承载业务,提供百分比展示 首先上图,功能效果如图: 废话不多,直接上代码: <!DOCTYPE html> <html> ...

  7. 彻底解决INSTALL_FAILED_UPDATE_INCOMPATIBLE的安装错误

    利用adb shell进入系统,进入/data/app或者/data/data,删除跟你安装的apk同样的包名: 按Ctrl+C退出系统,利用adb pull /data/system/package ...

  8. SpringBoot热部署插件

    1.配置在 maven工程中的pom.xml文件中 2.SpringBoot框架中提供的一个热部署插件,利用该热部署插件,我们可以在修改代码后不用重启应用,大大提高开发效率:

  9. Java Hotspot client模式和server模式的区别

    当虚拟机运行在-client模式的时候,使用的是一个代号为C1的轻量级编译器, 而-server模式启动的虚拟机采用相对重量级,代号为C2的编译器. C2比C1编译器编译的相对彻底,服务起来之后,性能 ...

  10. log4go的日志滚动处理——生产环境的适配

    日志处理有三类使用环境,开发环境DE,测试环境TE,生产环境PE. 前两类可以看成是一类,重要的是屏幕显示--termlog.生产环境中主要用的是socklog 和 filelog,即网络传输日志和文 ...