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

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

May 16, 2016 pm 03:47 PM
javascript 添加

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 !

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment ajouter un téléviseur à Mijia Comment ajouter un téléviseur à Mijia Mar 25, 2024 pm 05:00 PM

De nombreux utilisateurs privilégient de plus en plus l'écosystème électronique d'interconnexion de la maison intelligente Xiaomi dans la vie moderne. Après vous être connecté à l'application Mijia, vous pouvez facilement contrôler les appareils connectés avec votre téléphone mobile. Cependant, de nombreux utilisateurs ne savent toujours pas comment ajouter Mijia à. leur application Homes., ce guide didacticiel vous présentera les méthodes et étapes de connexion spécifiques, dans l'espoir d'aider tous ceux qui en ont besoin. 1. Après avoir téléchargé l'application Mijia, créez ou connectez-vous au compte Xiaomi. 2. Méthode d'ajout : Une fois le nouvel appareil allumé, rapprochez le téléphone de l'appareil et allumez le téléviseur Xiaomi. Dans des circonstances normales, une invite de connexion apparaîtra. Sélectionnez « OK » pour entrer dans le processus de connexion de l'appareil. Si aucune invite ne s'affiche, vous pouvez également ajouter l'appareil manuellement. La méthode est la suivante : après avoir accédé à l'application Smart Home, cliquez sur le premier bouton en bas à gauche.

Tutoriel sur l'ajout d'un nouveau disque dur dans Win11 Tutoriel sur l'ajout d'un nouveau disque dur dans Win11 Jan 05, 2024 am 09:39 AM

Lors de l'achat d'un ordinateur, nous ne choisissons pas nécessairement un gros disque dur. À ce stade, si nous voulons ajouter un nouveau disque dur à win11, nous pouvons d'abord installer le nouveau disque dur que nous avons acheté, puis ajouter des partitions à l'ordinateur. Tutoriel sur l'ajout d'un nouveau disque dur dans win11 : 1. Tout d'abord, nous démontons l'hôte et trouvons l'emplacement du disque dur. 2. Après l'avoir trouvé, nous connectons d'abord le « câble de données », qui a généralement une conception infaillible. S'il ne peut pas être inséré, inversez simplement le sens. 3. Insérez ensuite le nouveau disque dur dans l'emplacement pour disque dur. 4. Après l'insertion, connectez l'autre extrémité du câble de données à la carte mère de l'ordinateur. 5. Une fois l'installation terminée, vous pouvez le remettre dans l'hôte et l'allumer. 6. Après le démarrage, cliquez avec le bouton droit sur "Cet ordinateur" et ouvrez "Gestion de l'ordinateur" 7. Après ouverture, cliquez sur "Gestion des disques" dans le coin inférieur gauche 8. Ensuite, à droite, vous pouvez

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

Tutoriel pour créer rapidement des raccourcis sur le bureau dans Win11 Tutoriel pour créer rapidement des raccourcis sur le bureau dans Win11 Dec 27, 2023 pm 04:29 PM

Dans Win11, nous pouvons démarrer rapidement des logiciels ou des fichiers sur le bureau en ajoutant des raccourcis sur le bureau, et il nous suffit de cliquer avec le bouton droit sur les fichiers requis pour fonctionner. Ajouter un raccourci sur le bureau dans win11 : 1. Ouvrez « Ce PC » et recherchez le fichier ou le logiciel auquel vous souhaitez ajouter un raccourci sur le bureau. 2. Après l'avoir trouvé, faites un clic droit pour le sélectionner et cliquez sur "Afficher plus d'options" 3. Sélectionnez ensuite "Envoyer à" - "Raccourci du bureau" 4. Une fois l'opération terminée, vous pouvez trouver le raccourci sur le bureau.

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment ajouter un nouveau script dans Tampermonkey-Comment supprimer un script dans Tampermonkey Comment ajouter un nouveau script dans Tampermonkey-Comment supprimer un script dans Tampermonkey Mar 18, 2024 pm 12:10 PM

L'extension Tampermonkey Chrome est un plug-in de gestion de scripts utilisateur qui améliore l'efficacité des utilisateurs et l'expérience de navigation via des scripts. Alors, comment Tampermonkey ajoute-t-il de nouveaux scripts ? Comment supprimer le script ? Laissez l'éditeur vous donner la réponse ci-dessous ! Comment ajouter un nouveau script à Tampermonkey : 1. Prenez GreasyFork comme exemple. Ouvrez la page Web de GreasyFork et entrez le script que vous souhaitez suivre. L'éditeur choisit ici le téléchargement hors ligne en un clic. 2. Sélectionnez un script. Après être entré dans la page du script, vous pouvez voir le bouton pour installer ce script. 3. Cliquez pour installer ce script pour accéder à l'interface d'installation. Cliquez simplement ici pour installer. 4. Nous pouvons voir l'installé en un clic dans le script d'installation.

Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 am 09:39 AM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

Comment se connecter au réseau Polygon dans le portefeuille MetaMask ? Guide didacticiel pour connecter le portefeuille MetaMask au réseau Polygon Comment se connecter au réseau Polygon dans le portefeuille MetaMask ? Guide didacticiel pour connecter le portefeuille MetaMask au réseau Polygon Jan 19, 2024 pm 04:36 PM

Comment ajouter un réseau PolygonMainnet Pour utiliser MATIC (Polygon) avec Metamask, vous devez ajouter un réseau privé appelé "PolygonMainnet". Un transfert avec une mauvaise adresse réseau peut causer des problèmes, alors assurez-vous d'utiliser le réseau "PolygonMainnet" avant de transférer hors de $MATIC. Le portefeuille Metamask est connecté par défaut au réseau principal Ethereum, mais nous pouvons simplement ajouter « PolygonMainnet » et utiliser $MATIC. Juste quelques étapes simples de copier-coller et le tour est joué. Tout d'abord, dans le portefeuille Metamask, cliquez sur l'option réseau dans le coin supérieur droit et sélectionnez "C

See all articles