Exemple d'analyse de la méthode d'ajout de nœuds DOM au document à l'aide de javascript-js tutoriel-php.cn

Exemple d'analyse de la méthode d'ajout de nœuds DOM au document à l'aide de javascript

PHPz

Libérer： 2018-09-29 12:52:21

original

1292 Les gens l'ont consulté

Cet article présente principalement la méthode d'ajout de nœuds DOM aux documents en JavaScript, et compare et analyse les deux méthodes de création de nœuds en JavaScript, impliquant des techniques associées de fonctionnement des nœuds JavaScript et de calcul du temps d'exécution. Les amis dans le besoin peuvent s'y référer. . Les détails sont les suivants :

Voici deux méthodes comparées : la première : créez d'abord tous les nœuds, puis ajoutez-les au temps d'exécution du document. la seconde : ajoutez d'abord un conteneur vide ; le document, puis ajoutez chacun Le temps d'exécution de la création d'un nœud puis de son ajout au conteneur Du point de vue du test, la deuxième méthode est meilleure que la première !

L'effet de l'opération est illustré dans la figure ci-dessous :

Le code spécifique est le suivant :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>将DOM节点添加到文档实例</title>
</head>
<script type="text/javascript">
//第一种：先创建所有节点，再添加到文档
function createAdd(count)
{
  var start=new Date();
  var container=document.createElement("p");
  var obj=document.getElementById("main");
  for(var i=0;i<count;i++)
  {
    var node=document.createElement("p");
    node.style.position="absolute";
    node.style.left=(6+parseInt(Math.random()*100))+"px";
    node.style.top=(6+parseInt(Math.random()*100))+"px";
    container.appendChild(node);
  }
  obj.appendChild(container);
  var end=new Date();
  var duration=end-start;
  alert("第一种方式："+duration+"ms");
}
//第二种：先添加到文档一个空容器，再创建所有接点，并分别添加到容器中
function addCreate(count)
{
  var start=new Date();
  var container=document.createElement("p");
  var obj=document.getElementById("main");
  obj.appendChild(container);
  for(var i=0;i<count;i++)
  {
    var node=document.createElement("p");
    node.style.position="absolute";
    node.style.left=(6+parseInt(Math.random()*100))+"px";
    node.style.top=(6+parseInt(Math.random()*100))+"px";
    container.appendChild(node);  
  }
  var end=new Date();
  var duration=end-start;
  alert("第二种方式："+duration+"ms");
}
//检测输入的数据是否正确
function checkData()
{
  var number=parseInt(document.getElementById("count").value);
  return number;
}
//调用createAdd()函数
function callCreateAdd()
{
  var count=checkData();
  createAdd(count);
}
//调用addCreate()函数
function callAddCreate()
{
  var count=checkData();
  addCreate(count);
}
</script>
<body>
<h3>将DOM节点添加到文档实例</h3>
<hr style="border:1px solid #000000;" />
请输入一个整数：
<input type="text" id="count" name="count" />
<br />
<input type="button" id="createadd" name="createadd" value="第一种：先创建所有节点，再添加到文档方式的运行时长" onClick="callCreateAdd();" />
<input type="button" id="one" name="one" value="第二种：先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长" onClick="callAddCreate();" />
<br />
<p id="main" style="position:absolute;"></p>
</body>
</html>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de ce chapitre, plus Pour les didacticiels associés, veuillez visiter le Tutoriel vidéo JavaScript !