创建并添加dom加点如何进行优化?

1、使用文档片(DocumentFragment)

可以理解为"仓库",用来保存将来可能会添加到DOM中的节点;

 var fragment = document.createDocumentFragment();
fragment.appendChild(document.createElement('ul'));
for(var i = 0;i < 4;i++){
var li = document.createElement('li');
li.appendChild(document.createTextNode(i));
fragment.appendChild(li);
}
document.body.appendChild(fragment);

2、使用innerhtml

3、jQuery

两种方式的优劣(还是不甚理解。。):http://fins.iteye.com/blog/183373

添加dom节点及优化的更多相关文章

  1. jquery动态添加DOM节点

    1.append()方法:向每个匹配的元素内部添加元素 appendTo()方法:将所有匹配的元素追加的指定的元素中 <html> <head> <meta http-e ...

  2. javascript 分时函数 分批次添加DOM节点 timeChunk

    创建1000个webqq的qq好友列表, 一个好友用一个节点来表示 * timeChunk var timeChunk = function(a, fn, sz, done) { var obj, t ...

  3. vue,在模块中动态添加dom节点,并监听

    在这里,onclick事件没有作用,因为它指向的是window,如果写为this.click页面显示为undefined, 我采用的是通过class绑定事件,但是会有一个问题,那就是当你渲染多个事件时 ...

  4. console.time 简单分析javascript动态加入Dom节点的性能

    Bullshit 本来想每天都更新下博客的,可是近期要考试,还有就是自己还是停留在暗自窃喜中吧(这样的想法要改变). 事实上近期总在想.自己要怎么去管理自己的数据,每天的生活都是对自己的数据的增删查改 ...

  5. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  6. JavaScript操作DOM节点

    DOM (文档对象模型(Document Object Model)) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网 ...

  7. (转载)html dom节点操作(获取/修改/添加或删除)

    DOM 是关于如何获取.修改.添加或删除 HTML 元素的标准,下面为大家介绍下html dom节点操作,感兴趣的朋友可以参考下   HTML DOM 是关于如何获取.修改.添加或删除 HTML 元素 ...

  8. 将HTML字符转换为DOM节点并动态添加到文档中

    将HTML字符转换为DOM节点并动态添加到文档中 将字符串动态转换为DOM节点,在开发中经常遇到,尤其在模板引擎中更是不可或缺的技术. 字符串转换为DOM节点本身并不难,本篇文章主要涉及两个主题: 1 ...

  9. 为DOM节点添加或者删除class

    项目中如果应用了常用的javascript类库,多数情况下,这些已经封装好的类库,都会封装一个类似于addClass和removeClass的方法,以便于我们对DOM节点的class进行操作. 以jQ ...

随机推荐

  1. Java数字证书操作

    为服务器生成证书 keytool -genkey -v -alias tomcat -keyalg RSA -keystore D:\tomcat.keystore -validity 36500 为 ...

  2. 【网络结构】VGG-Net论文解析

    目录 0. 论文链接 1. 概述 2. 网络结构 2.1 卷积核 2.2 池化核 2.3 全连接层 3. 训练 4. 测试 5. 其他 6.参考链接 @ 0. 论文链接 论文链接 1. 概述   VG ...

  3. codeforce diversity

    2017-08-25 14:59:34 writer:pprp 题意如下:给你一个串字符,再给你一个数字,表示在字符串中的各不相同的字符个数, 问你最少需要改变几个字符达到要求,不能达到要求就输出im ...

  4. RabbitMQ入门(4)——路由(Routing)

    这一篇我们将介绍如何订阅消息的一个子集.例如,我们只需要将日志中的error消息存储到日志文件中而将所有日志消息都在控制台打印出来. 绑定(Bindings) 在前面的例子中,我们创建了交换机和队列的 ...

  5. SpringMvc 笔记

    整理出来是 SpringMvc 笔记 方便以后查询 框架太多了 不经常使用 忘记的可能性很大 自己整理一套笔记 一看就明白了 1 对比 原始请求响应流程 1 发送请求 --> 2 控制层 --& ...

  6. 一些putty的应用设置

    把windows下putty的key转换成linux上使用的rsa key    http://ask.apelearn.com/question/937 putty生成的密钥导入connectbot ...

  7. 【Linux】结合Python 简易实现监控公司网站,邮件发送异常

    背景 由于一些原因,博主负责测试的网站的服务器切换到了香港,切换后出现了多次访问超时的情况 于是主动请缨写一个自动监测的脚本,本来准备完全使用shell来写,后来发现shell发送邮件只能在测试机之间 ...

  8. keras运行gan的几个bug解决

    http://blog.csdn.net/u012317000/article/details/79211274 https://www.jianshu.com/p/5b1f7004144d

  9. 设计模式--原型模式C++实现

    原型模式C++实现 1定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 2类图 3实现 class Prototype { protected: Prototype(); publ ...

  10. UVA-12661 Funny Car Racing (dijkstra)

    题目大意:一张有向图,问从起点到终点的最快时间.不过边有点特殊,从u到v的边没开放a秒就关闭b秒. 题目分析:dijkstra算法即可.在从u走到v的时候要注意一下时间. 代码如下: # includ ...