JS JavaScript中的文档碎片 DocumentFragement JS性能优化
文档碎片是什么:
如果我们要在一个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性能优化的更多相关文章
- JavaScript中的文档模式和严格模式
JavaScript中的文档模式和严格模式 语法模式有普通模式和严格模式两种 普通模式:正常的JavaScript语法拼写以及代码编写(相对于严格模式存在着语法上的不严谨),尽可能的识别错误以及不规范 ...
- JavaScript中的文档对象模型
1. DOM基本介绍1 什么是DOMDOM的英语全称为Document Object Model,翻译成中文就 是文档对象模型.也就是说,将整个文档看作是一个对象.而一个文档又是由很多节点组成的, 那 ...
- JavaScript中函数文档注释
/** 方法说明 * @method 方法名 * @for 所属类名 * @param{参数类型}参数名 参数说明 * @return {返回值类型} 返回值说明 */
- javascript之文档碎片,文档碎片在理论上可以提高DOM操作的执行效率
刚来到这里,趁着还没有忘记,来记录一下,昨晚学习的一个知识点——JavaScript中的文档碎片. 一.对文档碎片的基本认识 文档碎片可以提高DOM操作性能(理论上,注意!!理论上的) 文档碎片原理 ...
- Python中的文档字符串作用
文档字符串是使用一对三个单引号 ''' 或者一对三个双引号 """来包围且没有赋值给变量的一段文字说明(如果是单行且本身不含引号,也可以是单引号和双引号), 它在代码执行 ...
- javascript创建文档碎片节点
在<javascript高级程序设计>一书的6.3.5:创建和操作节点一节中,介绍了几种动态创建html节点的方法,其中有以下几种常见方法: · crateAttribute(name): ...
- js/css在html文档中的引用外部文件方式对比
包含css样式表和js脚本的最好方式是使用外部文件,因为css/js和html标记文档可以清晰地分离. css的外部引用写在<head></head>中: <head&g ...
- JavaScript之向文档中添加元素和内容的方法
一.非DOM方法添加 1.document.write() <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...
- JS性能优化之创建文档碎片(document.createDocumentFragment)
讲这个方法之前,我们应该先了解下插入节点时浏览器会做什么. 在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新, ...
随机推荐
- html 复选框checkbox
统计选中复选框的个数 <html> <head> <title> </title> <script> function static_num ...
- 白话SpringCloud | 第六章:Hystrix监控面板及数据聚合(Turbine)
前言 前面一章,我们讲解了如何整合Hystrix.而在实际情况下,使用了Hystrix的同时,还会对其进行实时的数据监控,反馈各类指标数据.今天我们就将讲解下Hystrix Dashboard和Tur ...
- javaSE练习1——变量和运算符
一.已知a,b均是整型变量,写出将a,b两个变量中的值互换的程序.(知识点:变量和运算符综合应用): package com.test; public class t01 { public stati ...
- IDEA+Maven+多个SpringBoot子模块(创建多模块整合项目)
https://blog.csdn.net/willjgl/article/details/77773634 https://blog.csdn.net/qqHJQS/article/details/ ...
- random模块/string模块
一.random模块 random模块可以很容易生成随机数和随机字符串. random.randint(1, 100) # 1-100之间取一个随机数 random.randrange(1, 100) ...
- twaver拓扑图通道组织图(百分比使用率/水槽)效果实现
功能介绍: 利用拓扑图实现:64条通道,根据每条通道是否承载业务,提供百分比展示 首先上图,功能效果如图: 废话不多,直接上代码: <!DOCTYPE html> <html> ...
- 彻底解决INSTALL_FAILED_UPDATE_INCOMPATIBLE的安装错误
利用adb shell进入系统,进入/data/app或者/data/data,删除跟你安装的apk同样的包名: 按Ctrl+C退出系统,利用adb pull /data/system/package ...
- SpringBoot热部署插件
1.配置在 maven工程中的pom.xml文件中 2.SpringBoot框架中提供的一个热部署插件,利用该热部署插件,我们可以在修改代码后不用重启应用,大大提高开发效率:
- Java Hotspot client模式和server模式的区别
当虚拟机运行在-client模式的时候,使用的是一个代号为C1的轻量级编译器, 而-server模式启动的虚拟机采用相对重量级,代号为C2的编译器. C2比C1编译器编译的相对彻底,服务起来之后,性能 ...
- log4go的日志滚动处理——生产环境的适配
日志处理有三类使用环境,开发环境DE,测试环境TE,生产环境PE. 前两类可以看成是一类,重要的是屏幕显示--termlog.生产环境中主要用的是socklog 和 filelog,即网络传输日志和文 ...