创建并添加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. 字典树应用 - poj1002

    字典树应用 - poj 1002 Description Businesses like to have memorable telephone numbers. One way to make a ...

  2. Gym - 100712H Bridges(边—双连通分量)

    https://vjudge.net/problem/Gym-100712H 题意: 给出一个图,求添加一条边后最少的桥数量. 思路: 参考了ZSQ大神的题解http://blog.csdn.net/ ...

  3. WinCE数据通讯之Web Service分包传输篇

    前面写过<WinCE数据通讯之Web Service篇>那篇对于数据量不是很大的情况下单包传输是可以了,但是对于大数据量的情况下WinCE终端的内存往往会在解包或者接受数据时产生内存溢出. ...

  4. 编译Python2.7.10

    为了测试 mesos,搞了一个 centos7.1,使用最小化安装,然后自己安装了 net-tools,“开发工具”集.后来想装一下 DCOS Cli工具,结果发现 python 的 pip 不可用. ...

  5. Lucene 更新、删除、分页操作以及IndexWriter优化

    更新操作如下: 注意:通过lukeall-1.0.0.jar 查看软件,我们可以看到,更新其实是先删除在插入, 前面我们知道索引库中有两部分的内容组成,一个是索引文件,另一个是目录文件, 目前我们更新 ...

  6. IIS和ASP.NET MVC 管道处理模型

    转载自  博客园 青羽 http://www.cnblogs.com/tenghoo/archive/2009/11/04/IIS_And_ASPNET_Http_Runtime_Pipeline.h ...

  7. LeetCode第[79]题(Java):Word Search(矩阵单词搜索)

    题目:矩阵单词搜索 难度:Medium 题目内容: Given a 2D board and a word, find if the word exists in the grid. The word ...

  8. Sql Server中的DBCC命令详细介绍

    一:DBCC 1:什么是DBCC 我不是教学老师,我也说不到没有任何无懈可击的定义,全名:Database Console Commands.顾名思义“数据库控制台命令”,说到“控制台“,我第一反应就 ...

  9. 关于hugepages 3.txt

    关于hugepages 3.txt --//有一段时间我一直强调安装oracle一定要配置hugepage,因为现在的服务器内存越来越大,如果还使用4K的页面表,如果内存表占用内存巨大, --//特别 ...

  10. nyoj最少乘法次数——快速幂思想

    最少乘法次数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 给你一个非零整数,让你求这个数的n次方,每次相乘的结果可以在后面使用,求至少需要多少次乘.如24:2*2 ...