js文档碎片

  今天看视频发现个有意思的东西,叫做文档碎片?文档碎片是什么呢?先卖个关子。

  平常我们在向文档中插入节点的时候可能创建了节点就马上插入父元素,因此浏览器会一直渲染。插入的数量少可能还没影响,可是当插入的节点成千上万的时候,会发现浏览器卡顿了。。。。。。如何解决这种问题呢?这里我们就要用到文档碎片了。在创建节点之后我们可以先把节点append在文档碎片上,在将所有的节点append之后再将文档碎片append在父元素上,理论上会快一些。经测试,有些时候要快一点^_^。。。。。。

  1.普通插入

<input type="button" id="btn1" value="普通"/>
	<ul id="ul1"></ul>
var oBtn = document.getElementById(‘btn1‘);
	var oUl = document.getElementById(‘ul1‘);

	oBtn.onclick = function(){
		var lastTime = new Date().getTime();
		for(var i=0;i<10000;i++){
			var oLi = document.createElement(‘li‘);
			oUl.appendChild(oLi);
		}
		alert(new Date().getTime()-lastTime);
	}

2.文档碎片插入

<input type="button" id="btn1" value="碎片"/>
	<ul id="ul1"></ul>
var oBtn = document.getElementById(‘btn1‘);
	var oUl = document.getElementById(‘ul1‘);

	oBtn.onclick = function(){
		var lastTime = new Date().getTime();
		var oFrag = document.createDocumentFragment();
		for(var i=0;i<10000;i++){
			var oLi = document.createElement(‘li‘);
			oFrag.appendChild(oLi);
		}
		oUl.appendChild(oFrag);
		alert(new Date().getTime()-lastTime);
	}

测试结果:

普通的

文档碎片

确实要快那么一丢丢。。。。不过就算同时插入上万个节点也只快了几ms,所以这个可能也就在面试时有大作用了。。。。。。

时间: 05-02

js文档碎片的相关文章

【JS学习笔记】DOM操作应用-创建、插入和删除元素;文档碎片

一.创建.插入和删除元素 (1)创建DOM元素 createElement(标签名) 创建一个节点 appendChild(节点) 追加一个节点 例子:为ul插入li <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt

jQuery 文档碎片处理

通过JS操作DOM节点可能以节点为单位进行,比如添加节点,可以createElement,createTextNode,然后用appendChild把文本节点和容器节点绑定在一起,然后再用appendChild或insertBefor添加到DOM树中.但如果要往DOM树中动态添加大量的节点.就会很麻烦.而且每次都会刷新DOM,造成性能上的缺陷. 解决方法是使用文档碎片这个方法创建文档碎片. 我个人觉得应该把这个翻译成文档片段比较合适. 使用jQuery解决方案. <span style="

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

document文档碎片

var arrText = ["1","2","3","4","5","6","7","8","9","10"]; var oFragment = document.createDocumentFragment(); for(var i=0;i<arrText.length;i++) { var oP

vue.js 文档

第一个实例: 导入vue.js包-----在<scrpt>标签中写js-----{{参数}}-------- 参数会写在js中的new vue中的data中. New vue({el:'#app', data:{message:'hello vue.js'} }) el:之后的内容是html选择器. v-for v-for指令循环取值 <li v-for="变量 in 数据集合"> 变量自己定义,数据集合已经在data中定义了 数据集合:数组,json, arr

Grunt-jsdoc生成JS API文档

具体的请看官网 https://github.com/krampstudio/grunt-jsdoc 一:首先确保本机电脑上是否已经安装了nodejs和npm.具体安装过程可以看如下: http://www.cnblogs.com/tugenhua0707/p/3497488.html 二: 在安装grunt-jsodc之前,我们先要安装grunt,因此我在F盘下 新建文件夹gruntJSDoc 其中根目录里面新建一个package.json文件,内容如下: { "name": &qu

文档对象模型DOM

1.节点:      文档节点Document      元素节点Element      文本节点Text      属性节点Attr      注释节点Comment        2.节点的属性和方法:      nodeType:判断节点类型      ownerDocument:指向这个节点所属的文档      firstChild:指向在childNodes列表中的第一个节点      lastChild:指向在childNodes列表中的最后一个节点      childNodes

强大的矢量图形库:Raphael JS 中文帮助文档及教程

Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图.饼图.曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作 Rapha?l 是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Exp

js仿百度文库文档上传页面的分类选择器_第二版

仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同时使用多个分类选择器: 此版本把HTML,CSS,以及图片都封装到"category.js"中,解决因文件路径找不到样式及图片的问题: 源码下载地址:http://download.csdn.net/detail/testcs_dn/7290577 初始状态,一个页面使用两个,可以初始化之前选中的分类: 选择状态: 当选中一个分类后,会触发"onChange"事件,如上图中的"您选择的分类编