首页 > 代码库 > 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment
深入理解DOM节点类型第四篇——文档片段节点DocumentFragment
目录
[1]特征 [2]作用前面的话
在所有节点类型中，只有文档片段节点DocumentFragment在文档中没有对应的标记。DOM规定文档片段(document fragment)是一种“轻量级”的文档，可以包含和控制节点，但不会像完整的文档那样占用额外的资源
特征
创建文档片段，要使用document.createDocumentFragment()方法。文档片段继承了Node的所有方法，通常用于执行那些针对文档的DOM操作
文档片段节点的三个node属性——nodeType、nodeName、nodeValue分别是11、‘#document-fragment‘和null，文档片段节点没有父节点parentNode
var frag = document.createDocumentFragment();console.log(frag.nodeType);//11console.log(frag.nodeValue);//nullconsole.log(frag.nodeName);//‘#document-fragment‘console.log(frag.parentNode);//null
作用
我们经常使用javascript来操作DOM元素，比如使用appendChild()方法。每次调用该方法时，浏览器都会重新渲染页面。如果大量的更新DOM节点，则会非常消耗性能，影响用户体验
javascript提供了一个文档片段DocumentFragment的机制。如果将文档中的节点添加到文档片段中，就会从文档树中移除该节点。把所有要构造的节点都放在文档片段中执行，这样可以不影响文档树，也就不会造成页面渲染。当节点都构造完成后，再将文档片段对象添加到页面中，这时所有的节点都会一次渲染出来，这样就能减少浏览器负担，提高页面渲染速度
<ul id="list1"></ul><script>var list1 = document.getElementById(‘list1‘);console.time("time");var fragment = document.createDocumentFragment();for(var i = 0; i < 500000; i++){ fragment.appendChild(document.createElement(‘li‘));}list1.appendChild(fragment);console.timeEnd(‘time‘);</script><ul id="list"></ul><script>var list = document.getElementById(‘list‘);console.time("time");for(var i = 0; i < 500000; i++){ list.appendChild(document.createElement(‘li‘));}console.timeEnd(‘time‘);</script>
循环50万次的各浏览器结果
使用文档片段 不使用文档片段firefox 402.04ms 469.31mschrome 429.800ms 729.634ms循环10万次的各浏览器结果
使用文档片段 不使用文档片段IE11 2382.15ms 2204.47msIE10 2404.239ms 2225.721msIE9 2373ms 2255msIE8 4464ms 4210msIE7 5887ms 5394ms由以上结果可以看出，若使用IE浏览器，则使用文档片段DocumentFragment的性能并不会更好，反而变差；若使用chrome和firefox浏览器，使用文档片段DocumentFragment可以提升性能
最后
由于文档片段的优点在IE浏览器下并不明显，反而可能成为多此一举。所以，该类型的节点并不常用
<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script>深入理解DOM节点类型第四篇——文档片段节点DocumentFragment