在《javascript高级程序设计》一书的6.3.5:创建和操作节点一节中，介绍了几种动态创建html节点的方法，其中有以下几种常见方法：
· crateAttribute(name)： 用指定名称name创建特性节点
· createComment(text)： 创建带文本text的注释节点
· createDocumentFragment()： 创建文档碎片节点
· createElement(tagname)： 创建标签名为tagname的节点
· createTextNode(text)： 创建包含文本text的文本节点
其中最感兴趣且以前没有接触过的一个方法是createComment(text)方法，书中介绍说：在更新少量节点的时候可以之间向document.body节点中添加，但是当要向document中添加大量数据是，如果诸葛添加这些新节点，这个过程非常缓慢，因为每添加一个节点都会调用父节点的appendChild()方法，为了解决这个问题，可以使用一个文档碎片，把所有的新节点附加其上，然后把文档碎片一次性添加到document中。
加入想创建十个段落，使用常规的方式可能会写出这样的代码：
function slowAdd() {
for (var i = 0; i < 10000; i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}
}
当然，这段代码运行是没有问题，但是他调用了1000次document.body.appendChild()，每次都要产生一次页面渲染。这时碎片就十分有用了：
function fastAdd(){
var oFragmeng = document.createDocumentFragment(); //创建文档碎片
for (var i = 0; i < 10000; i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
oFragmeng.appendChild(op);
}
document.body.appendChild(oFragmeng); //最后一次性添加到document中
}
在这段代码中，每个新的<p />元素都被添加到文档碎片中，然后这个碎片被作为参数传递给appendChild()。这里对appendChild()的调用实际上并不是把文档碎片本省追加到body元素中，而是仅仅追加碎片中的子节点，然后可以看到明显的性能提示，document.body.appenChild()一次替代十次，着一位着只需要进行一个内容渲染刷新。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function slowAdd() {
for (var i = 0; i < 10000; i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
document.body.appendChild(op);
}
}
function fastAdd(){
var oFragmeng = document.createDocumentFragment(); //创建文档碎片
for (var i = 0; i < 10000; i++) {
var op = document.createElement("span");
var oText = document.createTextNode(i);
op.appendChild(oText);
oFragmeng.appendChild(op);
}
document.body.appendChild(oFragmeng); //最后一次性添加到document中
}
</script>
</head>
<body>
<p>
<input id="Button1" type="button" value="button" onclick = "slowAdd()"/></p>
<p>
<input id="Button2" type="button" value="button" onclick = "fastAdd()"/></p>
</body>
</html>
相关推荐
### JavaScript性能优化之创建文档碎片(document.createDocumentFragment) 在探讨`document.createDocumentFragment()`方法之前，我们首先需要理解浏览器在处理DOM（文档对象模型）节点插入时的基本行为。DOM是HTML...
JavaScript文档碎片操作是一种高效处理DOM元素的技术，尤其在需要大量添加或删除DOM节点时，能够显著提升页面性能。文档碎片（Document Fragment）并不是真正意义上的DOM节点，而是一个轻量级的容器，它允许我们在...
在JavaScript中，文档碎片（Document Fragment）是一种轻量级的文档结构，它允许开发者在不直接操作DOM树的情况下，一次性地处理多个节点。这在处理大量动态内容时能显著提高性能，因为它减少了对DOM的操作次数，...
- DOM操作优化：减少DOM操作次数，利用文档碎片等技巧。 - 内存管理：理解闭包可能导致的内存泄漏，以及如何有效管理变量生命周期。 10. **浏览器兼容性**： - 特性检测：使用Modernizr等库进行浏览器功能检测。...
此外，现代JavaScript提供了更简洁的DOM操作方式，如使用`template literals`（模板字符串）和`insertAdjacentHTML()`方法，或者利用`fragment`（文档碎片）提高性能。例如： ```javascript var fragment = ...
- **性能优化**：在大量创建元素时，可以考虑使用文档碎片（`DocumentFragment`）来提高性能。 总之，动态创建HTML节点是Web开发中一个非常实用且重要的技能，能够帮助开发者构建更加灵活和动态的Web应用。通过学习...
- `createDocumentFragment()`：创建一个文档碎片，用于存储节点而不实际插入文档，提高性能。 8. **命名空间（Namespaces）**： - 对于XML文档，Node接口还支持命名空间的操作，如`lookupNamespaceURI(prefix)`...
9. **DOM性能优化**：理解DOM操作的性能影响，如避免不必要的重绘和回流，使用文档碎片等技巧，能够提升网页性能。 10. **附录内容**：可能包含常见问题解答、API参考、术语表等，有助于读者巩固所学知识。 通过...
在实际应用中，为了优化性能，通常会避免大量遍历DOM树，而是使用`querySelector`或`querySelectorAll`一次获取所有目标节点，或者使用文档碎片（`document.createDocumentFragment`）来批量操作节点，减少重绘和...
1. 使用文档碎片（DocumentFragment）在内存中构建新的DOM结构，一次性添加到文档中。 2. 避免不必要的遍历和操作，利用CSS选择器优化查找。 3. 利用事件委托，将事件监听器添加到父元素，减少事件监听器的数量。 ...
8. **DOM性能优化**：书中还会探讨如何避免DOM操作导致的性能问题，如批量操作、延迟加载和使用文档碎片等最佳实践。 9. **源码分析**：提供的源码文件可能包含书中示例的实现，读者可以通过阅读源码加深对概念的...
8. **DOM的性能优化**：讲解如何减少DOM操作对页面性能的影响，如使用文档碎片（`document.createDocumentFragment`）和批量操作。 通过学习这些内容，开发者能够熟练掌握JavaScript与DOM的结合，实现丰富的网页...
当使用`childNodes`遍历并尝试将子节点添加到文档碎片时，发现由于在循环过程中子节点已经被从DOM中移除，导致`childNodes`的长度会实时更新，从而影响循环的索引。这是因为NodeList是实时的，会反映DOM的变化，而...
通过创建文档碎片（`document.createDocumentFragment()`）、批量操作和缓存引用等方法可以优化DOM操作。 10. **jQuery和其他库**：虽然本资源可能不涉及jQuery等库，但它们提供了更简洁的API来操作DOM，简化了跨...
在实际应用中，JavaScript-DOM编程的艺术不仅包括理解和掌握DOM的基本概念，还包括优化DOM操作以提高性能，比如减少DOM遍历，利用文档碎片（DocumentFragment）进行批量操作，以及使用事件委托等技术。学习DOM编程...
1. **节点类型**：在DOM中，有多种类型的节点，包括元素节点（如`<div>`）、属性节点（如`class="container"`）、文本节点（包含纯文本内容）、注释节点（用于添加解释性文字）和文档节点（整个文档的顶级节点）。...
8. **性能优化**：探讨处理大型DOM树时的性能问题和优化策略，如延迟加载、使用文档碎片等。 9. **实际应用**：通过实例展示DOM在网页动态更新、AJAX异步通信、数据绑定等实际场景中的应用。 10. **与其他技术的...
1. **DOM基本概念**：介绍DOM的基本结构和术语，如节点、元素、属性、文档、节点类型等，以及如何通过JavaScript获取和操作这些元素。 2. **DOM操作**：包括查找元素（例如，通过ID、标签名、类名等），遍历DOM树，...