含义：创建文档片段，它继承了Node的所有方法，对DOM操作性能非常好。
创建文档片段 如下方法：
var frag = document.createDocumentFragment();
文档片段有三个node属性，nodeType, nodeName, nodeValue; 他们的值分别是 11, ‘#document-fragment‘, null, 文档片段节点没有父节点parentNode. 如下代码演示：
var frag = document.createDocumentFragment(); console.log(frag.nodeType); // 11 console.log(frag.nodeValue); // null console.log(frag.nodeName); // #document-fragment console.log(frag.parentNode); // null
它有什么作用呢？
我们经常使用js来操作DOM操作，比如向页面中插入元素，每次插入元素的时候，浏览器会发生重绘，都需要重新渲染页面，如果做大量的这样的操作，非常影响性能的，影响用户体验。
比如如下代码：
var ul = document.getElementById("ulId");
for (var i = 0; i < 30; i++) {
var li = document.createElement(‘li‘);
li.innerHTML = "aaa" + i;
ul.appendChild(li)
}
我们知道每一次插入都会引起重新渲染(计算元素的尺寸，显示内容等)，会重新重绘页面，因此会影响性能的，我们最常见还有一种方法是将创建的元素写到一个字符串上，然后一次性写到innerHTML上，这种使用浏览器对innerHTML的解析比上面多次插入快很多，但是构造字符串灵活性比较差，很难符合创建各种各样的DOM元素。如下代码：
var ul = document.getElementById("ulId");
var ihtml = ‘‘;
for (var i = 0; i < 30; i++) {
ihtml += ‘<li>‘+i+‘</li>‘;
}
ul.innerHTML = ihtml;
但是使用DocumentFragment，可以弥补上面两种方法的不足。
DocumentFragment是没有父节点的最小文档对象，常用于存储html和xml文档，它继承了Node，因此它有Node的所有属性和方法，完全可以操作Node那样操作DocumentFragment.
DocumentFragment文档片段是存在于内存中的，没有在DOM中，所以将子元素插入到文档片段中不会引起页面回流，因此使用DocumentFragment可以起到性能优化作用。
比如上面插入的代码可以改成如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>标题</title>
<link rel="shortcut icon" href="/favicon.ico">
</head>
<body>
<ul id="ulId"></ul>
<script>
var ul = document.getElementById("ulId");
var frag = document.createDocumentFragment();
var ihtml = ‘‘;
for (var i = 0; i < 30; i++) {
var li = document.createElement(‘li‘);
li.innerHTML = "index: " + i;
frag.appendChild(li);
}
ul.appendChild(frag);
</script>
</body>
</html>
时间： 2024-10-21 21:25:00