创建并添加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. erwin逆向工程,logical模型列名修改为中文

    逆向工程,应该选择physical template,这样拷贝到logical/physical 模型中,才可以将logical模型的列名修改为中文.

  2. 【cs231n】神经网络学习笔记1

    神经网络推荐博客: 深度学习概述 神经网络基础之逻辑回归 神经网络基础之Python与向量化 浅层神经网络 深层神经网络 前言 首先声明,以下内容绝大部分转自知乎智能单元,他们将官方学习笔记进行了很专 ...

  3. vcf2maf

    1.https://github.com/mskcc/vcf2maf 2.https://github.com/cbare/vcf2maf

  4. phpstorm 右下角显示updating indices,一直有任务卡着

    其实就是生成的这个node_modules目录内文件太多了,选中node_modules这个目录右键,选择Excluded 一直在加载忽略掉这个文件就可以了

  5. C++名字查找和重载

    重载函数的定义:在同一作用域内的几个函数名字相同但形参列表不同,称为重载函数.这里有一个重要的前提就是:同一个作用域: 而如果重载函数是定义在不同的作用域,那么一旦编译器在当前作用域找到所需的名字,编 ...

  6. IIS优化整理

    IIS 之 在IIS7.IIS7.5中应用程序池最优配置方案 找到Web站点对应的应用程序池,“应用程序池” → 找到对应的“应用程序池” → 右键“高级设置...” 一.一般优化方案 1.基本设置 ...

  7. 搞懂分布式技术4:ZAB协议概述与选主流程详解

    搞懂分布式技术4:ZAB协议概述与选主流程详解 ZAB协议 ZAB(Zookeeper Atomic Broadcast)协议是专门为zookeeper实现分布式协调功能而设计.zookeeper主要 ...

  8. js排序算法06——希尔排序

    希尔排序本质是一种插入排序,由一位叫希尔的大神提出得名,其基本思想是将数组分组进行插入排序,每次消除不止一个逆序对,这样就提高了插入排序的效率.最后一步进行一间隔的插入排序,此时数组已经基本有序.代码 ...

  9. VUE基本安装

    // 安装脚手架 cnpm install -g vue-cli // 初始化项目 vue init webpack 项目名称 // 安装依赖 cd 项目名称 cnpm i // 安装stylus c ...

  10. 一款连接SqlServer的数据库工具

    由于自己使用的电脑系统是xp,而服务器上的数据库是SqlServer2012,于是用SqlServer2005管理端操作2012,总是不成功.在网上也百度谷歌了很久,也没有解决,也发了很多问没有找到解 ...