今晚在使用到这结点添加也就随笔写写，看调用多次document.body.appendChild(),每次都要刷新页面一次。效率也就大打折扣了，也正使用document.createDocumentFragment()创建一个文档碎片，把所有的新结点附加在其上，然后把文档碎片的内容一次性添加到document中，这也就只需要一次页面刷新就可。
如：
<html>
<head>
<title>createElement</title>
<script type="text/javascript">
function createMessage()
{ var oP=document.createElement("p");
var oText=document.createTextNode("Hello World");
oP.appendChild(oText);
document.body.appendChild(oP);
var arrText=["first","second","third","fourth"];
var oFragment=document.createDocumentFragment();
for(var i=0;i<arrText.length;i++)
{
var oP=document.createElement("p");
var oText=document.createTextNode(arrText[i]);
oP.appendChild(oText);
oFragment.appendChild(oP);
}
document.body.appendChild(oFragment);
}
</script>
</head>
<body onload="createMessage()">
<div id="div1">createMessage</div>
</body>
</html>
分享到：
相关推荐
### JavaScript性能优化之创建文档碎片(document.createDocumentFragment) 在探讨`document.createDocumentFragment()`方法之前，我们首先需要理解浏览器在处理DOM（文档对象模型）节点插入时的基本行为。DOM是HTML...
`document.createDocumentFragment()`是JavaScript中的一个非常有用的API，它允许开发者在不实际修改DOM树的情况下构建和操作一组节点。这个方法返回一个无父节点的`DocumentFragment`对象，可以被视为一个临时的、...
网上可以搜到的大部分都是说使用createDocumentFragment主要是因为避免因createElement多次添加到document.body引起的效率问题，比如： 代码如下: var arrText=[“1″,”2″,”3″,”4″,”5″,”6″,”7″,”8″,”...
使用document.createDocumentFragment()方法可以创建一个DocumentFragment对象。创建后，你可以将多个元素添加到该对象中。一旦所有的操作都完成，你可以将DocumentFragment一次性地附加到DOM树上。与逐个添加节点到...
代码如下: function asyncInnerHTML(HTML, callback) { var temp = document.createElement(‘div’), frag = document.createDocumentFragment(); temp[removed] = HTML;//要加入的内容先放到这里。 (function(){ ...
`createDocumentFragment`是一个非常实用的工具，可以帮助我们优化性能。本文将深入探讨Vue中`createDocumentFragment`的使用方法。 首先，让我们了解为什么直接通过循环插入大量元素是低效的。假设我们需要在一个...
在GIS（地理信息系统）开发中，地图实现是一个关键环节，涉及到如何高效地加载大量地理数据并展示在地图上。本文将深入探讨“地图实现批量加载数据及图层展示”的技术要点，以帮助开发者理解并掌握这一核心技能。...
var frag = document.createDocumentFragment(); for (var i = 0; i ; i++) { var el = document.createElement('p'); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); ``` 2...
var frag = document.createDocumentFragment(); for (var i = 0; i ; i++) { var el = document.createElement('p'); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); ``` 1.1.2 ...
这时，`fragment.js`或Vue中的`createDocumentFragment`方法就显得尤为重要。`createDocumentFragment`是DOM API提供的一种机制，用于在内存中构建一个文档片段，避免频繁地与真实DOM交互导致的性能问题。 在传统的...
初识createDocumentFragment Promise原理与实现探究的一种思路 Tip Content-Security-Policy的理解 初识createDocumentFragment Vue2的独立构建与运行时构建的差别 JavaScript的异步性和队列问题 CommonJS模块化规范...
本章节重点介绍XML文档中常用的几个方法：`abort`、`appendChild`、`cloneNode`、`createAttribute`、`createCDATASection`、`createComment`、`createDocumentFragment`、`createElement` 和 `...
创建 DocumentFragment 可以使用 document.createDocumentFragment 方法或者构造函数来创建一个空的 DocumentFragment。 DocumentFragment 的属性继承自 Node，並补充了 ParentNode 接口中的属性。例如，ParentNode...
var frag = document.createDocumentFragment(); for (var i = 0; i ; i++) { var el = document.createElement('p'); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); ``` 通过...
在高级程序设计中，我们还会接触到`createDocumentFragment()`，这个方法创建一个内存中的文档片段，可以在不实际改变DOM的情况下预处理元素，提高性能。此外，`appendChild()`, `insertBefore()`, `removeChild()`...
因此，推荐使用`document.createDocumentFragment()`和批量修改来优化性能，或者使用`requestAnimationFrame()`确保在浏览器绘制之前执行DOM更新。 总的来说，DOM是前端开发中的基础工具，理解和掌握DOM的使用是每...