IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[DOM] fonction tres lourde, getElementById


Sujet :

JavaScript

  1. #1
    Membre régulier
    Inscrit en
    Octobre 2007
    Messages
    160
    Détails du profil
    Informations forums :
    Inscription : Octobre 2007
    Messages : 160
    Points : 77
    Points
    77
    Par défaut [DOM] fonction tres lourde, getElementById
    Salut tout le monde,
    j'ai une fonction javascript récursive, et puis il parrait que l'instruction getElementbyid alourdi beaucoup l'execution de cette fonction, ça prends pus que 15 seconde
    voilà le code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
     
    function Draw_Div()
    {
       var contenu ="";
    	// Crée la table servant à contenir chaqu'une des icones et le texte du noeud
    	contenu =  "<TABLE ID = '" + this.table + "' BORDER = 0 CELLSPACING = 0 CELLPADDING = 0><TR><TD VALIGN = middle nowrap>";
     
     
    	// Récupère le booléen, servant à indiquer si le noeud possède ou non un noeud sous lui
    	var isEnd = this.IsEnd();
     
    	// Récupère le booléen, servant à indiquer si le noeud possède au moin un noeud fils
    	var haveAChild = this.HaveAChild();
     
    	// Parcourt l'index du noeud pour déterminer les icones à placer devant le noeud
    	var indice = 2
    	while( indice < this.index.length - 1 )
    	{
    		// Recherche le nombre de chiffres du nombre suivant
    		var tailleNombre = 1;
    		while( indice + tailleNombre < this.index.length && this.index.substring( indice + tailleNombre, indice + tailleNombre + 1 ) != "_" )
    		{
    			tailleNombre ++;
    		}
     
    		// Récupère l'indice suivant
    		var indiceSuivant = parseInt( this.index.substring( indice, indice + tailleNombre ), 10 );
     
    		// Vérifie qu'il y ait un indice et qu'il ne sagisse pas du noeud courant
    		if( ! isNaN( indiceSuivant ) && this.index != this.index.substring( 0, indice ) + indiceSuivant )
    		{
    			// Incrémente l'indice
    			indiceSuivant ++;
     
    			// Crée l'index du noeud devant se situer directement en dessous
    			var indexSuivant = this.index.substring( 0, indice ) + indiceSuivant;
     
    			// Buffer où sera stocké le nom de l'icone à ajouter
    			var icone;
     
    			// La treeview contient l'index créé
    			if( treeView.Contient( indexSuivant ) )
    			{
    				// Met l'icone de la ligne pointillée
    				icone = "TreeView/PointillesLigne.gif";
    			}
    			// La treeview ne contient pas l'index créé
    			else
    			{
    				// Met une icone vide
    				icone = "TreeView/Vide.gif";
    			}
     
    			// Ajoute l'icone dans la table, puis passe à la colonne suivante
    			contenu +=  "<IMG SRC = '" + icone + "' ></TD><TD VALIGN = middle nowrap>" ;
     
    		}
     
    		// Continue à parcourir l'index du noeud
    		indice = indice + tailleNombre;
    		indice ++;
    	}
     
    	// Buffer où sera stocké le nom de l'icone à ajouter
    	var icone;
     
    	// Le noeud contient au moin un noeud fils
    	if( haveAChild )
    	{
    		// Le noeud est développé
    		if( this.isExpand )
    		{
    			// Met l'icone indiquant que le noeud peut être compacté
    			icone = "Moin";
    		}
    		// Le noeud est compacté
    		else
    		{
    			// Met l'icone indiquant que le noeud peut être développé
    			icone = "Plus";
    		}
    	}
    	// Le noeud ne contient aucun noeud fils
    	else
    	{
    		// Met l'icone contenant les pointillés
    		icone = "Pointilles";
    	}
     
    	// Le noeud ne possède aucun autre noeud en dessous de lui
    	if( isEnd )
    	{
    		// Modifie l'icone pour qu'elle finisse la branche
    		icone += "Fin.gif";
    	}
    	// Le noeud possède au moin un noeud en dessous de lui
    	else
    	{
    		// Ajoute l'extension à l'icone
    		icone += ".gif";
    	}
     
    	// Le noeud possède au moin un noeud fils
    	if( haveAChild )
    	{
    		// Crée le nom que possèdera l'icone servant à développer/compacter le noeud
    		var nomIcone = "EXPAND_" + this.index;
     
    		// Ajoute l'icone en lui indiquant la méthode à appeler lors d'un clique dessus
    		contenu +=  "<IMG ID = '" + nomIcone + "' STYLE = {cursor:hand;} SRC = 'TreeView/" + icone + "' ONCLICK = 'OnExpand( " + nomIcone + " )'> ";
     
    	}
    	// Le noeud ne possède aucun fils
    	else
    	{
    		// Ajoute l'icone
    		contenu +=  "<IMG SRC = 'TreeView/" + icone + "'>"; 
    	}
     
    	// Passe à la colonne suivante et lui met l'icone du noeud dedans
    	contenu +=  "</TD><TD VALIGN = middle nowrap><IMG ID = 'ICONE_" + this.index + "' SRC = '" + this.icone + "' ONCLICK = '" + this.onClick + "( &quot;" + this.index + "&quot;, &quot;" + this.texte + "&quot; )' ONMOUSEOVER = 'OnOver(&quot;" + this.index + "&quot;)' ONMOUSEOUT = 'OnOut(&quot;" + this.index + "&quot;)'></TD><TD VALIGN = middle nowrap>" ;
     
     
     
    	// Passe à la colonne suivante où sera affiché le texte du noeud
     
     
    	// Crée le nom unique du FONT
    	var nomFont = "TEXTE_" + this.index;
     
    	// Ajoute le texte dans la table
    	contenu +=  "<FONT ID = '" + nomFont + "'" + "CLASS = '" + this.style + "' COLOR = '#000000' ONCLICK = '" + this.onClick + "( &quot;" + this.index + "&quot;, &quot;" + this.texte + "&quot; )' ONMOUSEOVER = 'OnOver(&quot;" + this.index + "&quot;)' ONMOUSEOUT = 'OnOut(&quot;" + this.index + "&quot;)'>";
    		// Le curseur prendra la forme d'une main lorsqu'il passera par dessus
    	if(this.texte == "")
    	contenu +=  "<input type=text value='SubRegion' style='height:10px;font-size:80%' id='name" +this.table+ "' ONCLICK = '" + this.onClick + "( &quot;" + this.index + "&quot;, &quot;" + this.texte + "&quot; )' onkeyup='javascript:SaveName(event,this.value);' ></FONT>"; 
        else
        contenu +=  this.texte + "</FONT>"; 
    	// Referme la colonne et la table
    	contenu +=  "</TD></TR></TABLE>";
        document.getElementById('CONTOUR_TREEVIEW').innerHTML += contenu; 
    	// Vérifie si le noeud possède des fils et s'il est développer
    	if( haveAChild )
    	{
    		// Parcourt le tableau de noeud fils
    		var indiceNoeud = 0
    		while( this.tableauEnfants[ indiceNoeud ] != null )
    		{
    			// Lance l'affichage du noeud
    			this.tableauEnfants[ indiceNoeud ].Draw_Div();
     
    			// Passe au noeud suivant
    			indiceNoeud ++;
    		}
    	}
     
    }

    SVP, de chercher avec moi comment rendre l'execution plus rapide en remplacant le getelementbyid ou bien en evitant de faire le getelementbyid à chaque et le faire juste à la fin, sachant que dans mon cas je dois pas utiliser document.write...

    Merci, Merci d'avance

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 640
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 640
    Points : 66 669
    Points
    66 669
    Billets dans le blog
    1
    Par défaut
    créer des elements avec innerHTML ...

    mieux vaut passer par le DOM

  3. #3
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Points : 4 835
    Points
    4 835
    Par défaut
    plein d'amélioration ==>

    //A mettre en variable globale
    var montreeview = document.getElementById('CONTOUR_TREEVIEW');

    // a remplacer
    while( indice < this.index.length - 1 )
    //par :
    var taille = this.index.length;
    while( indice < taille - 1 )

    //petite optimisation
    this.tableauEnfants[ indiceNoeud ].Draw_Div();

    //en
    new this.tableauEnfants[ indiceNoeud ].Draw_Div();


    externalise =>


    //créer une méthode pour ajouter le contenu ....
    // Passe à la colonne suivante et lui met l'icone du noeud dedans
    contenu += "</TD><TD VALIGN = middle nowrap><IMG ID = 'ICONE_" + this.index + "' SRC = '" + this.icone + "' ONCLICK = '" + this.onClick + "( "" + this.index + "", "" + this.texte + "" )' ONMOUSEOVER = 'OnOver("" + this.index + "")' ONMOUSEOUT = 'OnOut("" + this.index + "")'></TD><TD VALIGN = middle nowrap>" ;

    commence par la tu devrais nêtement améliorer les temps d'éxécution

    ps : spaffy , je sais ça fait toujours ça ... moi le matin , je prend des anti-dépresseurs avant de venir lire les premiers post

  4. #4
    Membre régulier
    Inscrit en
    Octobre 2007
    Messages
    160
    Détails du profil
    Informations forums :
    Inscription : Octobre 2007
    Messages : 160
    Points : 77
    Points
    77
    Par défaut
    Merci pour vos rèponses,
    J'ai trouvé la rèponse:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    if( haveAChild )
    	{
    		// Parcourt le tableau de noeud fils
    		var indiceNoeud = 0
    		while( this.tableauEnfants[ indiceNoeud ] != null )
    		{
    			// Lance l'affichage du noeud
    			 contenu += this.tableauEnfants[ indiceNoeud ].Draw_Div();
     
    			// Passe au noeud suivant
    			indiceNoeud ++;
    		}
    		return contenu;
    	}
    	else
    	{return contenu;}
    et ça marche très bien

    Pourtant c'est quoi DOM?

    Merci

  5. #5
    Expert éminent sénior
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 650
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 650
    Points : 11 142
    Points
    11 142
    Par défaut
    bonjour,

    Citation Envoyé par amine84 Voir le message

    Pourtant c'est quoi DOM?
    voici une explication accompagnée d'un exemple.

    ps le_chomeur : Quand j'ai vu la première ligne de code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
      var contenu ="";
    	contenu =  "<TABLE ID = '" + this.table + "' BORDER = 0 CELLSPACING = 0 CELLPADDING = 0><TR><TD VALIGN = middle nowrap>";
    je me suis tout de suite "il y a un innerHTML pas loin "

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [DOM] fonction validate()
    Par norkius dans le forum Bibliothèques et frameworks
    Réponses: 1
    Dernier message: 22/05/2007, 10h02
  2. [DOM] fonction javascript dans html
    Par nopnop dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 23/04/2007, 09h53
  3. [DOM] Fonctions "imbriquées" et valeur de retour
    Par hush dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 19/04/2007, 16h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo