js文档碎片

Posted 2020-09-16

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

　　平常我们在向文档中插入节点的时候可能创建了节点就马上插入父元素,因此浏览器会一直渲染。插入的数量少可能还没影响,可是当插入的节点成千上万的时候，会发现浏览器卡顿了。。。。。。如何解决这种问题呢?这里我们就要用到文档碎片了。在创建节点之后我们可以先把节点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，所以这个可能也就在面试时有大作用了。。。。。。